Merge branch '27262-issue-recent-searches' into 'master'

Recent search history for issues

Closes #27262

See merge request !10324

15 files changed, 405 insertions, 18 deletions

diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index e168585534d..30ad169e30e 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -590,7 +590,7 @@ describe 'Issue Boards', feature: true, js: true do
   end
 
   def click_filter_link(link_text)
-    page.within('.filtered-search-input-container') do
+    page.within('.filtered-search-box') do
       expect(page).to have_button(link_text)
 
       click_button(link_text)
diff --git a/spec/features/boards/modal_filter_spec.rb b/spec/features/boards/modal_filter_spec.rb
index e2281a7da55..4a4c13e79c8 100644
--- a/spec/features/boards/modal_filter_spec.rb
+++ b/spec/features/boards/modal_filter_spec.rb
@@ -219,7 +219,7 @@ describe 'Issue Boards add issue modal filtering', :feature, :js do
   end
 
   def click_filter_link(link_text)
-    page.within('.add-issues-modal .filtered-search-input-container') do
+    page.within('.add-issues-modal .filtered-search-box') do
       expect(page).to have_button(link_text)
 
       click_button(link_text)
diff --git a/spec/features/issues/filtered_search/dropdown_assignee_spec.rb b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
index 4dcc56a97d1..3d1a9ed1722 100644
--- a/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
@@ -194,7 +194,7 @@ describe 'Dropdown assignee', :feature, :js do
 
       new_user = create(:user)
       project.team << [new_user, :master]
-      find('.filtered-search-input-container .clear-search').click
+      find('.filtered-search-box .clear-search').click
       filtered_search.set('assignee')
       filtered_search.send_keys(':')
 
diff --git a/spec/features/issues/filtered_search/dropdown_author_spec.rb b/spec/features/issues/filtered_search/dropdown_author_spec.rb
index 1772a120045..990e3b3e60c 100644
--- a/spec/features/issues/filtered_search/dropdown_author_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_author_spec.rb
@@ -172,7 +172,7 @@ describe 'Dropdown author', js: true, feature: true do
 
       new_user = create(:user)
       project.team << [new_user, :master]
-      find('.filtered-search-input-container .clear-search').click
+      find('.filtered-search-box .clear-search').click
       filtered_search.set('author')
       send_keys_to_filtered_search(':')
 
diff --git a/spec/features/issues/filtered_search/dropdown_label_spec.rb b/spec/features/issues/filtered_search/dropdown_label_spec.rb
index b192064b693..c8645e08c4b 100644
--- a/spec/features/issues/filtered_search/dropdown_label_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_label_spec.rb
@@ -33,7 +33,7 @@ describe 'Dropdown label', js: true, feature: true do
   end
 
   def clear_search_field
-    find('.filtered-search-input-container .clear-search').click
+    find('.filtered-search-box .clear-search').click
   end
 
   before do
diff --git a/spec/features/issues/filtered_search/dropdown_milestone_spec.rb b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
index ce96a420699..0a525bc68c9 100644
--- a/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
+++ b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
@@ -252,7 +252,7 @@ describe 'Dropdown milestone', :feature, :js do
       expect(initial_size).to be > 0
 
       create(:milestone, project: project)
-      find('.filtered-search-input-container .clear-search').click
+      find('.filtered-search-box .clear-search').click
       filtered_search.set('milestone:')
 
       expect(dropdown_milestone_size).to eq(initial_size)
diff --git a/spec/features/issues/filtered_search/filter_issues_spec.rb b/spec/features/issues/filtered_search/filter_issues_spec.rb
index 2f880c926e7..6f00066de4d 100644
--- a/spec/features/issues/filtered_search/filter_issues_spec.rb
+++ b/spec/features/issues/filtered_search/filter_issues_spec.rb
@@ -758,10 +758,10 @@ describe 'Filter issues', js: true, feature: true do
 
         expect_issues_list_count(2)
 
-        sort_toggle = find('.filtered-search-container .dropdown-toggle')
+        sort_toggle = find('.filtered-search-wrapper .dropdown-toggle')
         sort_toggle.click
 
-        find('.filtered-search-container .dropdown-menu li a', text: 'Oldest updated').click
+        find('.filtered-search-wrapper .dropdown-menu li a', text: 'Oldest updated').click
         wait_for_ajax
 
         expect(find('.issues-list .issue:first-of-type .issue-title-text a')).to have_content(old_issue.title)
