Merge branch 'search-bar-first-iteration' into 'master'

Search bar first iteration

Closes #21747

See merge request !7345

20 files changed, 2363 insertions, 284 deletions

diff --git a/spec/features/issues/filter_by_milestone_spec.rb b/spec/features/issues/filter_by_milestone_spec.rb
deleted file mode 100644
index 9dfa5d1de19..00000000000
--- a/spec/features/issues/filter_by_milestone_spec.rb
+++ /dev/null
@@ -1,91 +0,0 @@
-require 'rails_helper'
-
-feature 'Issue filtering by Milestone', feature: true do
-  let(:project)   { create(:project, :public) }
-  let(:milestone) { create(:milestone, project: project) }
-
-  scenario 'filters by no Milestone', js: true do
-    create(:issue, project: project)
-    create(:issue, project: project, milestone: milestone)
-
-    visit_issues(project)
-    filter_by_milestone(Milestone::None.title)
-
-    expect(page).to have_css('.milestone-filter .dropdown-toggle-text', text: 'No Milestone')
-    expect(page).to have_css('.issue', count: 1)
-  end
-
-  context 'filters by upcoming milestone', js: true do
-    it 'does not show issues with no expiry' do
-      create(:issue, project: project)
-      create(:issue, project: project, milestone: milestone)
-
-      visit_issues(project)
-      filter_by_milestone(Milestone::Upcoming.title)
-
-      expect(page).to have_css('.milestone-filter .dropdown-toggle-text', text: 'Upcoming')
-      expect(page).to have_css('.issue', count: 0)
-    end
-
-    it 'shows issues in future' do
-      milestone = create(:milestone, project: project, due_date: Date.tomorrow)
-      create(:issue, project: project)
-      create(:issue, project: project, milestone: milestone)
-
-      visit_issues(project)
-      filter_by_milestone(Milestone::Upcoming.title)
-
-      expect(page).to have_css('.milestone-filter .dropdown-toggle-text', text: 'Upcoming')
-      expect(page).to have_css('.issue', count: 1)
-    end
-
-    it 'does not show issues in past' do
-      milestone = create(:milestone, project: project, due_date: Date.yesterday)
-      create(:issue, project: project)
-      create(:issue, project: project, milestone: milestone)
-
-      visit_issues(project)
-      filter_by_milestone(Milestone::Upcoming.title)
-
-      expect(page).to have_css('.milestone-filter .dropdown-toggle-text', text: 'Upcoming')
-      expect(page).to have_css('.issue', count: 0)
-    end
-  end
-
-  scenario 'filters by a specific Milestone', js: true do
-    create(:issue, project: project, milestone: milestone)
-    create(:issue, project: project)
-
-    visit_issues(project)
-    filter_by_milestone(milestone.title)
-
-    expect(page).to have_css('.milestone-filter .dropdown-toggle-text', text: milestone.title)
-    expect(page).to have_css('.issue', count: 1)
-  end
-
-  context 'when milestone has single quotes in title' do
-    background do
-      milestone.update(name: "rock 'n' roll")
-    end
-
-    scenario 'filters by a specific Milestone', js: true do
-      create(:issue, project: project, milestone: milestone)
-      create(:issue, project: project)
-
-      visit_issues(project)
-      filter_by_milestone(milestone.title)
-
-      expect(page).to have_css('.milestone-filter .dropdown-toggle-text', text: milestone.title)
-      expect(page).to have_css('.issue', count: 1)
-    end
-  end
-
-  def visit_issues(project)
-    visit namespace_project_issues_path(project.namespace, project)
-  end
-
-  def filter_by_milestone(title)
-    find(".js-milestone-select").click
-    find(".milestone-filter .dropdown-content a", text: title).click
-  end
-end
diff --git a/spec/features/issues/filtered_search/dropdown_assignee_spec.rb b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
new file mode 100644
index 00000000000..6f6a2532c04
--- /dev/null
+++ b/spec/features/issues/filtered_search/dropdown_assignee_spec.rb
@@ -0,0 +1,166 @@
+require 'rails_helper'
+
+describe 'Dropdown assignee', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user, name: 'administrator', username: 'root') }
+  let!(:user_john) { create(:user, name: 'John', username: 'th0mas') }
+  let!(:user_jacob) { create(:user, name: 'Jacob', username: 'otter32') }
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_assignee) { '#js-dropdown-assignee' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 5
+      wait_for_ajax
+    end
+  end
+
+  def dropdown_assignee_size
+    page.all('#js-dropdown-assignee .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_assignee(text)
+    find('#js-dropdown-assignee .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    project.team << [user_john, :master]
+    project.team << [user_jacob, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has assignee:' do
+      filtered_search.set('assignee:')
+
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('assignee:')
+
+      expect(page).to have_css('#js-dropdown-assignee .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('assignee:')
+
+      expect(page).not_to have_css('#js-dropdown-assignee .filter-dropdown-loading')
+    end
+
+    it 'should load all the assignees when opened' do
+      send_keys_to_filtered_search('assignee:')
+
+      expect(dropdown_assignee_size).to eq(3)
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      send_keys_to_filtered_search('assignee:')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search('j')
+
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search('J')
+
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by username with symbol' do
+      send_keys_to_filtered_search('@ot')
+
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by case insensitive username with symbol' do
+      send_keys_to_filtered_search('@OT')
+
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by username without symbol' do
+      send_keys_to_filtered_search('ot')
+
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by case insensitive username without symbol' do
+      send_keys_to_filtered_search('OT')
+
+      expect(dropdown_assignee_size).to eq(2)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('assignee:')
+    end
+
+    it 'fills in the assignee username when the assignee has not been filtered' do
+      click_assignee(user_jacob.name)
+
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+      expect(filtered_search.value).to eq("assignee:@#{user_jacob.username}")
+    end
+
+    it 'fills in the assignee username when the assignee has been filtered' do
+      send_keys_to_filtered_search('roo')
+      click_assignee(user.name)
+
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+      expect(filtered_search.value).to eq("assignee:@#{user.username}")
+    end
+
+    it 'selects `no assignee`' do
+      find('#js-dropdown-assignee .filter-dropdown-item', text: 'No Assignee').click
+
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+      expect(filtered_search.value).to eq("assignee:none")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens assignee dropdown with existing search term' do
+      filtered_search.set('searchTerm assignee:')
+
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'opens assignee dropdown with existing author' do
+      filtered_search.set('author:@user assignee:')
+
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'opens assignee dropdown with existing label' do
+      filtered_search.set('label:~bug assignee:')
+
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'opens assignee dropdown with existing milestone' do
+      filtered_search.set('milestone:%v1.0 assignee:')
+
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+  end
+end
diff --git a/spec/features/issues/filtered_search/dropdown_author_spec.rb b/spec/features/issues/filtered_search/dropdown_author_spec.rb
new file mode 100644
index 00000000000..60a86cc93d4
--- /dev/null
+++ b/spec/features/issues/filtered_search/dropdown_author_spec.rb
@@ -0,0 +1,154 @@
+require 'rails_helper'
+
+describe 'Dropdown author', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user, name: 'administrator', username: 'root') }
+  let!(:user_john) { create(:user, name: 'John', username: 'th0mas') }
+  let!(:user_jacob) { create(:user, name: 'Jacob', username: 'otter32') }
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_author) { '#js-dropdown-author' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 5
+      wait_for_ajax
+    end
+  end
+
+  def dropdown_author_size
+    page.all('#js-dropdown-author .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_author(text)
+    find('#js-dropdown-author .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    project.team << [user_john, :master]
+    project.team << [user_jacob, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has author:' do
+      filtered_search.set('author:')
+
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+
+      expect(page).to have_css(js_dropdown_author, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('author:')
+
+      expect(page).to have_css('#js-dropdown-author .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('author:')
+
+      expect(page).not_to have_css('#js-dropdown-author .filter-dropdown-loading')
+    end
+
+    it 'should load all the authors when opened' do
+      send_keys_to_filtered_search('author:')
+
+      expect(dropdown_author_size).to eq(3)
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      filtered_search.set('author')
+      send_keys_to_filtered_search(':')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search('ja')
+
+      expect(dropdown_author_size).to eq(1)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search('Ja')
+
+      expect(dropdown_author_size).to eq(1)
+    end
+
+    it 'filters by username with symbol' do
+      send_keys_to_filtered_search('@ot')
+
+      expect(dropdown_author_size).to eq(2)
+    end
+
+    it 'filters by username without symbol' do
+      send_keys_to_filtered_search('ot')
+
+      expect(dropdown_author_size).to eq(2)
+    end
+
+    it 'filters by case insensitive username without symbol' do
+      send_keys_to_filtered_search('OT')
+
+      expect(dropdown_author_size).to eq(2)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('author')
+      send_keys_to_filtered_search(':')
+    end
+
+    it 'fills in the author username when the author has not been filtered' do
+      click_author(user_jacob.name)
+
+      expect(page).to have_css(js_dropdown_author, visible: false)
+      expect(filtered_search.value).to eq("author:@#{user_jacob.username}")
+    end
+
+    it 'fills in the author username when the author has been filtered' do
+      click_author(user.name)
+
+      expect(page).to have_css(js_dropdown_author, visible: false)
+      expect(filtered_search.value).to eq("author:@#{user.username}")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens author dropdown with existing search term' do
+      filtered_search.set('searchTerm author:')
+
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'opens author dropdown with existing assignee' do
+      filtered_search.set('assignee:@user author:')
+
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'opens author dropdown with existing label' do
+      filtered_search.set('label:~bug author:')
+
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'opens author dropdown with existing milestone' do
+      filtered_search.set('milestone:%v1.0 author:')
+
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+  end
+end
diff --git a/spec/features/issues/filtered_search/dropdown_hint_spec.rb b/spec/features/issues/filtered_search/dropdown_hint_spec.rb
new file mode 100644
index 00000000000..04dd54ab459
--- /dev/null
+++ b/spec/features/issues/filtered_search/dropdown_hint_spec.rb
@@ -0,0 +1,134 @@
+require 'rails_helper'
+
+describe 'Dropdown hint', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user) }
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_hint) { '#js-dropdown-hint' }
+
+  def dropdown_hint_size
+    page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_hint(text)
+    find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    before do
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      filtered_search.click
+    end
+
+    it 'opens when the search bar is first focused' do
+      expect(page).to have_css(js_dropdown_hint, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+    end
+  end
+
+  describe 'filtering' do
+    it 'does not filter `Keep typing and press Enter`' do
+      filtered_search.set('randomtext')
+
+      expect(page).to have_css(js_dropdown_hint, text: 'Keep typing and press Enter', visible: false)
+      expect(dropdown_hint_size).to eq(0)
+    end
+
+    it 'filters with text' do
+      filtered_search.set('a')
+
+      expect(dropdown_hint_size).to eq(3)
+    end
+  end
+
+  describe 'selecting from dropdown with no input' do
+    before do
+      filtered_search.click
+    end
+
+    it 'opens the author dropdown when you click on author' do
+      click_hint('author')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-author', visible: true)
+      expect(filtered_search.value).to eq('author:')
+    end
+
+    it 'opens the assignee dropdown when you click on assignee' do
+      click_hint('assignee')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-assignee', visible: true)
+      expect(filtered_search.value).to eq('assignee:')
+    end
+
+    it 'opens the milestone dropdown when you click on milestone' do
+      click_hint('milestone')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-milestone', visible: true)
+      expect(filtered_search.value).to eq('milestone:')
+    end
+
+    it 'opens the label dropdown when you click on label' do
+      click_hint('label')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-label', visible: true)
+      expect(filtered_search.value).to eq('label:')
+    end
+  end
+
+  describe 'selecting from dropdown with some input' do
+    it 'opens the author dropdown when you click on author' do
+      filtered_search.set('auth')
+      click_hint('author')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-author', visible: true)
+      expect(filtered_search.value).to eq('author:')
+    end
+
+    it 'opens the assignee dropdown when you click on assignee' do
+      filtered_search.set('assign')
+      click_hint('assignee')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-assignee', visible: true)
+      expect(filtered_search.value).to eq('assignee:')
+    end
+
+    it 'opens the milestone dropdown when you click on milestone' do
+      filtered_search.set('mile')
+      click_hint('milestone')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-milestone', visible: true)
+      expect(filtered_search.value).to eq('milestone:')
+    end
+
+    it 'opens the label dropdown when you click on label' do
+      filtered_search.set('lab')
+      click_hint('label')
+
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      expect(page).to have_css('#js-dropdown-label', visible: true)
+      expect(filtered_search.value).to eq('label:')
+    end
+  end
+end
diff --git a/spec/features/issues/filtered_search/dropdown_label_spec.rb b/spec/features/issues/filtered_search/dropdown_label_spec.rb
new file mode 100644
index 00000000000..89c144141c9
--- /dev/null
+++ b/spec/features/issues/filtered_search/dropdown_label_spec.rb
@@ -0,0 +1,242 @@
+require 'rails_helper'
+
+describe 'Dropdown label', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user) }
+  let!(:bug_label) { create(:label, project: project, title: 'bug') }
+  let!(:uppercase_label) { create(:label, project: project, title: 'BUG') }
+  let!(:two_words_label) { create(:label, project: project, title: 'High Priority') }
+  let!(:wont_fix_label) { create(:label, project: project, title: 'Won"t Fix') }
+  let!(:wont_fix_single_label) { create(:label, project: project, title: 'Won\'t Fix') }
+  let!(:special_label) { create(:label, project: project, title: '!@#$%^+&*()')}
+  let!(:long_label) { create(:label, project: project, title: 'this is a very long title this is a very long title this is a very long title this is a very long title this is a very long title')}
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_label) { '#js-dropdown-label' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 3
+      wait_for_ajax
+      sleep 3
+    end
+  end
+
+  def dropdown_label_size
+    page.all('#js-dropdown-label .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_label(text)
+    find('#js-dropdown-label .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has label:' do
+      filtered_search.set('label:')
+
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('label:')
+
+      expect(page).to have_css('#js-dropdown-label .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('label:')
+
+      expect(page).not_to have_css('#js-dropdown-label .filter-dropdown-loading')
+    end
+
+    it 'should load all the labels when opened' do
+      send_keys_to_filtered_search('label:')
+
+      expect(dropdown_label_size).to be > 0
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      filtered_search.set('label')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search(':b')
+
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search(':B')
+
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by name with symbol' do
+      send_keys_to_filtered_search(':~bu')
+
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by case insensitive name with symbol' do
+      send_keys_to_filtered_search(':~BU')
+
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by multiple words' do
+      send_keys_to_filtered_search(':Hig')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple words with symbol' do
+      send_keys_to_filtered_search(':~Hig')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple words containing single quotes' do
+      send_keys_to_filtered_search(':won\'t')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple words containing single quotes with symbol' do
+      send_keys_to_filtered_search(':~won\'t')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple words containing double quotes' do
+      send_keys_to_filtered_search(':won"t')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple words containing double quotes with symbol' do
+      send_keys_to_filtered_search(':~won"t')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by special characters' do
+      send_keys_to_filtered_search(':^+')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by special characters with symbol' do
+      send_keys_to_filtered_search(':~^+')
+
+      expect(dropdown_label_size).to eq(1)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('label:')
+    end
+
+    it 'fills in the label name when the label has not been filled' do
+      click_label(bug_label.title)
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{bug_label.title}")
+    end
+
+    it 'fills in the label name when the label is partially filled' do
+      send_keys_to_filtered_search('bu')
+      click_label(bug_label.title)
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{bug_label.title}")
+    end
+
+    it 'fills in the label name that contains multiple words' do
+      click_label(two_words_label.title)
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~\"#{two_words_label.title}\"")
+    end
+
+    it 'fills in the label name that contains multiple words and is very long' do
+      click_label(long_label.title)
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~\"#{long_label.title}\"")
+    end
+
+    it 'fills in the label name that contains double quotes' do
+      click_label(wont_fix_label.title)
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~'#{wont_fix_label.title}'")
+    end
+
+    it 'fills in the label name with the correct capitalization' do
+      click_label(uppercase_label.title)
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{uppercase_label.title}")
+    end
+
+    it 'fills in the label name with special characters' do
+      click_label(special_label.title)
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{special_label.title}")
+    end
+
+    it 'selects `no label`' do
+      find('#js-dropdown-label .filter-dropdown-item', text: 'No Label').click
+
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:none")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens label dropdown with existing search term' do
+      filtered_search.set('searchTerm label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing author' do
+      filtered_search.set('author:@person label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing assignee' do
+      filtered_search.set('assignee:@person label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing label' do
+      filtered_search.set('label:~urgent label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing milestone' do
+      filtered_search.set('milestone:%v2.0 label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+  end
+end
diff --git a/spec/features/issues/filtered_search/dropdown_milestone_spec.rb b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
new file mode 100644
index 00000000000..e5a271b663f
--- /dev/null
+++ b/spec/features/issues/filtered_search/dropdown_milestone_spec.rb
@@ -0,0 +1,222 @@
+require 'rails_helper'
+
+describe 'Dropdown milestone', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user) }
+  let!(:milestone) { create(:milestone, title: 'v1.0', project: project) }
+  let!(:uppercase_milestone) { create(:milestone, title: 'CAP_MILESTONE', project: project) }
+  let!(:two_words_milestone) { create(:milestone, title: 'Future Plan', project: project) }
+  let!(:wont_fix_milestone) { create(:milestone, title: 'Won"t Fix', project: project) }
+  let!(:special_milestone) { create(:milestone, title: '!@#$%^&*(+)', project: project) }
+  let!(:long_milestone) { create(:milestone, title: 'this is a very long title this is a very long title this is a very long title this is a very long title this is a very long title', project: project) }
+
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_milestone) { '#js-dropdown-milestone' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 3
+      wait_for_ajax
+      sleep 3
+    end
+  end
+
+  def dropdown_milestone_size
+    page.all('#js-dropdown-milestone .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_milestone(text)
+    find('#js-dropdown-milestone .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  def click_static_milestone(text)
+    find('#js-dropdown-milestone .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has milestone:' do
+      filtered_search.set('milestone:')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('milestone:')
+
+      expect(page).to have_css('#js-dropdown-milestone .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('milestone:')
+
+      expect(page).not_to have_css('#js-dropdown-milestone .filter-dropdown-loading')
+    end
+
+    it 'should load all the milestones when opened' do
+      send_keys_to_filtered_search('milestone:')
+
+      expect(dropdown_milestone_size).to be > 0
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      filtered_search.set('milestone')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search(':v1')
+
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search(':V1')
+
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by name with symbol' do
+      send_keys_to_filtered_search(':%v1')
+
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by case insensitive name with symbol' do
+      send_keys_to_filtered_search(':%V1')
+
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by special characters' do
+      send_keys_to_filtered_search(':(+')
+
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by special characters with symbol' do
+      send_keys_to_filtered_search(':%(+')
+
+      expect(dropdown_milestone_size).to eq(1)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('milestone:')
+    end
+
+    it 'fills in the milestone name when the milestone has not been filled' do
+      click_milestone(milestone.title)
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{milestone.title}")
+    end
+
+    it 'fills in the milestone name when the milestone is partially filled' do
+      send_keys_to_filtered_search('v')
+      click_milestone(milestone.title)
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{milestone.title}")
+    end
+
+    it 'fills in the milestone name that contains multiple words' do
+      click_milestone(two_words_milestone.title)
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%\"#{two_words_milestone.title}\"")
+    end
+
+    it 'fills in the milestone name that contains multiple words and is very long' do
+      click_milestone(long_milestone.title)
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%\"#{long_milestone.title}\"")
+    end
+
+    it 'fills in the milestone name that contains double quotes' do
+      click_milestone(wont_fix_milestone.title)
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%'#{wont_fix_milestone.title}'")
+    end
+
+    it 'fills in the milestone name with the correct capitalization' do
+      click_milestone(uppercase_milestone.title)
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{uppercase_milestone.title}")
+    end
+
+    it 'fills in the milestone name with special characters' do
+      click_milestone(special_milestone.title)
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{special_milestone.title}")
+    end
+
+    it 'selects `no milestone`' do
+      click_static_milestone('No Milestone')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:none")
+    end
+
+    it 'selects `upcoming milestone`' do
+      click_static_milestone('Upcoming')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:upcoming")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens milestone dropdown with existing search term' do
+      filtered_search.set('searchTerm milestone:')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing author' do
+      filtered_search.set('author:@john milestone:')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing assignee' do
+      filtered_search.set('assignee:@john milestone:')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing label' do
+      filtered_search.set('label:~important milestone:')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing milestone' do
+      filtered_search.set('milestone:%100 milestone:')
+
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+  end
+end
diff --git a/spec/features/issues/filtered_search/filter_issues_spec.rb b/spec/features/issues/filtered_search/filter_issues_spec.rb
new file mode 100644
index 00000000000..ead43d6784a
--- /dev/null
+++ b/spec/features/issues/filtered_search/filter_issues_spec.rb
@@ -0,0 +1,759 @@
+require 'rails_helper'
+
+describe 'Filter issues', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:group) { create(:group) }
+  let!(:project) { create(:project, group: group) }
+  let!(:user) { create(:user) }
+  let!(:user2) { create(:user) }
+  let!(:milestone) { create(:milestone, project: project) }
+  let!(:label) { create(:label, project: project) }
+  let!(:wontfix) { create(:label, project: project, title: "Won't fix") }
+
+  let!(:bug_label) { create(:label, project: project, title: 'bug') }
+  let!(:caps_sensitive_label) { create(:label, project: project, title: 'CAPS_sensitive') }
+  let!(:milestone) { create(:milestone, title: "8", project: project) }
+  let!(:multiple_words_label) { create(:label, project: project, title: "Two words") }
+
+  let!(:closed_issue) { create(:issue, title: 'bug that is closed', project: project, state: :closed) }
+  let(:filtered_search) { find('.filtered-search') }
+
+  def input_filtered_search(search_term)
+    filtered_search.set(search_term)
+    filtered_search.send_keys(:enter)
+  end
+
+  def expect_filtered_search_input(input)
+    expect(find('.filtered-search').value).to eq(input)
+  end
+
+  def expect_no_issues_list
+    page.within '.issues-list' do
+      expect(page).not_to have_selector('.issue')
+    end
+  end
+
+  def expect_issues_list_count(open_count, closed_count = 0)
+    all_count = open_count + closed_count
+
+    expect(page).to have_issuable_counts(open: open_count, closed: closed_count, all: all_count)
+    page.within '.issues-list' do
+      expect(page).to have_selector('.issue', count: open_count)
+    end
+  end
+
+  before do
+    project.team << [user, :master]
+    project.team << [user2, :master]
+    group.add_developer(user)
+    group.add_developer(user2)
+    login_as(user)
+    create(:issue, project: project)
+
+    create(:issue, title: "Bug report 1", project: project)
+    create(:issue, title: "Bug report 2", project: project)
+    create(:issue, title: "issue with 'single quotes'", project: project)
+    create(:issue, title: "issue with \"double quotes\"", project: project)
+    create(:issue, title: "issue with !@\#{$%^&*()-+", project: project)
+    create(:issue, title: "issue by assignee", project: project, milestone: milestone, author: user, assignee: user)
+    create(:issue, title: "issue by assignee with searchTerm", project: project, milestone: milestone, author: user, assignee: user)
+
+    issue = create(:issue,
+      title: "Bug 2",
+      project: project,
+      milestone: milestone,
+      author: user,
+      assignee: user)
+    issue.labels << bug_label
+
+    issue_with_caps_label = create(:issue,
+      title: "issue by assignee with searchTerm and label",
+      project: project,
+      milestone: milestone,
+      author: user,
+      assignee: user)
+    issue_with_caps_label.labels << caps_sensitive_label
+
+    issue_with_everything = create(:issue,
+      title: "Bug report with everything you thought was possible",
+      project: project,
+      milestone: milestone,
+      author: user,
+      assignee: user)
+    issue_with_everything.labels << bug_label
+    issue_with_everything.labels << caps_sensitive_label
+
+    multiple_words_label_issue = create(:issue, title: "Issue with multiple words label", project: project)
+    multiple_words_label_issue.labels << multiple_words_label
+
+    future_milestone = create(:milestone, title: "future", project: project, due_date: Time.now + 1.month)
+
+    create(:issue,
+      title: "Issue with future milestone",
+      milestone: future_milestone,
+      project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'filter issues by author' do
+    context 'only author' do
+      it 'filters issues by searched author' do
+        input_filtered_search("author:@#{user.username}")
+
+        expect_issues_list_count(5)
+      end
+
+      it 'filters issues by invalid author' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+
+      it 'filters issues by multiple authors' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+    end
+
+    context 'author with other filters' do
+      it 'filters issues by searched author and text' do
+        search = "author:@#{user.username} issue"
+        input_filtered_search(search)
+
+        expect_issues_list_count(3)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched author, assignee and text' do
+        search = "author:@#{user.username} assignee:@#{user.username} issue"
+        input_filtered_search(search)
+
+        expect_issues_list_count(3)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched author, assignee, label, and text' do
+        search = "author:@#{user.username} assignee:@#{user.username} label:~#{caps_sensitive_label.title} issue"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched author, assignee, label, milestone and text' do
+        search = "author:@#{user.username} assignee:@#{user.username} label:~#{caps_sensitive_label.title} milestone:%#{milestone.title} issue"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+    end
+
+    it 'sorting' do
+      pending('to be tested, issue #26546')
+      expect(true).to be(false)
+    end
+  end
+
+  describe 'filter issues by assignee' do
+    context 'only assignee' do
+      it 'filters issues by searched assignee' do
+        search = "assignee:@#{user.username}"
+        input_filtered_search(search)
+
+        expect_issues_list_count(5)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by no assignee' do
+        search = "assignee:none"
+        input_filtered_search(search)
+
+        expect_issues_list_count(8, 1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by invalid assignee' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+
+      it 'filters issues by multiple assignees' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+    end
+
+    context 'assignee with other filters' do
+      it 'filters issues by searched assignee and text' do
+        search = "assignee:@#{user.username} searchTerm"
+        input_filtered_search(search)
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched assignee, author and text' do
+        search = "assignee:@#{user.username} author:@#{user.username} searchTerm"
+        input_filtered_search(search)
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched assignee, author, label, text' do
+        search = "assignee:@#{user.username} author:@#{user.username} label:~#{caps_sensitive_label.title} searchTerm"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched assignee, author, label, milestone and text' do
+        search = "assignee:@#{user.username} author:@#{user.username} label:~#{caps_sensitive_label.title} milestone:%#{milestone.title} searchTerm"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'sorting' do
+      it 'sorts' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+    end
+  end
+
+  describe 'filter issues by label' do
+    context 'only label' do
+      it 'filters issues by searched label' do
+        search = "label:~#{bug_label.title}"
+        input_filtered_search(search)
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by no label' do
+        search = "label:none"
+        input_filtered_search(search)
+
+        expect_issues_list_count(9, 1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by invalid label' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+
+      it 'filters issues by multiple labels' do
+        search = "label:~#{bug_label.title} label:~#{caps_sensitive_label.title}"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by label containing special characters' do
+        special_label = create(:label, project: project, title: '!@#{$%^&*()-+[]<>?/:{}|\}')
+        special_issue = create(:issue, title: "Issue with special character label", project: project)
+        special_issue.labels << special_label
+
+        search = "label:~#{special_label.title}"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'does not show issues' do
+        new_label = create(:label, project: project, title: "new_label")
+
+        search = "label:~#{new_label.title}"
+        input_filtered_search(search)
+
+        expect_no_issues_list()
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'label with multiple words' do
+      it 'special characters' do
+        special_multiple_label = create(:label, project: project, title: "Utmost |mp0rt@nce")
+        special_multiple_issue = create(:issue, title: "Issue with special character multiple words label", project: project)
+        special_multiple_issue.labels << special_multiple_label
+
+        search = "label:~'#{special_multiple_label.title}'"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+
+        # filtered search defaults quotations to double quotes
+        expect_filtered_search_input("label:~\"#{special_multiple_label.title}\"")
+      end
+
+      it 'single quotes' do
+        search = "label:~'#{multiple_words_label.title}'"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("label:~\"#{multiple_words_label.title}\"")
+      end
+
+      it 'double quotes' do
+        search = "label:~\"#{multiple_words_label.title}\""
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'single quotes containing double quotes' do
+        double_quotes_label = create(:label, project: project, title: 'won"t fix')
+        double_quotes_label_issue = create(:issue, title: "Issue with double quotes label", project: project)
+        double_quotes_label_issue.labels << double_quotes_label
+
+        search = "label:~'#{double_quotes_label.title}'"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'double quotes containing single quotes' do
+        single_quotes_label = create(:label, project: project, title: "won't fix")
+        single_quotes_label_issue = create(:issue, title: "Issue with single quotes label", project: project)
+        single_quotes_label_issue.labels << single_quotes_label
+
+        search = "label:~\"#{single_quotes_label.title}\""
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'label with other filters' do
+      it 'filters issues by searched label and text' do
+        search = "label:~#{caps_sensitive_label.title} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched label, author and text' do
+        search = "label:~#{caps_sensitive_label.title} author:@#{user.username} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched label, author, assignee and text' do
+        search = "label:~#{caps_sensitive_label.title} author:@#{user.username} assignee:@#{user.username} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched label, author, assignee, milestone and text' do
+        search = "label:~#{caps_sensitive_label.title} author:@#{user.username} assignee:@#{user.username} milestone:%#{milestone.title} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'multiple labels with other filters' do
+      it 'filters issues by searched label, label2, and text' do
+        search = "label:~#{bug_label.title} label:~#{caps_sensitive_label.title} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched label, label2, author and text' do
+        search = "label:~#{bug_label.title} label:~#{caps_sensitive_label.title} author:@#{user.username} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched label, label2, author, assignee and text' do
+        search = "label:~#{bug_label.title} label:~#{caps_sensitive_label.title} author:@#{user.username} assignee:@#{user.username} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched label, label2, author, assignee, milestone and text' do
+        search = "label:~#{bug_label.title} label:~#{caps_sensitive_label.title} author:@#{user.username} assignee:@#{user.username} milestone:%#{milestone.title} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'issue label clicked' do
+      before do
+        find('.issues-list .issue .issue-info a .label', text: multiple_words_label.title).click
+        sleep 1
+      end
+
+      it 'filters' do
+        expect_issues_list_count(1)
+      end
+
+      it 'displays in search bar' do
+        expect(find('.filtered-search').value).to eq("label:~\"#{multiple_words_label.title}\"")
+      end
+    end
+
+    context 'sorting' do
+      it 'sorts' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+    end
+  end
+
+  describe 'filter issues by milestone' do
+    context 'only milestone' do
+      it 'filters issues by searched milestone' do
+        input_filtered_search("milestone:%#{milestone.title}")
+
+        expect_issues_list_count(5)
+      end
+
+      it 'filters issues by no milestone' do
+        input_filtered_search("milestone:none")
+
+        expect_issues_list_count(7, 1)
+      end
+
+      it 'filters issues by upcoming milestones' do
+        input_filtered_search("milestone:upcoming")
+
+        expect_issues_list_count(1)
+      end
+
+      it 'filters issues by invalid milestones' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+
+      it 'filters issues by multiple milestones' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+
+      it 'filters issues by milestone containing special characters' do
+        special_milestone = create(:milestone, title: '!@\#{$%^&*()}', project: project)
+        create(:issue, title: "Issue with special character milestone", project: project, milestone: special_milestone)
+
+        search = "milestone:%#{special_milestone.title}"
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'does not show issues' do
+        new_milestone = create(:milestone, title: "new", project: project)
+
+        search = "milestone:%#{new_milestone.title}"
+        input_filtered_search(search)
+
+        expect_no_issues_list()
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'milestone with other filters' do
+      it 'filters issues by searched milestone and text' do
+        search = "milestone:%#{milestone.title} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched milestone, author and text' do
+        search = "milestone:%#{milestone.title} author:@#{user.username} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched milestone, author, assignee and text' do
+        search = "milestone:%#{milestone.title} author:@#{user.username} assignee:@#{user.username} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched milestone, author, assignee, label and text' do
+        search = "milestone:%#{milestone.title} author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} bug"
+        input_filtered_search(search)
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'sorting' do
+      it 'sorts' do
+        pending('to be tested, issue #26546')
+        expect(true).to be(false)
+      end
+    end
+  end
+
+  describe 'filter issues by text' do
+    context 'only text' do
+      it 'filters issues by searched text' do
+        search = 'Bug'
+        input_filtered_search(search)
+
+        expect_issues_list_count(4, 1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by multiple searched text' do
+        search = 'Bug report'
+        input_filtered_search(search)
+
+        expect_issues_list_count(3)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by case insensitive searched text' do
+        search = 'bug report'
+        input_filtered_search(search)
+
+        expect_issues_list_count(3)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched text containing single quotes' do
+        search = '\'single quotes\''
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched text containing double quotes' do
+        search = '"double quotes"'
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'filters issues by searched text containing special characters' do
+        search = '!@#{$%^&*()-+'
+        input_filtered_search(search)
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input(search)
+      end
+
+      it 'does not show any issues' do
+        search = 'testing'
+        input_filtered_search(search)
+
+        expect_no_issues_list()
+        expect_filtered_search_input(search)
+      end
+    end
+
+    context 'searched text with other filters' do
+      it 'filters issues by searched text and author' do
+        input_filtered_search("bug author:@#{user.username}")
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input("author:@#{user.username} bug")
+      end
+
+      it 'filters issues by searched text, author and more text' do
+        input_filtered_search("bug author:@#{user.username} report")
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("author:@#{user.username} bug report")
+      end
+
+      it 'filters issues by searched text, author and assignee' do
+        input_filtered_search("bug author:@#{user.username} assignee:@#{user.username}")
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} bug")
+      end
+
+      it 'filters issues by searched text, author, more text and assignee' do
+        input_filtered_search("bug author:@#{user.username} report assignee:@#{user.username}")
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} bug report")
+      end
+
+      it 'filters issues by searched text, author, more text, assignee and even more text' do
+        input_filtered_search("bug author:@#{user.username} report assignee:@#{user.username} with")
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} bug report with")
+      end
+
+      it 'filters issues by searched text, author, assignee and label' do
+        input_filtered_search("bug author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title}")
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} bug")
+      end
+
+      it 'filters issues by searched text, author, text, assignee, text, label and text' do
+        input_filtered_search("bug author:@#{user.username} report assignee:@#{user.username} with label:~#{bug_label.title} everything")
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} bug report with everything")
+      end
+
+      it 'filters issues by searched text, author, assignee, label and milestone' do
+        input_filtered_search("bug author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} milestone:%#{milestone.title}")
+
+        expect_issues_list_count(2)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} milestone:%#{milestone.title} bug")
+      end
+
+      it 'filters issues by searched text, author, text, assignee, text, label, text, milestone and text' do
+        input_filtered_search("bug author:@#{user.username} report assignee:@#{user.username} with label:~#{bug_label.title} everything milestone:%#{milestone.title} you")
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} milestone:%#{milestone.title} bug report with everything you")
+      end
+
+      it 'filters issues by searched text, author, assignee, multiple labels and milestone' do
+        input_filtered_search("bug author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} label:~#{caps_sensitive_label.title} milestone:%#{milestone.title}")
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} label:~#{caps_sensitive_label.title} milestone:%#{milestone.title} bug")
+      end
+
+      it 'filters issues by searched text, author, text, assignee, text, label1, text, label2, text, milestone and text' do
+        input_filtered_search("bug author:@#{user.username} report assignee:@#{user.username} with label:~#{bug_label.title} everything label:~#{caps_sensitive_label.title} you milestone:%#{milestone.title} thought")
+
+        expect_issues_list_count(1)
+        expect_filtered_search_input("author:@#{user.username} assignee:@#{user.username} label:~#{bug_label.title} label:~#{caps_sensitive_label.title} milestone:%#{milestone.title} bug report with everything you thought")
+      end
+    end
+
+    context 'sorting' do
+      it 'sorts by oldest updated' do
+        create(:issue,
+          title: '3 days ago',
+          project: project,
+          author: user,
+          created_at: 3.days.ago,
+          updated_at: 3.days.ago)
+
+        old_issue = create(:issue,
+          title: '5 days ago',
+          project: project,
+          author: user,
+          created_at: 5.days.ago,
+          updated_at: 5.days.ago)
+
+        input_filtered_search('days ago')
+
+        expect_issues_list_count(2)
+
+        sort_toggle = find('.filtered-search-container .dropdown-toggle')
+        sort_toggle.click
+
+        find('.filtered-search-container .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)
+      end
+    end
+  end
+
+  describe 'retains filter when switching issue states' do
+    before do
+      input_filtered_search('bug')
+
+      # Wait for search results to load
+      sleep 2
+    end
+
+    it 'open state' do
+      find('.issues-state-filters a', text: 'Closed').click
+      wait_for_ajax
+
+      find('.issues-state-filters a', text: 'Open').click
+      wait_for_ajax
+
+      expect(page).to have_selector('.issues-list .issue', count: 4)
+    end
+
+    it 'closed state' do
+      find('.issues-state-filters a', text: 'Closed').click
+      wait_for_ajax
+
+      expect(page).to have_selector('.issues-list .issue', count: 1)
+      expect(find('.issues-list .issue:first-of-type .issue-title-text a')).to have_content(closed_issue.title)
+    end
+
+    it 'all state' do
+      find('.issues-state-filters a', text: 'All').click
+      wait_for_ajax
+
+      expect(page).to have_selector('.issues-list .issue', count: 5)
+    end
+  end
+
+  describe 'RSS feeds' do
+    it 'updates atom feed link for project issues' do
+      visit namespace_project_issues_path(project.namespace, project, milestone_title: milestone.title, assignee_id: user.id)
+      link = find('.nav-controls a', text: 'Subscribe')
+      params = CGI.parse(URI.parse(link[:href]).query)
+      auto_discovery_link = find('link[type="application/atom+xml"]', visible: false)
+      auto_discovery_params = CGI.parse(URI.parse(auto_discovery_link[:href]).query)
+
+      expect(params).to include('private_token' => [user.private_token])
+      expect(params).to include('milestone_title' => [milestone.title])
+      expect(params).to include('assignee_id' => [user.id.to_s])
+      expect(auto_discovery_params).to include('private_token' => [user.private_token])
+      expect(auto_discovery_params).to include('milestone_title' => [milestone.title])
+      expect(auto_discovery_params).to include('assignee_id' => [user.id.to_s])
+    end
+
+    it 'updates atom feed link for group issues' do
+      visit issues_group_path(group, milestone_title: milestone.title, assignee_id: user.id)
+      link = find('.nav-controls a', text: 'Subscribe')
+      params = CGI.parse(URI.parse(link[:href]).query)
+      auto_discovery_link = find('link[type="application/atom+xml"]', visible: false)
+      auto_discovery_params = CGI.parse(URI.parse(auto_discovery_link[:href]).query)
+
+      expect(params).to include('private_token' => [user.private_token])
+      expect(params).to include('milestone_title' => [milestone.title])
+      expect(params).to include('assignee_id' => [user.id.to_s])
+      expect(auto_discovery_params).to include('private_token' => [user.private_token])
+      expect(auto_discovery_params).to include('milestone_title' => [milestone.title])
+      expect(auto_discovery_params).to include('assignee_id' => [user.id.to_s])
+    end
+  end
+end
diff --git a/spec/features/issues/filtered_search/search_bar_spec.rb b/spec/features/issues/filtered_search/search_bar_spec.rb
new file mode 100644
index 00000000000..56b1d354eb0
--- /dev/null
+++ b/spec/features/issues/filtered_search/search_bar_spec.rb
@@ -0,0 +1,88 @@
+require 'rails_helper'
+
+describe 'Search bar', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user) }
+  let(:filtered_search) { find('.filtered-search') }
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  def get_left_style(style)
+    left_style = /left:\s\d*[.]\d*px/.match(style)
+    left_style.to_s.gsub('left: ', '').to_f
+  end
+
+  describe 'clear search button' do
+    it 'clears text' do
+      search_text = 'search_text'
+      filtered_search.set(search_text)
+
+      expect(filtered_search.value).to eq(search_text)
+      find('.filtered-search-input-container .clear-search').click
+
+      expect(filtered_search.value).to eq('')
+    end
+
+    it 'hides by default' do
+      expect(page).to have_css('.clear-search', visible: false)
+    end
+
+    it 'hides after clicked' do
+      filtered_search.set('a')
+      find('.filtered-search-input-container .clear-search').click
+
+      expect(page).to have_css('.clear-search', visible: false)
+    end
+
+    it 'hides when there is no text' do
+      filtered_search.set('a')
+      filtered_search.set('')
+
+      expect(page).to have_css('.clear-search', visible: false)
+    end
+
+    it 'shows when there is text' do
+      filtered_search.set('a')
+
+      expect(page).to have_css('.clear-search', visible: true)
+    end
+
+    it 'resets the dropdown hint filter' do
+      filtered_search.click
+      original_size = page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size
+
+      filtered_search.set('author')
+
+      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(1)
+
+      find('.filtered-search-input-container .clear-search').click
+      filtered_search.click
+
+      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(original_size)
+    end
+
+    it 'resets the dropdown filters' do
+      filtered_search.set('a')
+      hint_style = page.find('#js-dropdown-hint')['style']
+      hint_offset = get_left_style(hint_style)
+
+      filtered_search.set('author:')
+
+      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(0)
+
+      find('.filtered-search-input-container .clear-search').click
+      filtered_search.click
+
+      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to be > 0
+      expect(get_left_style(page.find('#js-dropdown-hint')['style'])).to eq(hint_offset)
+    end
+  end
+end
diff --git a/spec/features/issues/reset_filters_spec.rb b/spec/features/issues/reset_filters_spec.rb
deleted file mode 100644
index c9a3ecf16ea..00000000000
--- a/spec/features/issues/reset_filters_spec.rb
+++ /dev/null
@@ -1,89 +0,0 @@
-require 'rails_helper'
-
-feature 'Issues filter reset button', feature: true, js: true do
-  include WaitForAjax
-  include IssueHelpers
-
-  let!(:project)    { create(:project, :public) }
-  let!(:user)        { create(:user)}
-  let!(:milestone)  { create(:milestone, project: project) }
-  let!(:bug)        { create(:label, project: project, name: 'bug')}
-  let!(:issue1)     { create(:issue, project: project, milestone: milestone, author: user, assignee: user, title: 'Feature')}
-  let!(:issue2)     { create(:labeled_issue, project: project, labels: [bug], title: 'Bugfix1')}
-
-  before do
-    project.team << [user, :developer]
-  end
-
-  context 'when a milestone filter has been applied' do
-    it 'resets the milestone filter' do
-      visit_issues(project, milestone_title: milestone.title)
-      expect(page).to have_css('.issue', count: 1)
-
-      reset_filters
-      expect(page).to have_css('.issue', count: 2)
-    end
-  end
-
-  context 'when a label filter has been applied' do
-    it 'resets the label filter' do
-      visit_issues(project, label_name: bug.name)
-      expect(page).to have_css('.issue', count: 1)
-
-      reset_filters
-      expect(page).to have_css('.issue', count: 2)
-    end
-  end
-
-  context 'when a text search has been conducted' do
-    it 'resets the text search filter' do
-      visit_issues(project, search: 'Bug')
-      expect(page).to have_css('.issue', count: 1)
-
-      reset_filters
-      expect(page).to have_css('.issue', count: 2)
-    end
-  end
-
-  context 'when author filter has been applied' do
-    it 'resets the author filter' do
-      visit_issues(project, author_id: user.id)
-      expect(page).to have_css('.issue', count: 1)
-
-      reset_filters
-      expect(page).to have_css('.issue', count: 2)
-    end
-  end
-
-  context 'when assignee filter has been applied' do
-    it 'resets the assignee filter' do
-      visit_issues(project, assignee_id: user.id)
-      expect(page).to have_css('.issue', count: 1)
-
-      reset_filters
-      expect(page).to have_css('.issue', count: 2)
-    end
-  end
-
-  context 'when all filters have been applied' do
-    it 'resets all filters' do
-      visit_issues(project, assignee_id: user.id, author_id: user.id, milestone_title: milestone.title, label_name: bug.name, search: 'Bug')
-      expect(page).to have_css('.issue', count: 0)
-
-      reset_filters
-      expect(page).to have_css('.issue', count: 2)
-    end
-  end
-
-  context 'when no filters have been applied' do
-    it 'the reset link should not be visible' do
-      visit_issues(project)
-      expect(page).to have_css('.issue', count: 2)
-      expect(page).not_to have_css '.reset_filters'
-    end
-  end
-
-  def reset_filters
-    find('.reset-filters').click
-  end
-end
diff --git a/spec/features/issues/filter_by_labels_spec.rb b/spec/features/merge_requests/filter_by_labels_spec.rb
index 0253629f753..4c60329865c 100644
--- a/spec/features/issues/filter_by_labels_spec.rb
+++ b/spec/features/merge_requests/filter_by_labels_spec.rb
@@ -7,25 +7,27 @@ feature 'Issue filtering by Labels', feature: true, js: true do
   let!(:user)   { create(:user) }
   let!(:label)  { create(:label, project: project) }
 
-  before do
-    bug = create(:label, project: project, title: 'bug')
-    feature = create(:label, project: project, title: 'feature')
-    enhancement = create(:label, project: project, title: 'enhancement')
+  let!(:bug) { create(:label, project: project, title: 'bug') }
+  let!(:feature) { create(:label, project: project, title: 'feature') }
+  let!(:enhancement) { create(:label, project: project, title: 'enhancement') }
+
+  let!(:mr1) { create(:merge_request, title: "Bugfix1", source_project: project, target_project: project, source_branch: "bugfix1") }
+  let!(:mr2) { create(:merge_request, title: "Bugfix2", source_project: project, target_project: project, source_branch: "bugfix2") }
+  let!(:mr3) { create(:merge_request, title: "Feature1", source_project: project, target_project: project, source_branch: "feature1") }
 
-    issue1 = create(:issue, title: "Bugfix1", project: project)
-    issue1.labels << bug
+  before do
+    mr1.labels << bug
 
-    issue2 = create(:issue, title: "Bugfix2", project: project)
-    issue2.labels << bug
-    issue2.labels << enhancement
+    mr2.labels << bug
+    mr2.labels << enhancement
 
-    issue3 = create(:issue, title: "Feature1", project: project)
-    issue3.labels << feature
+    mr3.title = "Feature1"
+    mr3.labels << feature
 
     project.team << [user, :master]
     login_as(user)
 
-    visit namespace_project_issues_path(project.namespace, project)
+    visit namespace_project_merge_requests_path(project.namespace, project)
   end
 
   context 'filter by label bug' do
diff --git a/spec/features/issues/filter_issues_spec.rb b/spec/features/merge_requests/filter_merge_requests_spec.rb
index 0d19563d628..4642b5a530d 100644
--- a/spec/features/issues/filter_issues_spec.rb
+++ b/spec/features/merge_requests/filter_merge_requests_spec.rb
@@ -1,10 +1,10 @@
 require 'rails_helper'
 
-describe 'Filter issues', feature: true do
+describe 'Filter merge requests', feature: true do
   include WaitForAjax
 
+  let!(:project)   { create(:project) }
   let!(:group)     { create(:group) }
-  let!(:project)   { create(:project, group: group) }
   let!(:user)      { create(:user)}
   let!(:milestone) { create(:milestone, project: project) }
   let!(:label)     { create(:label, project: project) }
@@ -14,12 +14,12 @@ describe 'Filter issues', feature: true do
     project.team << [user, :master]
     group.add_developer(user)
     login_as(user)
-    create(:issue, project: project)
+    create(:merge_request, source_project: project, target_project: project)
   end
 
-  describe 'for assignee from issues#index' do
+  describe 'for assignee from mr#index' do
     before do
-      visit namespace_project_issues_path(project.namespace, project)
+      visit namespace_project_merge_requests_path(project.namespace, project)
 
       find('.js-assignee-search').click
 
@@ -47,9 +47,9 @@ describe 'Filter issues', feature: true do
     end
   end
 
-  describe 'for milestone from issues#index' do
+  describe 'for milestone from mr#index' do
     before do
-      visit namespace_project_issues_path(project.namespace, project)
+      visit namespace_project_merge_requests_path(project.namespace, project)
 
       find('.js-milestone-select').click
 
@@ -77,9 +77,9 @@ describe 'Filter issues', feature: true do
     end
   end
 
-  describe 'for label from issues#index', js: true do
+  describe 'for label from mr#index', js: true do
     before do
-      visit namespace_project_issues_path(project.namespace, project)
+      visit namespace_project_merge_requests_path(project.namespace, project)
       find('.js-label-select').click
       wait_for_ajax
     end
@@ -127,7 +127,7 @@ describe 'Filter issues', feature: true do
         expect(page).to have_content wontfix.title
       end
 
-      find('.dropdown-menu-close-icon').click
+      find('body').click
 
       expect(find('.filtered-labels')).to have_content(wontfix.title)
 
@@ -135,7 +135,7 @@ describe 'Filter issues', feature: true do
       wait_for_ajax
       find('.dropdown-menu-labels a', text: label.title).click
 
-      find('.dropdown-menu-close-icon').click
+      find('body').click
 
       expect(find('.filtered-labels')).to have_content(wontfix.title)
       expect(find('.filtered-labels')).to have_content(label.title)
@@ -150,21 +150,21 @@ describe 'Filter issues', feature: true do
     it "selects and unselects `won't fix`" do
       find('.dropdown-menu-labels a', text: wontfix.title).click
       find('.dropdown-menu-labels a', text: wontfix.title).click
-
-      find('.dropdown-menu-close-icon').click
+      # Close label dropdown to load
+      find('body').click
       expect(page).not_to have_css('.filtered-labels')
     end
   end
 
   describe 'for assignee and label from issues#index' do
     before do
-      visit namespace_project_issues_path(project.namespace, project)
+      visit namespace_project_merge_requests_path(project.namespace, project)
 
       find('.js-assignee-search').click
 
       find('.dropdown-menu-user-link', text: user.username).click
 
-      expect(page).not_to have_selector('.issues-list .issue')
+      expect(page).not_to have_selector('.mr-list .merge-request')
 
       find('.js-label-select').click
 
@@ -196,38 +196,40 @@ describe 'Filter issues', feature: true do
     end
   end
 
-  describe 'filter issues by text' do
+  describe 'filter merge requests by text' do
     before do
-      create(:issue, title: "Bug", project: project)
+      create(:merge_request, title: "Bug", source_project: project, target_project: project, source_branch: "bug")
 
       bug_label = create(:label, project: project, title: 'bug')
       milestone = create(:milestone, title: "8", project: project)
 
-      issue = create(:issue,
-        title: "Bug 2",
-        project: project,
+      mr = create(:merge_request, 
+        title: "Bug 2", 
+        source_project: project, 
+        target_project: project, 
+        source_branch: "bug2", 
         milestone: milestone,
         author: user,
         assignee: user)
-      issue.labels << bug_label
+      mr.labels << bug_label
 
-      visit namespace_project_issues_path(project.namespace, project)
+      visit namespace_project_merge_requests_path(project.namespace, project)
     end
 
     context 'only text', js: true do
-      it 'filters issues by searched text' do
+      it 'filters merge requests by searched text' do
         fill_in 'issuable_search', with: 'Bug'
 
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 2)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 2)
         end
       end
 
-      it 'does not show any issues' do
+      it 'does not show any merge requests' do
         fill_in 'issuable_search', with: 'testing'
 
-        page.within '.issues-list' do
-          expect(page).not_to have_selector('.issue')
+        page.within '.mr-list' do
+          expect(page).not_to have_selector('.merge-request')
         end
       end
     end
@@ -237,8 +239,8 @@ describe 'Filter issues', feature: true do
         fill_in 'issuable_search', with: 'Bug'
 
         expect(page).to have_issuable_counts(open: 2, closed: 0, all: 2)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 2)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 2)
         end
 
         click_button 'Label'
@@ -248,8 +250,8 @@ describe 'Filter issues', feature: true do
         find('.dropdown-menu-close-icon').click
 
         expect(page).to have_issuable_counts(open: 1, closed: 0, all: 1)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 1)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 1)
         end
       end
 
