Always encode group path for labels API

- Always encode group path while getting labels to
  ensure sub-group labels are fetched correctly.
- Add rspecs to ensure token values load as expected.

Changelog: fixed
EE: true

ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js

@@ -101,7 +101,7 @@ export default {
               params.search = search;
             }
 
-            return Api.groupLabels(this.groupFullPath, {
+            return Api.groupLabels(encodeURIComponent(this.groupFullPath), {
               params,
             });
           },

ee/spec/features/epics/epics_list_spec.rb

@@ -5,6 +5,9 @@ require 'spec_helper'
 RSpec.describe 'epics list', :js do
   let(:group) { create(:group, :public) }
   let(:user) { create(:user) }
+  let(:user_dev) { create(:user) }
+  let!(:bug_label) { create(:group_label, group: group, title: 'Bug') }
+  let!(:critical_label) { create(:group_label, group: group, title: 'Critical') }
 
   before do
     stub_licensed_features(epics: true)
@@ -215,43 +218,68 @@ RSpec.describe 'epics list', :js do
   end
 
   context 'vue epics list' do
-    let!(:epic1) { create(:epic, group: group, start_date: '2020-12-15', end_date: '2021-1-15') }
-    let!(:epic2) { create(:epic, group: group, start_date: '2020-12-15') }
-    let!(:epic3) { create(:epic, group: group, end_date: '2021-1-15') }
+    available_tokens = %w[Author Label My-Reaction]
 
     before do
       stub_feature_flags(vue_epics_list: true)
-      group.add_developer(user)
+    end
 
-      visit group_epics_path(group)
+    describe 'within a group' do
+      let!(:epic1) { create(:epic, group: group, start_date: '2020-12-15', end_date: '2021-1-15') }
+      let!(:epic2) { create(:epic, group: group, start_date: '2020-12-15') }
+      let!(:epic3) { create(:epic, group: group, end_date: '2021-1-15') }
+      let!(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: epic1) }
+
+      before do
+        group.add_developer(user)
+        group.add_developer(user_dev)
+        visit group_epics_path(group)
+        wait_for_requests
+      end
 
-      wait_for_requests
-    end
+      it 'renders epics list', :aggregate_failures do
+        page.within('.issuable-list-container') do
+          expect(page).to have_selector('.gl-tabs')
+          expect(page).to have_link('New epic')
+          expect(page).to have_selector('.vue-filtered-search-bar-container')
+          expect(page.find('.issuable-list')).to have_selector('li.issue', count: 3)
+        end
+      end
 
-    it 'renders epics list' do
-      page.within('.issuable-list-container') do
-        expect(page).to have_selector('.gl-tabs')
-        expect(page).to have_link('New epic')
-        expect(page).to have_selector('.vue-filtered-search-bar-container')
-        expect(page.find('.issuable-list')).to have_selector('li.issue', count: 3)
+      it 'renders epics item with metadata', :aggregate_failures do
+        page.within('.issuable-list-container .issuable-list') do
+          expect(page.all('.issuable-info-container')[0].find('.issue-title')).to have_content(epic2.title)
+          expect(page.all('.issuable-info-container')[0].find('.issuable-reference')).to have_content("&#{epic2.iid}")
+          expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content('created')
+          expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content("by #{epic2.author.name}")
+        end
       end
-    end
 
-    it 'renders epics item with metadata' do
-      page.within('.issuable-list-container .issuable-list') do
-        expect(page.all('.issuable-info-container')[0].find('.issue-title')).to have_content(epic2.title)
-        expect(page.all('.issuable-info-container')[0].find('.issuable-reference')).to have_content("&#{epic2.iid}")
-        expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content('created')
-        expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content("by #{epic2.author.name}")
+      it 'renders epic item timeframe', :aggregate_failures do
+        page.within('.issuable-list-container .issuable-list') do
+          expect(page.all('.issuable-info-container')[0].find('.issuable-info')).to have_content('Dec 15, 2020 – No due date')
+          expect(page.all('.issuable-info-container')[1].find('.issuable-info')).to have_content('Dec 15, 2020 – Jan 15, 2021')
+          expect(page.all('.issuable-info-container')[2].find('.issuable-info')).to have_content('No start date – Jan 15, 2021')
+        end
       end
+
+      it_behaves_like 'filtered search bar', available_tokens
     end
 
