Colorize labels in issue search field

3 files changed, 286 insertions, 0 deletions

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 d75b9061281..8b750561eb7 100644
--- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
@@ -1,3 +1,5 @@
+import AjaxCache from '~/lib/utils/ajax_cache';
+
 require('~/filtered_search/filtered_search_visual_tokens');
 const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper');
 
@@ -611,4 +613,103 @@ describe('Filtered Search Visual Tokens', () => {
       expect(token.querySelector('.value').innerText).toEqual('~bug');
     });
   });
+
+  describe('renderVisualTokenValue', () => {
+    let searchTokens;
+
+    beforeEach(() => {
+      tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(`
+        ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', 'none')}
+        ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search')}
+        ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', 'upcoming')}
+      `);
+
+      searchTokens = document.querySelectorAll('.filtered-search-token');
+    });
+
+    it('renders a token value element', () => {
+      spyOn(gl.FilteredSearchVisualTokens, 'updateLabelTokenColor');
+      const updateLabelTokenColorSpy = gl.FilteredSearchVisualTokens.updateLabelTokenColor;
+
+      expect(searchTokens.length).toBe(2);
+      Array.prototype.forEach.call(searchTokens, (token) => {
+        updateLabelTokenColorSpy.calls.reset();
+
+        const tokenName = token.querySelector('.name').innerText;
+        const tokenValue = 'new value';
+        gl.FilteredSearchVisualTokens.renderVisualTokenValue(token, tokenName, tokenValue);
+
+        const tokenValueElement = token.querySelector('.value');
+        expect(tokenValueElement.innerText).toBe(tokenValue);
+
+        if (tokenName.toLowerCase() === 'label') {
+          const tokenValueContainer = token.querySelector('.value-container');
+          expect(updateLabelTokenColorSpy.calls.count()).toBe(1);
+          const expectedArgs = [tokenValueContainer, tokenValue];
+          expect(updateLabelTokenColorSpy.calls.argsFor(0)).toEqual(expectedArgs);
+        } else {
+          expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
+        }
+      });
+    });
+  });
+
+  describe('updateLabelTokenColor', () => {
+    const jsonFixtureName = 'labels/project_labels.json';
+    const dummyEndpoint = '/dummy/endpoint';
+
+    preloadFixtures(jsonFixtureName);
+    const labelData = getJSONFixture(jsonFixtureName);
+    const findLabel = tokenValue => labelData.find(
+      label => tokenValue === `~${gl.DropdownUtils.getEscapedText(label.title)}`,
+    );
+
+    const bugLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~bug');
+    const missingLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~doesnotexist');
+    const spaceLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~"some space"');
+
+    const parseColor = (color) => {
+      const dummyElement = document.createElement('div');
+      dummyElement.style.color = color;
+      return dummyElement.style.color;
+    };
+
+    beforeEach(() => {
+      tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(`
+        ${bugLabelToken.outerHTML}
+        ${missingLabelToken.outerHTML}
+        ${spaceLabelToken.outerHTML}
+      `);
+
+      const filteredSearchInput = document.querySelector('.filtered-search');
+      filteredSearchInput.dataset.baseEndpoint = dummyEndpoint;
+
+      AjaxCache.internalStorage = { };
+      AjaxCache.internalStorage[`${dummyEndpoint}/labels.json`] = labelData;
+    });
+
+    const testCase = (token, done) => {
+      const tokenValueContainer = token.querySelector('.value-container');
+      const tokenValue = token.querySelector('.value').innerText;
+      const label = findLabel(tokenValue);
+
+      gl.FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue)
+      .then(() => {
+        if (label) {
+          expect(tokenValueContainer.getAttribute('style')).not.toBe(null);
+          expect(tokenValueContainer.style.backgroundColor).toBe(parseColor(label.color));
+          expect(tokenValueContainer.style.color).toBe(parseColor(label.text_color));
+        } else {
+          expect(token).toBe(missingLabelToken);
+          expect(tokenValueContainer.getAttribute('style')).toBe(null);
+        }
+      })
+      .then(done)
+      .catch(fail);
+    };
+
+    it('updates the color of a label token', done => testCase(bugLabelToken, done));
+    it('updates the color of a label token with spaces', done => testCase(spaceLabelToken, done));
+    it('does not change color of a missing label', done => testCase(missingLabelToken, done));
+  });
 });