@@ -257,8 +259,8 @@ describe 'Filter issues', feature: true do
         fill_in 'issuable_search', with: 'Bug'
 
         expect(page).to have_issuable_counts(open: 2, closed: 0, all: 2)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 2)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 2)
         end
 
         click_button 'Milestone'
@@ -267,8 +269,8 @@ describe 'Filter issues', feature: true do
         end
 
         expect(page).to have_issuable_counts(open: 1, closed: 0, all: 1)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 1)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 1)
         end
       end
 
@@ -276,8 +278,8 @@ describe 'Filter issues', feature: true do
         fill_in 'issuable_search', with: 'Bug'
 
         expect(page).to have_issuable_counts(open: 2, closed: 0, all: 2)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 2)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 2)
         end
 
         click_button 'Assignee'
@@ -286,8 +288,8 @@ describe 'Filter issues', feature: true do
         end
 
         expect(page).to have_issuable_counts(open: 1, closed: 0, all: 1)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 1)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 1)
         end
       end
 
@@ -295,8 +297,8 @@ describe 'Filter issues', feature: true do
         fill_in 'issuable_search', with: 'Bug'
 
         expect(page).to have_issuable_counts(open: 2, closed: 0, all: 2)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 2)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 2)
         end
 
         click_button 'Author'