diff --git a/spec/features/issues/filtered_search/recent_searches_spec.rb b/spec/features/issues/filtered_search/recent_searches_spec.rb
new file mode 100644
index 00000000000..f506065a242
--- /dev/null
+++ b/spec/features/issues/filtered_search/recent_searches_spec.rb
@@ -0,0 +1,92 @@
+require 'spec_helper'
+
+describe 'Recent searches', js: true, feature: true do
+  include FilteredSearchHelpers
+  include WaitForAjax
+
+  let!(:group) { create(:group) }
+  let!(:project) { create(:project, group: group) }
+  let!(:user) { create(:user) }
+
+  before do
+    Capybara.ignore_hidden_elements = false
+    project.add_master(user)
+    group.add_developer(user)
+    create(:issue, project: project)
+    login_as(user)
+
+    remove_recent_searches
+  end
+
+  after do
+    Capybara.ignore_hidden_elements = true
+  end
+
+  it 'searching adds to recent searches' do
+    visit namespace_project_issues_path(project.namespace, project)
+
+    input_filtered_search('foo', submit: true)
+    input_filtered_search('bar', submit: true)
+
+    items = all('.filtered-search-history-dropdown-item', visible: false)
+
+    expect(items.count).to eq(2)
+    expect(items[0].text).to eq('bar')
+    expect(items[1].text).to eq('foo')
+  end
+
+  it 'visiting URL with search params adds to recent searches' do
+    visit namespace_project_issues_path(project.namespace, project, label_name: 'foo', search: 'bar')
+    visit namespace_project_issues_path(project.namespace, project, label_name: 'qux', search: 'garply')
+
+    items = all('.filtered-search-history-dropdown-item', visible: false)
+
+    expect(items.count).to eq(2)
+    expect(items[0].text).to eq('label:~qux garply')
+    expect(items[1].text).to eq('label:~foo bar')
+  end
+
+  it 'saved recent searches are restored last on the list' do
+    set_recent_searches('["saved1", "saved2"]')
+
+    visit namespace_project_issues_path(project.namespace, project, search: 'foo')
+
+    items = all('.filtered-search-history-dropdown-item', visible: false)
+
+    expect(items.count).to eq(3)
+    expect(items[0].text).to eq('foo')
+    expect(items[1].text).to eq('saved1')
+    expect(items[2].text).to eq('saved2')
+  end
+
+  it 'clicking item fills search input' do
+    set_recent_searches('["foo", "bar"]')
+    visit namespace_project_issues_path(project.namespace, project)
+
+    all('.filtered-search-history-dropdown-item', visible: false)[0].trigger('click')
+    wait_for_filtered_search('foo')
+
+    expect(find('.filtered-search').value.strip).to eq('foo')
+  end
+
+  it 'clear recent searches button, clears recent searches' do
+    set_recent_searches('["foo"]')
+    visit namespace_project_issues_path(project.namespace, project)
+
+    items_before = all('.filtered-search-history-dropdown-item', visible: false)
+
+    expect(items_before.count).to eq(1)
+
+    find('.filtered-search-history-clear-button', visible: false).trigger('click')
+    items_after = all('.filtered-search-history-dropdown-item', visible: false)
+
+    expect(items_after.count).to eq(0)
+  end
+
+  it 'shows flash error when failed to parse saved history' do
+    set_recent_searches('fail')
+    visit namespace_project_issues_path(project.namespace, project)
+
+    expect(find('.flash-alert')).to have_text('An error occured while parsing recent searches')
+  end
+end
diff --git a/spec/features/issues/filtered_search/search_bar_spec.rb b/spec/features/issues/filtered_search/search_bar_spec.rb
index 59244d65eec..48e7af67616 100644
--- a/spec/features/issues/filtered_search/search_bar_spec.rb
+++ b/spec/features/issues/filtered_search/search_bar_spec.rb
@@ -44,7 +44,7 @@ describe 'Search bar', js: true, feature: true do
       filtered_search.set(search_text)
 
       expect(filtered_search.value).to eq(search_text)
-      find('.filtered-search-input-container .clear-search').click
+      find('.filtered-search-box .clear-search').click
 
       expect(filtered_search.value).to eq('')
     end
@@ -55,7 +55,7 @@ describe 'Search bar', js: true, feature: true do
 
     it 'hides after clicked' do
       filtered_search.set('a')
-      find('.filtered-search-input-container .clear-search').click
+      find('.filtered-search-box .clear-search').click
 
       expect(page).to have_css('.clear-search', visible: false)
     end
@@ -81,7 +81,7 @@ describe 'Search bar', js: true, feature: true do
 
       expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(1)
 
-      find('.filtered-search-input-container .clear-search').click
+      find('.filtered-search-box .clear-search').click
       filtered_search.click
 
       expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(original_size)