-    it 'renders epic item timeframe' do
-      page.within('.issuable-list-container .issuable-list') do
-        expect(page.all('.issuable-info-container')[0].find('.issuable-info')).to have_content('Dec 15, 2020 – No due date')
-        expect(page.all('.issuable-info-container')[1].find('.issuable-info')).to have_content('Dec 15, 2020 – Jan 15, 2021')
-        expect(page.all('.issuable-info-container')[2].find('.issuable-info')).to have_content('No start date – Jan 15, 2021')
+    describe 'within a sub-group group' do
+      let!(:subgroup) { create(:group, parent: group, name: 'subgroup') }
+      let!(:sub_epic1) { create(:epic, group: subgroup, start_date: '2020-12-15', end_date: '2021-1-15') }
+      let!(:sub_epic2) { create(:epic, group: subgroup, start_date: '2020-12-15') }
+      let!(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: sub_epic1) }
+
+      before do
+        subgroup.add_developer(user)
+        subgroup.add_developer(user_dev)
+        visit group_epics_path(subgroup)
+        wait_for_requests
       end
+
+      it_behaves_like 'filtered search bar', available_tokens
     end
   end
 end

ee/spec/features/groups/group_roadmap_spec.rb

@@ -7,14 +7,16 @@ RSpec.describe 'group epic roadmap', :js do
   include MobileHelpers
 
   let(:user) { create(:user) }
+  let(:user_dev) { create(:user) }
   let(:group) { create(:group) }
+  let(:milestone) { create(:milestone, group: group) }
   let(:filtered_search) { find('.filtered-search') }
   let(:js_dropdown_label) { '#js-dropdown-label' }
   let(:filter_dropdown) { find("#{js_dropdown_label} .filter-dropdown") }
   let(:state_dropdown) { find('.dropdown-epics-state') }
 
-  let(:bug_label) { create(:group_label, group: group, title: 'Bug') }
-  let(:critical_label) { create(:group_label, group: group, title: 'Critical') }
+  let!(:bug_label) { create(:group_label, group: group, title: 'Bug') }
+  let!(:critical_label) { create(:group_label, group: group, title: 'Critical') }
 
   def search_for_label(label)
     init_label_search
@@ -190,4 +192,41 @@ RSpec.describe 'group epic roadmap', :js do
       end
     end
   end
+
+  context 'async filtered search' do
+    available_tokens = %w[Author Label Milestone Epic My-Reaction]
+
+    before do
+      stub_feature_flags(async_filtering: true)
+    end
+
+    describe 'within a group' do
+      let!(:epic1) { create(:epic, group: group, end_date: 10.days.ago) }
+      let!(:epic2) { create(:epic, group: group, start_date: 2.days.ago) }
+      let!(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: epic1) }
+
+      before do
+        group.add_developer(user_dev)
+        visit group_roadmap_path(group)
+        wait_for_requests
+      end
+
+      it_behaves_like 'filtered search bar', available_tokens
+    end
+
+    describe 'within a sub-group group' do
+      let!(:subgroup) { create(:group, parent: group, name: 'subgroup') }
+      let!(:sub_epic1) { create(:epic, group: subgroup, end_date: 10.days.ago) }
+      let!(:sub_epic2) { create(:epic, group: subgroup, start_date: 2.days.ago) }
+      let!(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: sub_epic1) }
+
+      before do
+        subgroup.add_developer(user_dev)
+        visit group_roadmap_path(subgroup)
+        wait_for_requests
+      end
+
+      it_behaves_like 'filtered search bar', available_tokens
+    end
+  end
 end

ee/spec/support/shared_examples/features/epics_filtered_search_shared_examples.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.shared_examples 'filtered search bar' do |tokens|
+  minimum_values_for_token = {
+    # Count must be at least 3 as `Any` & current user are available by default
+    "Author" => 3,
+
+    # Count must be at least 3 as `None` & `Any` are available by default
+    "Label" => 3,
+
+    # Count must be at least 5 as `None`, `Any`, `Upcoming` & `Started` are available by default
+    "Milestone" => 5,
+
+    # Count must be at least 1
+    "Epic" => 1,
+
+    # Count must be at least 3 as `None` & `Any` are available by default
+    "My-Reaction" => 3
+  }
+
+  def select_token(token_name)
+    page.find('input.gl-filtered-search-term-input').click
+    click_link token_name
+    page.first('.gl-filtered-search-suggestion').click
+  end
+
+  tokens.each do |token|
+    it "renders values for token '#{token}' correctly" do
+      page.within('.vue-filtered-search-bar-container .gl-search-box-by-click') do
+        select_token(token)
+
+        wait_for_requests
+
+        expect(page.find('.gl-filtered-search-suggestion-list')).to have_selector('li.gl-filtered-search-suggestion', minimum: minimum_values_for_token[token])
+      end
+    end
+  end
+end