@@ -305,26 +307,27 @@ describe 'Filter issues', feature: true do
         end
 
         expect(page).to have_issuable_counts(open: 1, closed: 0, all: 1)
-        page.within '.issues-list' do
-          expect(page).to have_selector('.issue', count: 1)
+        page.within '.mr-list' do
+          expect(page).to have_selector('.merge-request', count: 1)
         end
       end
     end
   end
 
-  describe 'filter issues and sort', js: true do
+  describe 'filter merge requests and sort', js: true do
     before do
       bug_label = create(:label, project: project, title: 'bug')
-      bug_one = create(:issue, title: "Frontend", project: project)
-      bug_two = create(:issue, title: "Bug 2", project: project)
 
-      bug_one.labels << bug_label
-      bug_two.labels << bug_label
+      mr1 = create(:merge_request, title: "Frontend", source_project: project, target_project: project, source_branch: "Frontend")
+      mr2 = create(:merge_request, title: "Bug 2", source_project: project, target_project: project, source_branch: "bug2")
 
-      visit namespace_project_issues_path(project.namespace, project)
+      mr1.labels << bug_label
+      mr2.labels << bug_label
+
+      visit namespace_project_merge_requests_path(project.namespace, project)
     end
 
-    it 'is able to filter and sort issues' do
+    it 'is able to filter and sort merge requests' do
       click_button 'Label'
       wait_for_ajax
       page.within '.labels-filter' do