@@ -96,7 +96,7 @@ describe 'Search bar', js: true, feature: true do
 
       expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(0)
 
-      find('.filtered-search-input-container .clear-search').click
+      find('.filtered-search-box .clear-search').click
       filtered_search.click
 
       expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to be > 0
diff --git a/spec/features/merge_requests/reset_filters_spec.rb b/spec/features/merge_requests/reset_filters_spec.rb
index 14511707af4..df5943f9136 100644
--- a/spec/features/merge_requests/reset_filters_spec.rb
+++ b/spec/features/merge_requests/reset_filters_spec.rb
@@ -14,7 +14,7 @@ feature 'Merge requests filter clear button', feature: true, js: true do
   let!(:mr2) { create(:merge_request, title: "Bugfix1", source_project: project, target_project: project, source_branch: "Bugfix1") }
 
   let(:merge_request_css) { '.merge-request' }
-  let(:clear_search_css) { '.filtered-search-input-container .clear-search' }
+  let(:clear_search_css) { '.filtered-search-box .clear-search' }
 
   before do
     mr2.labels << bug
diff --git a/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js b/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js
new file mode 100644
index 00000000000..2722882375f
--- /dev/null
+++ b/spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js
@@ -0,0 +1,166 @@
+import Vue from 'vue';
+import eventHub from '~/filtered_search/event_hub';
+import RecentSearchesDropdownContent from '~/filtered_search/components/recent_searches_dropdown_content';
+
+const createComponent = (propsData) => {
+  const Component = Vue.extend(RecentSearchesDropdownContent);
+
+  return new Component({
+    el: document.createElement('div'),
+    propsData,
+  });
+};
+
+// Remove all the newlines and whitespace from the formatted markup
+const trimMarkupWhitespace = text => text.replace(/(\n|\s)+/gm, ' ').trim();
+
+describe('RecentSearchesDropdownContent', () => {
+  const propsDataWithoutItems = {
+    items: [],
+  };
+  const propsDataWithItems = {
+    items: [
+      'foo',
+      'author:@root label:~foo bar',
+    ],
+  };
+
+  let vm;
+  afterEach(() => {
+    if (vm) {
+      vm.$destroy();
+    }
+  });
+
+  describe('with no items', () => {
+    let el;
+
+    beforeEach(() => {
+      vm = createComponent(propsDataWithoutItems);
+      el = vm.$el;
+    });
+
+    it('should render empty state', () => {
+      expect(el.querySelector('.dropdown-info-note')).toBeDefined();
+
+      const items = el.querySelectorAll('.filtered-search-history-dropdown-item');
+      expect(items.length).toEqual(propsDataWithoutItems.items.length);
+    });
+  });
+
+  describe('with items', () => {
+    let el;
+
+    beforeEach(() => {
+      vm = createComponent(propsDataWithItems);
+      el = vm.$el;
+    });
+
+    it('should render clear recent searches button', () => {
+      expect(el.querySelector('.filtered-search-history-clear-button')).toBeDefined();
+    });
+
+    it('should render recent search items', () => {
+      const items = el.querySelectorAll('.filtered-search-history-dropdown-item');
+      expect(items.length).toEqual(propsDataWithItems.items.length);
+
+      expect(trimMarkupWhitespace(items[0].querySelector('.filtered-search-history-dropdown-search-token').textContent)).toEqual('foo');
+
+      const item1Tokens = items[1].querySelectorAll('.filtered-search-history-dropdown-token');
+      expect(item1Tokens.length).toEqual(2);
+      expect(item1Tokens[0].querySelector('.name').textContent).toEqual('author:');
+      expect(item1Tokens[0].querySelector('.value').textContent).toEqual('@root');
+      expect(item1Tokens[1].querySelector('.name').textContent).toEqual('label:');
+      expect(item1Tokens[1].querySelector('.value').textContent).toEqual('~foo');
+      expect(trimMarkupWhitespace(items[1].querySelector('.filtered-search-history-dropdown-search-token').textContent)).toEqual('bar');
+    });
+  });
+
+  describe('computed', () => {
+    describe('processedItems', () => {
+      it('with items', () => {
+        vm = createComponent(propsDataWithItems);
+        const processedItems = vm.processedItems;
+
+        expect(processedItems.length).toEqual(2);
+
+        expect(processedItems[0].text).toEqual(propsDataWithItems.items[0]);
+        expect(processedItems[0].tokens).toEqual([]);
+        expect(processedItems[0].searchToken).toEqual('foo');
+
+        expect(processedItems[1].text).toEqual(propsDataWithItems.items[1]);
+        expect(processedItems[1].tokens.length).toEqual(2);
+        expect(processedItems[1].tokens[0].prefix).toEqual('author:');
+        expect(processedItems[1].tokens[0].suffix).toEqual('@root');
+        expect(processedItems[1].tokens[1].prefix).toEqual('label:');
+        expect(processedItems[1].tokens[1].suffix).toEqual('~foo');
+        expect(processedItems[1].searchToken).toEqual('bar');
+      });
+
+      it('with no items', () => {
+        vm = createComponent(propsDataWithoutItems);
+        const processedItems = vm.processedItems;
+
+        expect(processedItems.length).toEqual(0);
+      });
+    });
+
+    describe('hasItems', () => {
+      it('with items', () => {
+        vm = createComponent(propsDataWithItems);
+        const hasItems = vm.hasItems;
+        expect(hasItems).toEqual(true);
+      });
+
+      it('with no items', () => {
+        vm = createComponent(propsDataWithoutItems);
+        const hasItems = vm.hasItems;
+        expect(hasItems).toEqual(false);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('onItemActivated', () => {
+      let onRecentSearchesItemSelectedSpy;
+
+      beforeEach(() => {
+        onRecentSearchesItemSelectedSpy = jasmine.createSpy('spy');
+        eventHub.$on('recentSearchesItemSelected', onRecentSearchesItemSelectedSpy);
+
+        vm = createComponent(propsDataWithItems);
+      });
+
+      afterEach(() => {
+        eventHub.$off('recentSearchesItemSelected', onRecentSearchesItemSelectedSpy);
+      });
+
+      it('emits event', () => {
+        expect(onRecentSearchesItemSelectedSpy).not.toHaveBeenCalled();
+        vm.onItemActivated('something');
+        expect(onRecentSearchesItemSelectedSpy).toHaveBeenCalledWith('something');
+      });
+    });
+
+    describe('onRequestClearRecentSearches', () => {
+      let onRequestClearRecentSearchesSpy;
+
+      beforeEach(() => {
+        onRequestClearRecentSearchesSpy = jasmine.createSpy('spy');
+        eventHub.$on('requestClearRecentSearches', onRequestClearRecentSearchesSpy);
+
+        vm = createComponent(propsDataWithItems);
+      });
+
+      afterEach(() => {
+        eventHub.$off('requestClearRecentSearches', onRequestClearRecentSearchesSpy);
+      });
+
+      it('emits event', () => {
+        expect(onRequestClearRecentSearchesSpy).not.toHaveBeenCalled();
+        vm.onRequestClearRecentSearches({ stopPropagation: () => {} });
+        expect(onRequestClearRecentSearchesSpy).toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 5f7c05e9014..97af681429b 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -29,7 +29,7 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper
 
     beforeEach(() => {
       setFixtures(`
-        <div class="filtered-search-input-container">
+        <div class="filtered-search-box">
           <form>
             <ul class="tokens-container list-unstyled">
               ${FilteredSearchSpecHelper.createInputHTML(placeholder)}
@@ -264,12 +264,12 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper
     describe('toggleInputContainerFocus', () => {
       it('toggles on focus', () => {
         input.focus();
-        expect(document.querySelector('.filtered-search-input-container').classList.contains('focus')).toEqual(true);
+        expect(document.querySelector('.filtered-search-box').classList.contains('focus')).toEqual(true);
       });
 
       it('toggles on blur', () => {
         input.blur();
-        expect(document.querySelector('.filtered-search-input-container').classList.contains('focus')).toEqual(false);
+        expect(document.querySelector('.filtered-search-box').classList.contains('focus')).toEqual(false);
       });
     });
   });
diff --git a/spec/javascripts/filtered_search/services/recent_searches_service_spec.js b/spec/javascripts/filtered_search/services/recent_searches_service_spec.js
new file mode 100644
index 00000000000..2a58fb3a7df
--- /dev/null
+++ b/spec/javascripts/filtered_search/services/recent_searches_service_spec.js
@@ -0,0 +1,56 @@
+import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
+
+describe('RecentSearchesService', () => {
+  let service;
+
+  beforeEach(() => {
+    service = new RecentSearchesService();
+    window.localStorage.removeItem(service.localStorageKey);
+  });
+
+  describe('fetch', () => {
+    it('should default to empty array', (done) => {
+      const fetchItemsPromise = service.fetch();
+
+      fetchItemsPromise
+        .then((items) => {
+          expect(items).toEqual([]);
+          done();
+        })
+        .catch((err) => {
+          done.fail('Shouldn\'t reject with empty localStorage key', err);
+        });
+    });
+
+    it('should reject when unable to parse', (done) => {
+      window.localStorage.setItem(service.localStorageKey, 'fail');
+      const fetchItemsPromise = service.fetch();
+
+      fetchItemsPromise
+        .catch(() => {
+          done();
+        });
+    });
+
+    it('should return items from localStorage', (done) => {
+      window.localStorage.setItem(service.localStorageKey, '["foo", "bar"]');
+      const fetchItemsPromise = service.fetch();
+
+      fetchItemsPromise
+        .then((items) => {
+          expect(items).toEqual(['foo', 'bar']);
+          done();
+        });
+    });
+  });
+
+  describe('setRecentSearches', () => {
+    it('should save things in localStorage', () => {
+      const items = ['foo', 'bar'];
+      service.save(items);
+      const newLocalStorageValue =
+        window.localStorage.getItem(service.localStorageKey);
+      expect(JSON.parse(newLocalStorageValue)).toEqual(items);
+    });
+  });
+});
diff --git a/spec/javascripts/filtered_search/stores/recent_searches_store_spec.js b/spec/javascripts/filtered_search/stores/recent_searches_store_spec.js
new file mode 100644
index 00000000000..1eebc6f2367
--- /dev/null
+++ b/spec/javascripts/filtered_search/stores/recent_searches_store_spec.js
@@ -0,0 +1,59 @@
+import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
+
+describe('RecentSearchesStore', () => {
+  let store;
+
+  beforeEach(() => {
+    store = new RecentSearchesStore();
+  });
+
+  describe('addRecentSearch', () => {
+    it('should add to the front of the list', () => {
+      store.addRecentSearch('foo');
+      store.addRecentSearch('bar');
+
+      expect(store.state.recentSearches).toEqual(['bar', 'foo']);
+    });
+
+    it('should deduplicate', () => {
+      store.addRecentSearch('foo');
+      store.addRecentSearch('bar');
+      store.addRecentSearch('foo');
+
+      expect(store.state.recentSearches).toEqual(['foo', 'bar']);
+    });
+
+    it('only keeps track of 5 items', () => {
+      store.addRecentSearch('1');
+      store.addRecentSearch('2');
+      store.addRecentSearch('3');
+      store.addRecentSearch('4');
+      store.addRecentSearch('5');
+      store.addRecentSearch('6');
+      store.addRecentSearch('7');
+
+      expect(store.state.recentSearches).toEqual(['7', '6', '5', '4', '3']);
+    });
+  });
+
+  describe('setRecentSearches', () => {
+    it('should override list', () => {
+      store.setRecentSearches([
+        'foo',
+        'bar',
+      ]);
+      store.setRecentSearches([
+        'baz',
+        'qux',
+      ]);
+
+      expect(store.state.recentSearches).toEqual(['baz', 'qux']);
+    });
+
+    it('only keeps track of 5 items', () => {
+      store.setRecentSearches(['1', '2', '3', '4', '5', '6', '7']);
+
+      expect(store.state.recentSearches).toEqual(['1', '2', '3', '4', '5']);
+    });
+  });
+});
diff --git a/spec/support/filtered_search_helpers.rb b/spec/support/filtered_search_helpers.rb
index 6b009b132b6..36be0bb6bf8 100644
--- a/spec/support/filtered_search_helpers.rb
+++ b/spec/support/filtered_search_helpers.rb
@@ -30,7 +30,7 @@ module FilteredSearchHelpers
   end
 
   def clear_search_field
-    find('.filtered-search-input-container .clear-search').click
+    find('.filtered-search-box .clear-search').click
   end
 
   def reset_filters
@@ -51,7 +51,7 @@ module FilteredSearchHelpers
   # Iterates through each visual token inside
   # .tokens-container to make sure the correct names and values are rendered
   def expect_tokens(tokens)
-    page.find '.filtered-search-input-container .tokens-container' do
+    page.find '.filtered-search-box .tokens-container' do
       page.all(:css, '.tokens-container li').each_with_index do |el, index|
         token_name = tokens[index][:name]
         token_value = tokens[index][:value]
@@ -71,4 +71,18 @@ module FilteredSearchHelpers
   def get_filtered_search_placeholder
     find('.filtered-search')['placeholder']
   end
+
+  def remove_recent_searches
+    execute_script('window.localStorage.removeItem(\'issue-recent-searches\');')
+  end
+
+  def set_recent_searches(input)
+    execute_script("window.localStorage.setItem('issue-recent-searches', '#{input}');")
+  end
+
+  def wait_for_filtered_search(text)
+    Timeout.timeout(Capybara.default_max_wait_time) do
+      loop until find('.filtered-search').value.strip == text
+    end
+  end
 end