Use autocomplete search for creator filter on requests index beta page

src/api/app/controllers/concerns/webui/requests_filter.rb

@@ -32,7 +32,7 @@
     @filter_action_type = params[:action_type].presence || []
     @filter_action_type = @filter_action_type.intersection(BsRequestAction::TYPES)
 
-    @filter_creators = params[:creators].presence || []
+    @filter_creators = params[:creators].present? ? params[:creators].compact_blank! : []
   end
 
   def set_selected_filter

src/api/app/controllers/webui/users/bs_requests_controller.rb

@@ -20,8 +20,6 @@ def index
           format.html do
             filter_requests
 
-            # TODO: Temporarily disable list of creators due to performance issues
-            # @bs_requests_creators = @bs_requests.distinct.pluck(:creator)
             @bs_requests = @bs_requests.order('number DESC').page(params[:page])
             @bs_requests = @bs_requests.includes(:bs_request_actions, :comments, :reviews)
             @bs_requests = @bs_requests.includes(:labels) if Flipper.enabled?(:labels, User.session)

src/api/app/views/webui/shared/_autocomplete.html.haml

@@ -4,9 +4,11 @@
   disabled = local_assigns.fetch(:disabled, false)
   data = local_assigns.fetch(:data, {})
   html_name = local_assigns.fetch(:html_name, html_id)
+  with_label = local_assigns.fetch(:with_label, true)
 
 .mb-3.ui-front
-  = label_tag(html_id, label)
+  - if with_label
+    = label_tag(html_id, label)
   - if required
     %abbr.text-danger{ title: 'required' } *
   .input-group

src/api/app/views/webui/shared/bs_requests/_form.html.haml

@@ -69,20 +69,3 @@
     clearTimeout(submitFiltersTimeout);
     submitFiltersTimeout = setTimeout(submitRequestFilters, 2000);
   });
-
-  $(document).on("input", "#request-creator-search", function(event) {
-    var searchInput = event.target;
-    var filterValue = searchInput.value.toLowerCase();
-    var dropdown = document.getElementById("request-creator-dropdown");
-    var dropdownInputFields = dropdown.getElementsByTagName("input");
-
-    for (i = 1; i < dropdownInputFields.length; i++) {
-      dropdownInputValue = dropdownInputFields[i].value;
-
-      if (dropdownInputValue.toLowerCase().indexOf(filterValue) > -1) {
-        dropdownInputFields[i].closest(".dropdown-item-text").style.display = "";
-      } else {
-        dropdownInputFields[i].closest(".dropdown-item-text").style.display = "none";
-      }
-    }
-  });

src/api/app/views/webui/shared/bs_requests/_requests_filter.html.haml

@@ -72,22 +72,24 @@
                                                             label_icon: action_type_icon('submit'),
                                                             checked: selected_filter[:action_type]&.include?('submit')}
 
--# TODO: Temporarily disable list of creators due to performance issues
   .mt-2.mb-2.accordion-item.border-0
     %h6.px-3.py-2.accordion-button.no-style{ data: { 'bs-toggle': 'collapse', 'bs-target': '#request-filter-creator' },
                                                        aria: { expanded: 'true', controls: 'request-filter-creator' } }
       %b Creator
+      .selected-content.small.ms-1
     .px-4.pb-2.accordion-collapse.collapse.show#request-filter-creator
       #request-creator-dropdown
-        = text_field_tag('request-creator-search', nil, autocomplete: 'off', placeholder: 'Search creators...', class: 'form-control mb-2')
+        = render partial: 'webui/shared/autocomplete', locals: { html_id: 'creators_search', label: 'Creators:',
+                                                                 html_name: 'creators[]', required: false, with_label: false,
+                                                                 data: { source: autocomplete_users_path } }
 