@@ -334,8 +337,8 @@ describe 'Filter issues', feature: true do
       wait_for_ajax
 
       expect(page).to have_issuable_counts(open: 2, closed: 0, all: 2)
-      page.within '.issues-list' do
-        expect(page).to have_selector('.issue', count: 2)
+      page.within '.mr-list' do
+        expect(page).to have_selector('.merge-request', count: 2)
       end
 
       click_button 'Last created'
@@ -344,41 +347,9 @@ describe 'Filter issues', feature: true do
       end
       wait_for_ajax
 
-      page.within '.issues-list' do
+      page.within '.mr-list' do
         expect(page).to have_content('Frontend')
       end
     end
   end
-
-  it 'updates atom feed link for project issues' do
-    visit namespace_project_issues_path(project.namespace, project, milestone_title: '', assignee_id: user.id)
-
-    link = find('.nav-controls a', text: 'Subscribe')
-    params = CGI::parse(URI.parse(link[:href]).query)
-    auto_discovery_link = find('link[type="application/atom+xml"]', visible: false)
-    auto_discovery_params = CGI::parse(URI.parse(auto_discovery_link[:href]).query)
-
-    expect(params).to include('private_token' => [user.private_token])
-    expect(params).to include('milestone_title' => [''])
-    expect(params).to include('assignee_id' => [user.id.to_s])
-    expect(auto_discovery_params).to include('private_token' => [user.private_token])
-    expect(auto_discovery_params).to include('milestone_title' => [''])
-    expect(auto_discovery_params).to include('assignee_id' => [user.id.to_s])
-  end
-
-  it 'updates atom feed link for group issues' do
-    visit issues_group_path(group, milestone_title: '', assignee_id: user.id)
-
-    link = find('.nav-controls a', text: 'Subscribe')
-    params = CGI::parse(URI.parse(link[:href]).query)
-    auto_discovery_link = find('link[type="application/atom+xml"]', visible: false)
-    auto_discovery_params = CGI::parse(URI.parse(auto_discovery_link[:href]).query)
-
-    expect(params).to include('private_token' => [user.private_token])
-    expect(params).to include('milestone_title' => [''])
-    expect(params).to include('assignee_id' => [user.id.to_s])
-    expect(auto_discovery_params).to include('private_token' => [user.private_token])
-    expect(auto_discovery_params).to include('milestone_title' => [''])
-    expect(auto_discovery_params).to include('assignee_id' => [user.id.to_s])
-  end
 end
