Remove `async_filtering` feature flag

Changelog: changed

ee/app/assets/javascripts/roadmap/components/roadmap_app.vue

@@ -69,13 +69,10 @@ export default {
       'filterParams',
     ]),
     showFilteredSearchbar() {
-      if (this.glFeatures.asyncFiltering) {
       if (this.epicsFetchResultEmpty) {
         return this.hasFiltersApplied;
       }
       return true;
-      }
-      return false;
     },
     timeframeStart() {
       return this.timeframe[0];

ee/app/assets/javascripts/roadmap/components/roadmap_filters.vue

@@ -203,7 +203,7 @@ export default {
       </gl-form-group>
       <gl-dropdown
         :text="selectedEpicStateTitle"
-        class="gl-mr-0 gl-lg-mr-3 mb-sm-2"
+        class="gl-mr-0 gl-lg-mr-3 mb-sm-2 dropdown-epics-state"
         toggle-class="gl-rounded-base!"
       >
         <gl-dropdown-item

ee/app/controllers/groups/roadmap_controller.rb

@@ -8,7 +8,6 @@ module Groups
     before_action :check_epics_available!
     before_action :persist_roadmap_layout, only: [:show]
     before_action do
-      push_frontend_feature_flag(:async_filtering, @group, default_enabled: true)
       push_frontend_feature_flag(:performance_roadmap, @group, default_enabled: :yaml)
       push_frontend_feature_flag(:roadmap_daterange_filter, @group, type: :development, default_enabled: :yaml)
     end

ee/app/views/groups/roadmap/show.html.haml

@@ -12,9 +12,6 @@
 
 - has_filters_applied = params[:label_name].present? || params[:author_username].present? || params[:search].present?
 
-- if !Feature.enabled?(:async_filtering, @group, default_enabled: true)
-  = render 'shared/epic/search_bar', type: :epics, show_roadmap_presets: true, hide_extra_sort_options: true
-
 #js-roadmap{ data: { epics_path: group_epics_path(@group, format: :json),
   group_id: @group.id,
   full_path: @group.full_path,

ee/config/feature_flags/development/async_filtering.yml

----
-name: async_filtering
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36421
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/243781
-milestone: '13.3'
-type: development
-group: group::product planning
-default_enabled: true

ee/spec/features/epics/epics_list_spec.rb

@@ -12,7 +12,6 @@ RSpec.describe 'epics list', :js do
   before do
     stub_licensed_features(epics: true)
     stub_feature_flags(unfiltered_epic_aggregates: false)
-    stub_feature_flags(async_filtering: false)
     stub_feature_flags(vue_epics_list: false)
 
     sign_in(user)
@@ -127,42 +126,6 @@ RSpec.describe 'epics list', :js do
       expect(page).to have_button('Last updated')
     end
 
-    it 'sorts by the selected value and stores the selection for roadmap' do
-      visit group_roadmap_path(group)
-
-      page.within('.epics-other-filters') do
-        click_button 'Start date'
-        sort_options = find('ul.dropdown-menu-sort li').all('a').collect(&:text)
-
-        expect(sort_options[0]).to eq('Start date')
-        expect(sort_options[1]).to eq('Due date')
-
-        click_link 'Due date'
-      end
-
-      expect(page).to have_button('Due date')
-
-      page.within('.content-wrapper .content') do
-        page.within('.epics-list-section') do
-          page.within('div.epic-item-container:nth-child(1) div.epics-list-item') do
-            expect(page).to have_content(epic1.title)
-          end
-
-          page.within('div.epic-item-container:nth-child(2) div.epics-list-item') do
-            expect(page).to have_content(epic3.title)
-          end
-
-          page.within('div.epic-item-container:nth-child(3) div.epics-list-item') do
-            expect(page).to have_content(epic2.title)
-          end
-        end
-      end
-
-      visit group_roadmap_path(group)
-
-      expect(page).to have_button('Due date')
-    end
-
     it 'renders the epic detail correctly after clicking the link' do
       page.within('.content-wrapper .content .issuable-list') do
         click_link(epic1.title)

ee/spec/features/groups/group_roadmap_spec.rb

@@ -10,30 +10,34 @@ RSpec.describe 'group epic roadmap', :js do
   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') }
 
   def search_for_label(label)
-    init_label_search
-    filter_dropdown.find('.filter-dropdown-item', text: bug_label.title).click
-    filtered_search.send_keys(:enter)
+    page.within('.vue-filtered-search-bar-container .gl-search-box-by-click') do
+      page.find('input.gl-filtered-search-term-input').click
+      click_link 'Label'
+      page.first('.gl-filtered-search-suggestion-list .gl-filtered-search-suggestion').click # Select `=` operator
+      wait_for_requests
+      page.find('.gl-filtered-search-suggestion-list .gl-filtered-search-suggestion', text: bug_label.title).click
+    end
+    page.find('.gl-search-box-by-click-search-button').click
   end
 
   before do
     stub_licensed_features(epics: true)
     stub_feature_flags(unfiltered_epic_aggregates: false)
-    stub_feature_flags(async_filtering: false)
     stub_feature_flags(performance_roadmap: false)
+    stub_feature_flags(roadmap_daterange_filter: false)
 
     sign_in(user)
   end
 
   context 'when epics exist for the group' do
+    available_tokens = %w[Author Label Milestone Epic My-Reaction]
+
     let!(:epic_with_bug) { create(:labeled_epic, group: group, start_date: 10.days.ago, end_date: 1.day.ago, labels: [bug_label]) }
     let!(:epic_with_critical) { create(:labeled_epic, group: group, start_date: 20.days.ago, end_date: 2.days.ago, labels: [critical_label]) }
     let!(:closed_epic) { create(:epic, :closed, group: group, start_date: 20.days.ago, end_date: 2.days.ago) }
@@ -45,25 +49,25 @@ RSpec.describe 'group epic roadmap', :js do
 
     describe 'roadmap page' do
       it 'renders roadmap preset buttons correctly' do
-        page.within('.js-btn-roadmap-presets') do
-          expect(page).to have_css('.btn-roadmap-preset input[value="QUARTERS"]')
-          expect(page).to have_css('.btn-roadmap-preset input[value="MONTHS"]')
-          expect(page).to have_css('.btn-roadmap-preset input[value="WEEKS"]')
+        page.within('.gl-segmented-control') do
+          expect(page).to have_css('input[value="QUARTERS"]')
+          expect(page).to have_css('input[value="MONTHS"]')
+          expect(page).to have_css('input[value="WEEKS"]')
         end
       end
 
       it 'renders the filtered search bar correctly' do
         page.within('.content-wrapper .content .epics-filters') do
-          expect(page).to have_css('.filtered-search-box')
+          expect(page).to have_css('.vue-filtered-search-bar-container')
         end
       end
 
       it 'renders the sort dropdown correctly' do
-        page.within('.content-wrapper .content .epics-other-filters') do
-          expect(page).to have_css('.filter-dropdown-container')
-          find('.epics-sort-btn').click
-          page.within('.dropdown-menu') do
-            expect(page).to have_selector('li a', count: 3)
+        page.within('.vue-filtered-search-bar-container') do
+          expect(page).to have_css('.sort-dropdown-container')
+          find('.sort-dropdown-container .dropdown-toggle').click
+          page.within('.sort-dropdown-container .dropdown-menu') do
+            expect(page).to have_selector('li button', count: 2)
             expect(page).to have_content('Start date')
             expect(page).to have_content('Due date')
           end
@@ -89,7 +93,7 @@ RSpec.describe 'group epic roadmap', :js do
       end
 
       it 'renders open epics only' do
-        state_dropdown.find('a', text: 'Open epics').click
+        state_dropdown.find('button', text: 'Open epics').click
 
         page.within('.roadmap-container .epics-list-section') do
           expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
@@ -97,16 +101,17 @@ RSpec.describe 'group epic roadmap', :js do
       end
 
       it 'renders closed epics only' do
-        state_dropdown.find('a', text: 'Closed epics').click
+        state_dropdown.find('button', text: 'Closed epics').click
 
         page.within('.roadmap-container .epics-list-section') do
           expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
         end
       end
 
-      it 'saves last selected epic state' do
-        state_dropdown.find('a', text: 'Open epics').click
+      it 'saves last selected epic state', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/341827' do
+        state_dropdown.find('button', text: 'Open epics').click
 
+        wait_for_all_requests
         visit group_roadmap_path(group)
         wait_for_requests
 
@@ -123,7 +128,7 @@ RSpec.describe 'group epic roadmap', :js do
       end
 
       it 'renders filtered search bar with applied filter token' do
-        expect_tokens([label_token(bug_label.title)])
+        expect_vue_tokens([label_token(bug_label.title)])
       end
 
       it 'renders roadmap view with matching epic' do
@@ -135,7 +140,7 @@ RSpec.describe 'group epic roadmap', :js do
 
       it 'keeps label filter when filtering by state' do
         state_dropdown.find('.dropdown-toggle').click
-        state_dropdown.find('a', text: 'Open epics').click
+        state_dropdown.find('button', text: 'Open epics').click
 
         page.within('.roadmap-container .epics-list-section') do
           expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
@@ -143,6 +148,35 @@ RSpec.describe 'group epic roadmap', :js do
         end
       end
     end
+
+    describe 'filtered search tokens' 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 'that is a sub-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
 
   context 'when no epics exist for the group' do
@@ -193,41 +227,4 @@ 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/frontend/roadmap/components/roadmap_app_spec.js

@@ -45,7 +45,6 @@ describe('RoadmapApp', () => {
         presetType,
       },
       provide: {
-        glFeatures: { asyncFiltering: true },
         groupFullPath: 'gitlab-org',
         groupMilestonesPath: '/groups/gitlab-org/-/milestones.json',
         listEpicsPath: '/groups/gitlab-org/-/epics',

spec/support/helpers/filtered_search_helpers.rb

@@ -101,6 +101,27 @@ module FilteredSearchHelpers
     end
   end
 
+  # Same as `expect_tokens` but works with GlFilteredSearch
+  def expect_vue_tokens(tokens)
+    page.within '.gl-search-box-by-click .gl-filtered-search-scrollable' do
+      token_elements = page.all(:css, '.gl-filtered-search-token')
+
+      tokens.each_with_index do |token, index|
+        el = token_elements[index]
+
+        expect(el.find('.gl-filtered-search-token-type')).to have_content(token[:name])
+        expect(el.find('.gl-filtered-search-token-operator')).to have_content(token[:operator]) if token[:operator].present?
+        expect(el.find('.gl-filtered-search-token-data')).to have_content(token[:value]) if token[:value].present?
+
+        # gl-emoji content is blank when the emoji unicode is not supported
+        if token[:emoji_name].present?
+          selector = %(gl-emoji[data-name="#{token[:emoji_name]}"])
+          expect(el.find('.gl-filtered-search-token-data-content')).to have_css(selector)
+        end
+      end
+    end
+  end
+
   def create_token(token_name, token_value = nil, symbol = nil, token_operator = '=')
     { name: token_name, operator: token_operator, value: "#{symbol}#{token_value}" }
   end