diff --git a/spec/javascripts/fixtures/labels.rb b/spec/javascripts/fixtures/labels.rb
new file mode 100644
index 00000000000..2e4811b64a4
--- /dev/null
+++ b/spec/javascripts/fixtures/labels.rb
@@ -0,0 +1,56 @@
+require 'spec_helper'
+
+describe 'Labels (JavaScript fixtures)' do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:group) { create(:group, name: 'frontend-fixtures-group' )}
+  let(:project) { create(:project_empty_repo, namespace: group, path: 'labels-project') }
+
+  let!(:project_label_bug) { create(:label, project: project, title: 'bug', color: '#FF0000') }
+  let!(:project_label_enhancement) { create(:label, project: project, title: 'enhancement', color: '#00FF00') }
+  let!(:project_label_feature) { create(:label, project: project, title: 'feature', color: '#0000FF') }
+
+  let!(:group_label_roses) { create(:group_label, group: group, title: 'roses', color: '#FF0000') }
+  let!(:groub_label_space) { create(:group_label, group: group, title: 'some space', color: '#FFFFFF') }
+  let!(:groub_label_violets) { create(:group_label, group: group, title: 'violets', color: '#0000FF') }
+
+  before(:all) do
+    clean_frontend_fixtures('labels/')
+  end
+
+  describe Groups::LabelsController, '(JavaScript fixtures)', type: :controller do
+    render_views
+
+    before(:each) do
+      sign_in(admin)
+    end
+
+    it 'labels/group_labels.json' do |example|
+      get :index,
+        group_id: group,
+        format: 'json'
+
+      expect(response).to be_success
+      store_frontend_fixture(response, example.description)
+    end
+  end
+
+  describe Projects::LabelsController, '(JavaScript fixtures)', type: :controller do
+    render_views
+
+    before(:each) do
+      sign_in(admin)
+    end
+
+    it 'labels/project_labels.json' do |example|
+      get :index,
+        namespace_id: group,
+        project_id: project,
+        format: 'json'
+
+      expect(response).to be_success
+      store_frontend_fixture(response, example.description)
+    end
+  end
+end
diff --git a/spec/javascripts/lib/utils/ajax_cache_spec.js b/spec/javascripts/lib/utils/ajax_cache_spec.js
new file mode 100644
index 00000000000..7b466a11b92
--- /dev/null
+++ b/spec/javascripts/lib/utils/ajax_cache_spec.js
@@ -0,0 +1,129 @@
+import AjaxCache from '~/lib/utils/ajax_cache';
+
+describe('AjaxCache', () => {
+  const dummyEndpoint = '/AjaxCache/dummyEndpoint';
+  const dummyResponse = {
+    important: 'dummy data',
+  };
+  let ajaxSpy = (url) => {
+    expect(url).toBe(dummyEndpoint);
+    const deferred = $.Deferred();
+    deferred.resolve(dummyResponse);
+    return deferred.promise();
+  };
+
+  beforeEach(() => {
+    AjaxCache.internalStorage = { };
+    spyOn(jQuery, 'ajax').and.callFake(url => ajaxSpy(url));
+  });
+
+  describe('#get', () => {
+    it('returns undefined if cache is empty', () => {
+      const data = AjaxCache.get(dummyEndpoint);
+
+      expect(data).toBe(undefined);
+    });
+
+    it('returns undefined if cache contains no matching data', () => {
+      AjaxCache.internalStorage['not matching'] = dummyResponse;
+
+      const data = AjaxCache.get(dummyEndpoint);
+
+      expect(data).toBe(undefined);
+    });
+
+    it('returns matching data', () => {
+      AjaxCache.internalStorage[dummyEndpoint] = dummyResponse;
+
+      const data = AjaxCache.get(dummyEndpoint);
+
+      expect(data).toBe(dummyResponse);
+    });
+  });
+
+  describe('#hasData', () => {
+    it('returns false if cache is empty', () => {
+      expect(AjaxCache.hasData(dummyEndpoint)).toBe(false);
+    });
+
+    it('returns false if cache contains no matching data', () => {
+      AjaxCache.internalStorage['not matching'] = dummyResponse;
+
+      expect(AjaxCache.hasData(dummyEndpoint)).toBe(false);
+    });
+
+    it('returns true if data is available', () => {
+      AjaxCache.internalStorage[dummyEndpoint] = dummyResponse;
+
+      expect(AjaxCache.hasData(dummyEndpoint)).toBe(true);
+    });
+  });
+
+  describe('#purge', () => {
+    it('does nothing if cache is empty', () => {
+      AjaxCache.purge(dummyEndpoint);
+
+      expect(AjaxCache.internalStorage).toEqual({ });
+    });
+
+    it('does nothing if cache contains no matching data', () => {
+      AjaxCache.internalStorage['not matching'] = dummyResponse;
+
+      AjaxCache.purge(dummyEndpoint);
+
+      expect(AjaxCache.internalStorage['not matching']).toBe(dummyResponse);
+    });
+
+    it('removes matching data', () => {
+      AjaxCache.internalStorage[dummyEndpoint] = dummyResponse;
+
+      AjaxCache.purge(dummyEndpoint);
+
+      expect(AjaxCache.internalStorage).toEqual({ });
+    });
+  });
+
+  describe('#retrieve', () => {
+    it('stores and returns data from Ajax call if cache is empty', (done) => {
+      AjaxCache.retrieve(dummyEndpoint)
+      .then((data) => {
+        expect(data).toBe(dummyResponse);
+        expect(AjaxCache.internalStorage[dummyEndpoint]).toBe(dummyResponse);
+      })
+      .then(done)
+      .catch(fail);
+    });
+
+    it('returns undefined if Ajax call fails and cache is empty', (done) => {
+      const dummyStatusText = 'exploded';
+      const dummyErrorMessage = 'server exploded';
+      ajaxSpy = (url) => {
+        expect(url).toBe(dummyEndpoint);
+        const deferred = $.Deferred();
+        deferred.reject(null, dummyStatusText, dummyErrorMessage);
+        return deferred.promise();
+      };
+
+      AjaxCache.retrieve(dummyEndpoint)
+      .then(data => fail(`Received unexpected data: ${JSON.stringify(data)}`))
+      .catch((error) => {
+        expect(error.message).toBe(`${dummyEndpoint}: ${dummyErrorMessage}`);
+        expect(error.textStatus).toBe(dummyStatusText);
+        done();
+      })
+      .catch(fail);
+    });
+
+    it('makes no Ajax call if matching data exists', (done) => {
+      AjaxCache.internalStorage[dummyEndpoint] = dummyResponse;
+      ajaxSpy = () => fail(new Error('expected no Ajax call!'));
+
+      AjaxCache.retrieve(dummyEndpoint)
+      .then((data) => {
+        expect(data).toBe(dummyResponse);
+      })
+      .then(done)
+      .catch(fail);
+    });
+  });
+});