diff --git a/spec/features/merge_requests/reset_filters_spec.rb b/spec/features/merge_requests/reset_filters_spec.rb
new file mode 100644
index 00000000000..3a7ece7e1d6
--- /dev/null
+++ b/spec/features/merge_requests/reset_filters_spec.rb
@@ -0,0 +1,96 @@
+require 'rails_helper'
+
+feature 'Issues filter reset button', feature: true, js: true do
+  include WaitForAjax
+  include IssueHelpers
+
+  let!(:project)    { create(:project, :public) }
+  let!(:user)        { create(:user)}
+  let!(:milestone)  { create(:milestone, project: project) }
+  let!(:bug)        { create(:label, project: project, name: 'bug')}
+  let!(:mr1) { create(:merge_request, title: "Feature", source_project: project, target_project: project, source_branch: "Feature", milestone: milestone, author: user, assignee: user) }
+  let!(:mr2) { create(:merge_request, title: "Bugfix1", source_project: project, target_project: project, source_branch: "Bugfix1") }
+
+  let(:merge_request_css) { '.merge-request' }  
+
+  before do
+    mr2.labels << bug
+    project.team << [user, :developer]
+  end
+
+  context 'when a milestone filter has been applied' do
+    it 'resets the milestone filter' do
+      visit_merge_requests(project, milestone_title: milestone.title)
+      expect(page).to have_css(merge_request_css, count: 1)
+
+      reset_filters
+      expect(page).to have_css(merge_request_css, count: 2)
+    end
+  end
+
+  context 'when a label filter has been applied' do
+    it 'resets the label filter' do
+      visit_merge_requests(project, label_name: bug.name)
+      expect(page).to have_css(merge_request_css, count: 1)
+
+      reset_filters
+      expect(page).to have_css(merge_request_css, count: 2)
+    end
+  end
+
+  context 'when a text search has been conducted' do
+    it 'resets the text search filter' do
+      visit_merge_requests(project, search: 'Bug')
+      expect(page).to have_css(merge_request_css, count: 1)
+
+      reset_filters
+      expect(page).to have_css(merge_request_css, count: 2)
+    end
+  end
+
+  context 'when author filter has been applied' do
+    it 'resets the author filter' do
+      visit_merge_requests(project, author_id: user.id)
+      expect(page).to have_css(merge_request_css, count: 1)
+
+      reset_filters
+      expect(page).to have_css(merge_request_css, count: 2)
+    end
+  end
+
+  context 'when assignee filter has been applied' do
+    it 'resets the assignee filter' do
+      visit_merge_requests(project, assignee_id: user.id)
+      expect(page).to have_css(merge_request_css, count: 1)
+
+      reset_filters
+      expect(page).to have_css(merge_request_css, count: 2)
+    end
+  end
+
+  context 'when all filters have been applied' do
+    it 'resets all filters' do
+      visit_merge_requests(project, assignee_id: user.id, author_id: user.id, milestone_title: milestone.title, label_name: bug.name, search: 'Bug')
+      expect(page).to have_css(merge_request_css, count: 0)
+
+      reset_filters
+      expect(page).to have_css(merge_request_css, count: 2)
+    end
+  end
+
+  context 'when no filters have been applied' do
+    it 'the reset link should not be visible' do
+      visit_merge_requests(project)
+      expect(page).to have_css(merge_request_css, count: 2)
+      expect(page).not_to have_css '.reset_filters'
+    end
+  end
+
+  def visit_merge_requests(project, opts = {})
+    visit namespace_project_merge_requests_path project.namespace, project, opts
+  end
+
+  def reset_filters
+    find('.reset-filters').click
+  end
+end
diff --git a/spec/features/search_spec.rb b/spec/features/search_spec.rb
index caecd027aaa..a05b83959fb 100644
--- a/spec/features/search_spec.rb
+++ b/spec/features/search_spec.rb
@@ -169,16 +169,16 @@ describe "Search", feature: true  do
           find('.dropdown-menu').click_link 'Issues assigned to me'
           sleep 2
 
