Merge branch 'migrate-dropdown-user' into 'master'

Make sorting dropdown in user admin Pajamas compliant

See merge request gitlab-org/gitlab!80681

app/assets/stylesheets/pages/search.scss

@@ -252,7 +252,8 @@ input[type='checkbox']:hover {
 
   .btn-search,
   .btn-success,
-  .dropdown-menu-toggle {
+  .dropdown-menu-toggle,
+  .gl-new-dropdown {
     width: 100%;
     margin-top: 5px;
 
@@ -270,7 +271,8 @@ input[type='checkbox']:hover {
     }
   }
 
-  .dropdown-menu-toggle {
+  .dropdown-menu-toggle,
+  .gl-new-dropdown {
     @include media-breakpoint-up(sm) {
       width: 180px;
       margin-top: 0;

app/controllers/admin/users_controller.rb

@@ -2,6 +2,7 @@
 
 class Admin::UsersController < Admin::ApplicationController
   include RoutableActions
+  include SortingHelper
 
   before_action :user, except: [:index, :new, :create]
   before_action :check_impersonation_availability, only: :impersonate
@@ -18,7 +19,8 @@ class Admin::UsersController < Admin::ApplicationController
     @users = User.filter_items(params[:filter]).order_name_asc
     @users = @users.search(params[:search_query], with_private_emails: true) if params[:search_query].present?
     @users = users_with_included_associations(@users)
-    @users = @users.sort_by_attribute(@sort = params[:sort])
+    @sort = params[:sort].presence || sort_value_name
+    @users = @users.sort_by_attribute(@sort)
     @users = @users.page(params[:page])
     @users = @users.without_count if paginate_without_count?
   end

app/helpers/sorting_helper.rb

@@ -328,6 +328,16 @@ module SortingHelper
 
     sort_direction_button(url, reverse_sort, sort_value)
   end
+
+  def admin_users_sort_options(path_params)
+    users_sort_options_hash.map do |value, text|
+      {
+        value: value,
+        text: text,
+        href: admin_users_path(sort: value, **path_params)
+      }
+    end
+  end
 end
 
 SortingHelper.prepend_mod_with('SortingHelper')

app/views/admin/users/_users.html.haml

@@ -60,17 +60,9 @@
           = hidden_field_tag :sort, @sort
         = sprite_icon('search', css_class: 'search-icon')
         = button_tag s_('AdminUsers|Search users') if Rails.env.test?
-      .dropdown.gl-ml-3
-        = label_tag 'Sort by', nil, class: 'label-bold'
-        - toggle_text = @sort.present? ? users_sort_options_hash[@sort] : sort_title_name
-        = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
-        %ul.dropdown-menu.dropdown-menu-right
-          %li.dropdown-header
-            = s_('AdminUsers|Sort by')
-          %li
-            - users_sort_options_hash.each do |value, title|
-              = link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
-                = title
+      .dropdown.gl-sm-ml-3
+        = label_tag s_('AdminUsers|Sort by')
+        = gl_redirect_listbox_tag admin_users_sort_options(filter: params[:filter], search_query: params[:search_query]), @sort, data: { right: true }
 
 #js-admin-users-app{ data: admin_users_data_attributes(@users) }
   .gl-spinner-container.gl-my-7

spec/features/admin/users/users_spec.rb

@@ -132,7 +132,7 @@ RSpec.describe 'Admin::Users' do
       end
 
       it 'searches with respect of sorting' do
-        visit admin_users_path(sort: 'Name')
+        visit admin_users_path(sort: 'name_asc')
 
         fill_in :search_query, with: 'Foo'
         click_button('Search users')
@@ -604,8 +604,8 @@ RSpec.describe 'Admin::Users' do
 
   def sort_by(option)
     page.within('.filtered-search-block') do
-      find('.dropdown-menu-toggle').click
-      click_link option
+      find('.gl-new-dropdown').click
+      find('.gl-new-dropdown-item', text: option).click
     end
   end
 end

spec/helpers/sorting_helper_spec.rb

@@ -10,6 +10,18 @@ RSpec.describe SortingHelper do
     allow(self).to receive(:request).and_return(double(path: 'http://test.com', query_parameters: { label_name: option }))
   end
 
+  describe '#admin_users_sort_options' do
+    it 'returns correct link attributes in array' do
+      options = admin_users_sort_options(filter: 'filter', search_query: 'search')
+
+      expect(options[0][:href]).to include('filter')
+      expect(options[0][:href]).to include('search')
+      options.each do |option|
+        expect(option[:href]).to include(option[:value])
+      end
+    end
+  end
+
   describe '#issuable_sort_option_title' do
     it 'returns correct title for issuable_sort_option_overrides key' do
       expect(issuable_sort_option_title('created_asc')).to eq('Created date')