Replace bootstrap dropdown in the explore projects filter

app/helpers/explore_helper.rb

@@ -19,26 +19,10 @@ module ExploreHelper
     request_path_with_options(options)
   end
 
-  def filter_audit_path(options = {})
-    exist_opts = {
-      entity_type: params[:entity_type],
-      entity_id: params[:entity_id],
-      created_before: params[:created_before],
-      created_after: params[:created_after],
-      sort: params[:sort]
-    }
-    options = exist_opts.merge(options).delete_if { |key, value| value.blank? }
-    request_path_with_options(options)
-  end
-
   def filter_groups_path(options = {})
     request_path_with_options(options)
   end
 
-  def explore_controller?
-    controller.class.name.split("::").first == "Explore"
-  end
-
   def explore_nav_links
     @explore_nav_links ||= get_explore_nav_links
   end
@@ -47,14 +31,27 @@ module ExploreHelper
     explore_nav_links.include?(link)
   end
 
-  def any_explore_nav_link?(links)
-    links.any? { |link| explore_nav_link?(link) }
-  end
-
   def public_visibility_restricted?
     Gitlab::VisibilityLevel.public_visibility_restricted?
   end
 
+  def projects_filter_items
+    [
+      { value: _('Any'), text: _('Any'), href: filter_projects_path(visibility_level: nil) },
+      *Gitlab::VisibilityLevel.options.keys.map do |key|
+        {
+          value: key,
+          text: key,
+          href: filter_projects_path(visibility_level: Gitlab::VisibilityLevel.options[key])
+        }
+      end
+    ]
+  end
+
+  def projects_filter_selected(visibility_level)
+    visibility_level.present? ? visibility_level_label(visibility_level.to_i) : _('Any')
+  end
+
   private
 
   def get_explore_nav_links

app/views/explore/projects/_filter.html.haml

 - has_label = local_assigns.fetch(:has_label, false)
 - feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar)
+- klass = feature_project_list_filter_bar ? 'gl-ml-3 gl-display-flex gl-flex-grow-1 gl-flex-shrink-1' : 'gl-ml-3'
+- selected = projects_filter_selected(params[:visibility_level])
 
 - if current_user
-  .dropdown.js-project-filter-dropdown-wrap{ class: ('d-flex flex-grow-1 flex-shrink-1' if feature_project_list_filter_bar) }
-    %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
   - unless has_label
-        %span= _("Visibility:")
-      - if params[:visibility_level].present?
-        = visibility_level_label(params[:visibility_level].to_i)
-      - else
-        = _('Any')
-      = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-    %ul.dropdown-menu.dropdown-menu-right
-      %li
-        = link_to filter_projects_path(visibility_level: nil) do
-          = _('Any')
-      - Gitlab::VisibilityLevel.values.each do |level|
-        %li{ class: active_when(level.to_s == params[:visibility_level]) || 'light' }
-          = link_to filter_projects_path(visibility_level: level) do
-            = visibility_level_icon(level)
-            = visibility_level_label(level)
+    %span.gl-float-left= _("Visibility:")
+  = gl_redirect_listbox_tag(projects_filter_items, selected, class: klass, data: { right: true })

spec/features/dashboard/user_filters_projects_spec.rb

@@ -79,11 +79,11 @@ RSpec.describe 'Dashboard > User filters projects' do
       page.find('.filtered-search-block #filtered-search-sorting-dropdown .reverse-sort-btn').click
     end
 
-    def select_dropdown_option(selector, label)
+    def select_dropdown_option(selector, label, option_selector = '.dropdown-menu a')
       dropdown = page.find(selector)
       dropdown.click
 
-      dropdown.find('.dropdown-menu a', text: label, match: :first).click
+      dropdown.find(option_selector, text: label, match: :first).click
     end
 
     def expect_to_see_projects(sorted_projects)
@@ -125,7 +125,7 @@ RSpec.describe 'Dashboard > User filters projects' do
       end
 
       it 'filters private projects only' do
-        select_dropdown_option '#filtered-search-visibility-dropdown', 'Private'
+        select_dropdown_option '#filtered-search-visibility-dropdown > .dropdown', 'Private', '.dropdown-item'
 
         expect(current_url).to match(/visibility_level=0/)
 
@@ -135,7 +135,7 @@ RSpec.describe 'Dashboard > User filters projects' do
       end
 
       it 'filters internal projects only' do
-        select_dropdown_option '#filtered-search-visibility-dropdown', 'Internal'
+        select_dropdown_option '#filtered-search-visibility-dropdown > .dropdown', 'Internal', '.dropdown-item'
 
         expect(current_url).to match(/visibility_level=10/)
 
@@ -145,7 +145,7 @@ RSpec.describe 'Dashboard > User filters projects' do
       end
 
       it 'filters any project' do
-        select_dropdown_option '#filtered-search-visibility-dropdown', 'Any'
+        select_dropdown_option '#filtered-search-visibility-dropdown > .dropdown', 'Any', '.dropdown-item'
         list = page.all('.projects-list .project-name').map(&:text)
 
         expect(list).to contain_exactly("Internal project", "Private project", "Treasure", "Victorialand")

spec/helpers/explore_helper_spec.rb

@@ -25,4 +25,33 @@ RSpec.describe ExploreHelper do
       helper.public_visibility_restricted?
     end
   end
+
+  describe '#projects_filter_items' do
+    let(:projects_filter_items) do
+      [
+        { href: '?', text: 'Any', value: 'Any' },
+        { href: '?visibility_level=0', text: 'Private', value: 'Private' },
+        { href: '?visibility_level=10', text: 'Internal', value: 'Internal' },
+        { href: '?visibility_level=20', text: 'Public', value: 'Public' }
+      ]
+    end
+
+    it 'returns correct dropdown items' do
+      expect(helper.projects_filter_items).to eq(projects_filter_items)
+    end
+  end
+
+  describe '#projects_filter_selected' do
+    context 'when visibility_level is present' do
+      it 'returns corresponding item' do
+        expect(helper.projects_filter_selected('0')).to eq('Private')
+      end
+    end
+
+    context 'when visibility_level is empty' do
+      it 'returns corresponding item' do
+        expect(helper.projects_filter_selected(nil)).to eq('Any')
+      end
+    end
+  end
 end