-          expect(page).to have_selector('.issues-holder')
-          expect(find('.js-assignee-search .dropdown-toggle-text')).to have_content(user.name)
+          expect(page).to have_selector('.filtered-search')
+          expect(find('.filtered-search').value).to eq("assignee:@#{user.username}")
         end
 
         it 'takes user to her issues page when issues authored is clicked' do
           find('.dropdown-menu').click_link "Issues I've created"
           sleep 2
 
-          expect(page).to have_selector('.issues-holder')
-          expect(find('.js-author-search .dropdown-toggle-text')).to have_content(user.name)
+          expect(page).to have_selector('.filtered-search')
+          expect(find('.filtered-search').value).to eq("author:@#{user.username}")
         end
 
         it 'takes user to her MR page when MR assigned is clicked' do
diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js.es6 b/spec/javascripts/filtered_search/dropdown_utils_spec.js.es6
new file mode 100644
index 00000000000..ce61b73aa8a
--- /dev/null
+++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js.es6
@@ -0,0 +1,107 @@
+//= require extensions/array
+//= require filtered_search/dropdown_utils
+//= require filtered_search/filtered_search_tokenizer
+//= require filtered_search/filtered_search_dropdown_manager
+
+(() => {
+  describe('Dropdown Utils', () => {
+    describe('getEscapedText', () => {
+      it('should return same word when it has no space', () => {
+        const escaped = gl.DropdownUtils.getEscapedText('textWithoutSpace');
+        expect(escaped).toBe('textWithoutSpace');
+      });
+
+      it('should escape with double quotes', () => {
+        let escaped = gl.DropdownUtils.getEscapedText('text with space');
+        expect(escaped).toBe('"text with space"');
+
+        escaped = gl.DropdownUtils.getEscapedText('won\'t fix');
+        expect(escaped).toBe('"won\'t fix"');
+      });
+
+      it('should escape with single quotes', () => {
+        const escaped = gl.DropdownUtils.getEscapedText('won"t fix');
+        expect(escaped).toBe('\'won"t fix\'');
+      });
+
+      it('should escape with single quotes by default', () => {
+        const escaped = gl.DropdownUtils.getEscapedText('won"t\' fix');
+        expect(escaped).toBe('\'won"t\' fix\'');
+      });
+    });
+
+    describe('filterWithSymbol', () => {
+      const item = {
+        title: '@root',
+      };
+
+      it('should filter without symbol', () => {
+        const updatedItem = gl.DropdownUtils.filterWithSymbol('@', item, ':roo');
+        expect(updatedItem.droplab_hidden).toBe(false);
+      });
+
+      it('should filter with symbol', () => {
+        const updatedItem = gl.DropdownUtils.filterWithSymbol('@', item, ':@roo');
+        expect(updatedItem.droplab_hidden).toBe(false);
+      });
+
+      it('should filter with colon', () => {
+        const updatedItem = gl.DropdownUtils.filterWithSymbol('@', item, ':');
+        expect(updatedItem.droplab_hidden).toBe(false);
+      });
+    });
+
+    describe('filterHint', () => {
+      it('should filter', () => {
+        let updatedItem = gl.DropdownUtils.filterHint({
+          hint: 'label',
+        }, 'l');
+        expect(updatedItem.droplab_hidden).toBe(false);
+
+        updatedItem = gl.DropdownUtils.filterHint({
+          hint: 'label',
+        }, 'o');
+        expect(updatedItem.droplab_hidden).toBe(true);
+      });
+
+      it('should return droplab_hidden false when item has no hint', () => {
+        const updatedItem = gl.DropdownUtils.filterHint({}, '');
+        expect(updatedItem.droplab_hidden).toBe(false);
+      });
+    });
+
+    describe('setDataValueIfSelected', () => {
+      beforeEach(() => {
+        spyOn(gl.FilteredSearchDropdownManager, 'addWordToInput')
+          .and.callFake(() => {});
+      });
+
+      it('calls addWordToInput when dataValue exists', () => {
+        const selected = {
+          getAttribute: () => 'value',
+        };
+
+        gl.DropdownUtils.setDataValueIfSelected(null, selected);
+        expect(gl.FilteredSearchDropdownManager.addWordToInput.calls.count()).toEqual(1);
+      });
+
+      it('returns true when dataValue exists', () => {
+        const selected = {
+          getAttribute: () => 'value',
+        };
+
+        const result = gl.DropdownUtils.setDataValueIfSelected(null, selected);
+        expect(result).toBe(true);
+      });
+
+      it('returns false when dataValue does not exist', () => {
+        const selected = {
+          getAttribute: () => null,
+        };
+
+        const result = gl.DropdownUtils.setDataValueIfSelected(null, selected);
+        expect(result).toBe(false);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js.es6 b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js.es6
new file mode 100644
index 00000000000..d0d27ceb4a6
--- /dev/null
+++ b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js.es6
@@ -0,0 +1,59 @@
+//= require extensions/array
+//= require filtered_search/filtered_search_tokenizer
+//= require filtered_search/filtered_search_dropdown_manager
+
+(() => {
+  describe('Filtered Search Dropdown Manager', () => {
+    describe('addWordToInput', () => {
+      function getInputValue() {
+        return document.querySelector('.filtered-search').value;
+      }
+
+      function setInputValue(value) {
+        document.querySelector('.filtered-search').value = value;
+      }
+
+      beforeEach(() => {
+        const input = document.createElement('input');
+        input.classList.add('filtered-search');
+        document.body.appendChild(input);
+      });
+
+      afterEach(() => {
+        document.querySelector('.filtered-search').outerHTML = '';
+      });
+
+      describe('input has no existing value', () => {
+        it('should add just tokenName', () => {
+          gl.FilteredSearchDropdownManager.addWordToInput('milestone');
+          expect(getInputValue()).toBe('milestone:');
+        });
+
+        it('should add tokenName and tokenValue', () => {
+          gl.FilteredSearchDropdownManager.addWordToInput('label', 'none');
+          expect(getInputValue()).toBe('label:none');
+        });
+      });
+
+      describe('input has existing value', () => {
+        it('should be able to just add tokenName', () => {
+          setInputValue('a');
+          gl.FilteredSearchDropdownManager.addWordToInput('author');
+          expect(getInputValue()).toBe('author:');
+        });
+
+        it('should replace tokenValue', () => {
+          setInputValue('author:roo');
+          gl.FilteredSearchDropdownManager.addWordToInput('author', '@root');
+          expect(getInputValue()).toBe('author:@root');
+        });
+
+        it('should add tokenValues containing spaces', () => {
+          setInputValue('label:~"test');
+          gl.FilteredSearchDropdownManager.addWordToInput('label', '~\'"test me"\'');
+          expect(getInputValue()).toBe('label:~\'"test me"\'');
+        });
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js.es6 b/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js.es6
new file mode 100644
index 00000000000..6df7c0e44ef
--- /dev/null
+++ b/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js.es6
@@ -0,0 +1,104 @@
+//= require extensions/array
+//= require filtered_search/filtered_search_token_keys
+
+(() => {
+  describe('Filtered Search Token Keys', () => {
+    describe('get', () => {
+      let tokenKeys;
+
+      beforeEach(() => {
+        tokenKeys = gl.FilteredSearchTokenKeys.get();
+      });
+
+      it('should return tokenKeys', () => {
+        expect(tokenKeys !== null).toBe(true);
+      });
+
+      it('should return tokenKeys as an array', () => {
+        expect(tokenKeys instanceof Array).toBe(true);
+      });
+    });
+
+    describe('getConditions', () => {
+      let conditions;
+
+      beforeEach(() => {
+        conditions = gl.FilteredSearchTokenKeys.getConditions();
+      });
+
+      it('should return conditions', () => {
+        expect(conditions !== null).toBe(true);
+      });
+
+      it('should return conditions as an array', () => {
+        expect(conditions instanceof Array).toBe(true);
+      });
+    });
+
+    describe('searchByKey', () => {
+      it('should return null when key not found', () => {
+        const tokenKey = gl.FilteredSearchTokenKeys.searchByKey('notakey');
+        expect(tokenKey === null).toBe(true);
+      });
+
+      it('should return tokenKey when found by key', () => {
+        const tokenKeys = gl.FilteredSearchTokenKeys.get();
+        const result = gl.FilteredSearchTokenKeys.searchByKey(tokenKeys[0].key);
+        expect(result).toEqual(tokenKeys[0]);
+      });
+    });
+
+    describe('searchBySymbol', () => {
+      it('should return null when symbol not found', () => {
+        const tokenKey = gl.FilteredSearchTokenKeys.searchBySymbol('notasymbol');
+        expect(tokenKey === null).toBe(true);
+      });
+
+      it('should return tokenKey when found by symbol', () => {
+        const tokenKeys = gl.FilteredSearchTokenKeys.get();
+        const result = gl.FilteredSearchTokenKeys.searchBySymbol(tokenKeys[0].symbol);
+        expect(result).toEqual(tokenKeys[0]);
+      });
+    });
+
+    describe('searchByKeyParam', () => {
+      it('should return null when key param not found', () => {
+        const tokenKey = gl.FilteredSearchTokenKeys.searchByKeyParam('notakeyparam');
+        expect(tokenKey === null).toBe(true);
+      });
+
+      it('should return tokenKey when found by key param', () => {
+        const tokenKeys = gl.FilteredSearchTokenKeys.get();
+        const result = gl.FilteredSearchTokenKeys.searchByKeyParam(`${tokenKeys[0].key}_${tokenKeys[0].param}`);
+        expect(result).toEqual(tokenKeys[0]);
+      });
+    });
+
+    describe('searchByConditionUrl', () => {
+      it('should return null when condition url not found', () => {
+        const condition = gl.FilteredSearchTokenKeys.searchByConditionUrl(null);
+        expect(condition === null).toBe(true);
+      });
+
+      it('should return condition when found by url', () => {
+        const conditions = gl.FilteredSearchTokenKeys.getConditions();
+        const result = gl.FilteredSearchTokenKeys.searchByConditionUrl(conditions[0].url);
+        expect(result).toBe(conditions[0]);
+      });
+    });
+
+    describe('searchByConditionKeyValue', () => {
+      it('should return null when condition tokenKey and value not found', () => {
+        const condition = gl.FilteredSearchTokenKeys.searchByConditionKeyValue(null, null);
+        expect(condition === null).toBe(true);
+      });
+
+      it('should return condition when found by tokenKey and value', () => {
+        const conditions = gl.FilteredSearchTokenKeys.getConditions();
+        const result = gl.FilteredSearchTokenKeys
+          .searchByConditionKeyValue(conditions[0].tokenKey, conditions[0].value);
+        expect(result).toEqual(conditions[0]);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js.es6 b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js.es6
new file mode 100644
index 00000000000..ac7f8e9cbcd
--- /dev/null
+++ b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js.es6
@@ -0,0 +1,104 @@
+//= require extensions/array
+//= require filtered_search/filtered_search_token_keys
+//= require filtered_search/filtered_search_tokenizer
+
+(() => {
+  describe('Filtered Search Tokenizer', () => {
+    describe('processTokens', () => {
+      it('returns for input containing only search value', () => {
+        const results = gl.FilteredSearchTokenizer.processTokens('searchTerm');
+        expect(results.searchToken).toBe('searchTerm');
+        expect(results.tokens.length).toBe(0);
+        expect(results.lastToken).toBe(results.searchToken);
+      });
+
+      it('returns for input containing only tokens', () => {
+        const results = gl.FilteredSearchTokenizer
+          .processTokens('author:@root label:~"Very Important" milestone:%v1.0 assignee:none');
+        expect(results.searchToken).toBe('');
+        expect(results.tokens.length).toBe(4);
+        expect(results.tokens[3]).toBe(results.lastToken);
+
+        expect(results.tokens[0].key).toBe('author');
+        expect(results.tokens[0].value).toBe('root');
+        expect(results.tokens[0].symbol).toBe('@');
+
+        expect(results.tokens[1].key).toBe('label');
+        expect(results.tokens[1].value).toBe('"Very Important"');
+        expect(results.tokens[1].symbol).toBe('~');
+
+        expect(results.tokens[2].key).toBe('milestone');
+        expect(results.tokens[2].value).toBe('v1.0');
+        expect(results.tokens[2].symbol).toBe('%');
+
+        expect(results.tokens[3].key).toBe('assignee');
+        expect(results.tokens[3].value).toBe('none');
+        expect(results.tokens[3].symbol).toBe('');
+      });
+
+      it('returns for input starting with search value and ending with tokens', () => {
+        const results = gl.FilteredSearchTokenizer
+          .processTokens('searchTerm anotherSearchTerm milestone:none');
+        expect(results.searchToken).toBe('searchTerm anotherSearchTerm');
+        expect(results.tokens.length).toBe(1);
+        expect(results.tokens[0]).toBe(results.lastToken);
+        expect(results.tokens[0].key).toBe('milestone');
+        expect(results.tokens[0].value).toBe('none');
+        expect(results.tokens[0].symbol).toBe('');
+      });
+
+      it('returns for input starting with tokens and ending with search value', () => {
+        const results = gl.FilteredSearchTokenizer
+          .processTokens('assignee:@user searchTerm');
+
+        expect(results.searchToken).toBe('searchTerm');
+        expect(results.tokens.length).toBe(1);
+        expect(results.tokens[0].key).toBe('assignee');
+        expect(results.tokens[0].value).toBe('user');
+        expect(results.tokens[0].symbol).toBe('@');
+        expect(results.lastToken).toBe(results.searchToken);
+      });
+
+      it('returns for input containing search value wrapped between tokens', () => {
+        const results = gl.FilteredSearchTokenizer
+          .processTokens('author:@root label:~"Won\'t fix" searchTerm anotherSearchTerm milestone:none');
+
+        expect(results.searchToken).toBe('searchTerm anotherSearchTerm');
+        expect(results.tokens.length).toBe(3);
+        expect(results.tokens[2]).toBe(results.lastToken);
+
+        expect(results.tokens[0].key).toBe('author');
+        expect(results.tokens[0].value).toBe('root');
+        expect(results.tokens[0].symbol).toBe('@');
+
+        expect(results.tokens[1].key).toBe('label');
+        expect(results.tokens[1].value).toBe('"Won\'t fix"');
+        expect(results.tokens[1].symbol).toBe('~');
+
+        expect(results.tokens[2].key).toBe('milestone');
+        expect(results.tokens[2].value).toBe('none');
+        expect(results.tokens[2].symbol).toBe('');
+      });
+
+      it('returns for input containing search value in between tokens', () => {
+        const results = gl.FilteredSearchTokenizer
+          .processTokens('author:@root searchTerm assignee:none anotherSearchTerm label:~Doing');
+        expect(results.searchToken).toBe('searchTerm anotherSearchTerm');
+        expect(results.tokens.length).toBe(3);
+        expect(results.tokens[2]).toBe(results.lastToken);
+
+        expect(results.tokens[0].key).toBe('author');
+        expect(results.tokens[0].value).toBe('root');
+        expect(results.tokens[0].symbol).toBe('@');
+
+        expect(results.tokens[1].key).toBe('assignee');
+        expect(results.tokens[1].value).toBe('none');
+        expect(results.tokens[1].symbol).toBe('');
+
+        expect(results.tokens[2].key).toBe('label');
+        expect(results.tokens[2].value).toBe('Doing');
+        expect(results.tokens[2].symbol).toBe('~');
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js.es6 b/spec/javascripts/lib/utils/common_utils_spec.js.es6
index ef75f600898..031f9ca03c9 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js.es6
+++ b/spec/javascripts/lib/utils/common_utils_spec.js.es6
@@ -15,6 +15,7 @@
         expect(gl.utils.parseUrl('" test="asf"').pathname).toEqual('/teaspoon/%22%20test=%22asf%22');
       });
     });
+
     describe('gl.utils.parseUrlPathname', () => {
       beforeEach(() => {
         spyOn(gl.utils, 'parseUrl').and.callFake(url => ({
@@ -28,5 +29,28 @@
         expect(gl.utils.parseUrlPathname('some/relative/url')).toEqual('/some/relative/url');
       });
     });
+
+    describe('gl.utils.getUrlParamsArray', () => {
+      it('should return params array', () => {
+        expect(gl.utils.getUrlParamsArray() instanceof Array).toBe(true);
+      });
+
+      it('should remove the question mark from the search params', () => {
+        const paramsArray = gl.utils.getUrlParamsArray();
+        expect(paramsArray[0][0] !== '?').toBe(true);
+      });
+    });
+
+    describe('gl.utils.getParameterByName', () => {
+      it('should return valid parameter', () => {
+        const value = gl.utils.getParameterByName('reporter');
+        expect(value).toBe('Console');
+      });
+
+      it('should return invalid parameter', () => {
+        const value = gl.utils.getParameterByName('fakeParameter');
+        expect(value).toBe(null);
+      });
+    });
   });
 })();
diff --git a/spec/javascripts/lib/utils/text_utility_spec.js.es6 b/spec/javascripts/lib/utils/text_utility_spec.js.es6
new file mode 100644
index 00000000000..e97356b65d5
--- /dev/null
+++ b/spec/javascripts/lib/utils/text_utility_spec.js.es6
@@ -0,0 +1,25 @@
+//= require lib/utils/text_utility
+
+(() => {
+  describe('text_utility', () => {
+    describe('gl.text.getTextWidth', () => {
+      it('returns zero width when no text is passed', () => {
+        expect(gl.text.getTextWidth('')).toBe(0);
+      });
+
+      it('returns zero width when no text is passed and font is passed', () => {
+        expect(gl.text.getTextWidth('', '100px sans-serif')).toBe(0);
+      });
+
+      it('returns width when text is passed', () => {
+        expect(gl.text.getTextWidth('foo') > 0).toBe(true);
+      });
+
+      it('returns bigger width when font is larger', () => {
+        const largeFont = gl.text.getTextWidth('foo', '100px sans-serif');
+        const regular = gl.text.getTextWidth('foo', '10px sans-serif');
+        expect(largeFont > regular).toBe(true);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/search_autocomplete_spec.js b/spec/javascripts/search_autocomplete_spec.js
index e13c4ad772c..2d3f44e7980 100644
--- a/spec/javascripts/search_autocomplete_spec.js
+++ b/spec/javascripts/search_autocomplete_spec.js
@@ -11,6 +11,7 @@
 
 (function() {
   var addBodyAttributes, assertLinks, dashboardIssuesPath, dashboardMRsPath, groupIssuesPath, groupMRsPath, groupName, mockDashboardOptions, mockGroupOptions, mockProjectOptions, projectIssuesPath, projectMRsPath, projectName, userId, widget;
+  var userName = 'root';
 
   widget = null;
 
@@ -19,6 +20,7 @@
   window.gon || (window.gon = {});
 
   window.gon.current_user_id = userId;
+  window.gon.current_username = userName;
 
   dashboardIssuesPath = '/dashboard/issues';
 
@@ -93,8 +95,8 @@
 
   assertLinks = function(list, issuesPath, mrsPath) {
     var a1, a2, a3, a4, issuesAssignedToMeLink, issuesIHaveCreatedLink, mrsAssignedToMeLink, mrsIHaveCreatedLink;
-    issuesAssignedToMeLink = issuesPath + "/?assignee_id=" + userId;
-    issuesIHaveCreatedLink = issuesPath + "/?author_id=" + userId;
+    issuesAssignedToMeLink = issuesPath + "/?assignee_username=" + userName;
+    issuesIHaveCreatedLink = issuesPath + "/?author_username=" + userName;
     mrsAssignedToMeLink = mrsPath + "/?assignee_id=" + userId;
     mrsIHaveCreatedLink = mrsPath + "/?author_id=" + userId;
     a1 = "a[href='" + issuesAssignedToMeLink + "']";