-        - if creators.include?(User.session.login)
+        - if selected_filter[:creators].include?(User.session.login)
           .dropdown-item-text
             = render partial: 'webui/shared/check_box', locals: { label: "#{User.session.login} (me)",
                                                                   key: "creators[#{User.session.login}]", name: 'creators[]',
                                                                   value: User.session.login,
                                                                   checked: selected_filter[:creators]&.include?(User.session.login) }
-        - creators.each do |creator|
+        - selected_filter[:creators].each do |creator|
           - next if creator == User.session.login
           .dropdown-item-text
             = render partial: 'webui/shared/check_box', locals: { label: creator,

src/api/spec/features/beta/webui/requests_index_spec.rb

@@ -113,36 +113,57 @@
     # rubocop:enable RSpec/ExampleLength
   end
 
-  describe 'using the request creator filter', skip: 'Temporarily disable list of creators due to performance issues' do
+  describe 'using the request creator filter' do
     before do
-      find_by_id('requests-dropdown-trigger').click if mobile? # open the filter dropdown
-      find_by_id('filter-creator-requests-button').click
-    end
+      if mobile?
+        find_by_id('requests-dropdown-trigger').click # open the filter dropdown
+        sleep 0.5 # wait for dropdown to open
+      end
 
-    it 'lists only the requests of the selected creator' do
-      check("creators[#{receiver.login}]")
+      within('#filters') do
+        fill_in('creators_search', with: receiver.login[0, 2])
+        find('.ui-menu-item-wrapper', match: :first).click
+        # Remove focus from autocomplete search to allow the autosubmit
+        find(:xpath, '//*[@id="request-creator-dropdown"]/div/div/span/i').click
+        sleep 2
+      end
 
-      expect(page).to have_link(href: "/request/show/#{outgoing_request.number}")
-      expect(page).to have_no_link(href: "/request/show/#{incoming_request.number}")
-      expect(page).to have_no_link(href: "/request/show/#{other_incoming_request.number}")
-    end
+      if mobile?
+        find_by_id('requests-dropdown-trigger').click # open the filter dropdown
+        sleep 0.5 # wait for dropdown to open
+      end
 
-    it 'allows to filter by multiple request creators' do
-      check("creators[#{receiver.login}]")
-      check("creators[#{another_submitter.login}]")
+      within('#filters') do
+        fill_in('creators_search', with: another_submitter.login[0, 2])
+        find('.ui-menu-item-wrapper', match: :first).click
+        # Remove focus from autocomplete search to allow the autosubmit
+        find(:xpath, '//*[@id="request-creator-dropdown"]/div/div/span/i').click
+        sleep 2
+      end
+    end
 
+    it 'filters the requests by multiple creators' do
       expect(page).to have_link(href: "/request/show/#{outgoing_request.number}")
       expect(page).to have_link(href: "/request/show/#{other_incoming_request.number}")
       expect(page).to have_no_link(href: "/request/show/#{incoming_request.number}")
     end
 
-    it 'only shows the creators that match the search value filled in the dropdown' do
-      fill_in('request-creator-search', with: submitter.login[0, 2].to_s)
+    # rubocop:disable RSpec/ExampleLength
+    it 'allows to modify the filter selection' do
+      if mobile?
+        find_by_id('requests-dropdown-trigger').click # open the filter dropdown
+        sleep 0.5 # wait for dropdown to open
+      end
 
-      within('div#request-creator-dropdown') do
-        expect(page).to have_field('creators[]', with: submitter.login.to_s)
-        expect(page).to have_no_field('creators[]', with: receiver.login.to_s)
+      within('#filters') do
+        uncheck("creators[#{receiver.login}]")
+        sleep 2
       end
+
+      expect(page).to have_no_link(href: "/request/show/#{outgoing_request.number}")
+      expect(page).to have_link(href: "/request/show/#{other_incoming_request.number}")
+      expect(page).to have_no_link(href: "/request/show/#{incoming_request.number}")
     end
+    # rubocop:enable RSpec/ExampleLength
   end
 end