Make the shared/groups/_dropdown Pajamas compliant

Changelog: changed

app/views/shared/groups/_dropdown.html.haml

 - options_hash = local_assigns.fetch(:options_hash, groups_sort_options_hash)
-- show_archive_options = local_assigns.fetch(:show_archive_options, false)
+- groups_sort_options = options_hash.map { |value, title| { value: value, text: title, href: filter_groups_path(sort: value) } }
 
-.dropdown.inline.js-group-filter-dropdown-wrap.gl-mr-3
-  %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-    %span.dropdown-label
-      = options_hash[project_list_sort_by]
-    = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-    %li.dropdown-header
-      = _("Sort by")
-    - options_hash.each do |value, title|
-      %li.js-filter-sort-order
-        = link_to filter_groups_path(sort: value), class: ("is-active" if project_list_sort_by == value) do
-          = title
-    - if show_archive_options
-      %li.divider
-      %li.js-filter-archived-projects
-        = link_to filter_groups_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
-          = _("Hide archived projects")
-      %li.js-filter-archived-projects
-        = link_to filter_groups_path(archived: true), class: ("is-active" if Gitlab::Utils.to_boolean(params[:archived])) do
-          = _("Show archived projects")
-      %li.js-filter-archived-projects
-        = link_to filter_groups_path(archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
-          = _("Show archived projects only")
+%div{ data: { testid: 'group_sort_by_dropdown' } }
+  = gl_redirect_listbox_tag groups_sort_options, project_list_sort_by, data: { right: true }

spec/features/projects/user_sorts_projects_spec.rb

@@ -14,25 +14,29 @@ RSpec.describe 'User sorts projects and order persists' do
     it "is set on the dashboard_projects_path" do
       visit(dashboard_projects_path)
 
-      expect(find('.dropdown-menu a.is-active', text: project_paths_label)).to have_content(project_paths_label)
+      expect(find('#sort-projects-dropdown')).to have_content(project_paths_label)
     end
 
     it "is set on the explore_projects_path" do
       visit(explore_projects_path)
 
-      expect(find('.dropdown-menu a.is-active', text: project_paths_label)).to have_content(project_paths_label)
+      expect(find('#sort-projects-dropdown')).to have_content(project_paths_label)
     end
 
     it "is set on the group_canonical_path" do
       visit(group_canonical_path(group))
 
-      expect(find('.dropdown-menu a.is-active', text: group_paths_label)).to have_content(group_paths_label)
+      within '[data-testid=group_sort_by_dropdown]' do
+        expect(find('.gl-dropdown-toggle')).to have_content(group_paths_label)
+      end
     end
 
     it "is set on the details_group_path" do
       visit(details_group_path(group))
 
-      expect(find('.dropdown-menu a.is-active', text: group_paths_label)).to have_content(group_paths_label)
+      within '[data-testid=group_sort_by_dropdown]' do
+        expect(find('.gl-dropdown-toggle')).to have_content(group_paths_label)
+      end
     end
   end
 
@@ -58,23 +62,27 @@ RSpec.describe 'User sorts projects and order persists' do
     it_behaves_like "sort order persists across all views", "Name", "Name"
   end
 
-  context 'from group homepage' do
+  context 'from group homepage', :js do
     before do
       sign_in(user)
       visit(group_canonical_path(group))
-      find('button.dropdown-menu-toggle').click
-      first(:link, 'Last created').click
+      within '[data-testid=group_sort_by_dropdown]' do
+        find('button.gl-dropdown-toggle').click
+        first(:button, 'Last created').click
+      end
     end
 
     it_behaves_like "sort order persists across all views", "Created date", "Last created"
   end
 
-  context 'from group details' do
+  context 'from group details', :js do
     before do
       sign_in(user)
       visit(details_group_path(group))
-      find('button.dropdown-menu-toggle').click
-      first(:link, 'Most stars').click
+      within '[data-testid=group_sort_by_dropdown]' do
+        find('button.gl-dropdown-toggle').click
+        first(:button, 'Most stars').click
+      end
     end
 
     it_behaves_like "sort order persists across all views", "Stars", "Most stars"

spec/views/shared/groups/_dropdown.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'shared/groups/_dropdown.html.haml' do
+  describe 'render' do
+    describe 'when a sort option is not selected' do
+      it 'renders a default sort option' do
+        render 'shared/groups/dropdown'
+
+        expect(rendered).to have_content 'Last created'
+      end
+    end
+
+    describe 'when a sort option is selected' do
+      before do
+        assign(:sort, 'name_desc')
+
+        render 'shared/groups/dropdown'
+      end
+
+      it 'renders the selected sort option' do
+        expect(rendered).to have_content 'Name, descending'
+      end
+    end
+  end
+end