Merge branch '13536-add-sort-to-group-packages' into 'master'

Add sorting to the packages group page

Closes #13536

See merge request gitlab-org/gitlab!18062

changelogs/unreleased/13536-add-sort-to-group-packages.yml

+---
+title: Adds sorting of packages at the group level
+merge_request: 18062
+author:
+type: added

ee/app/controllers/groups/packages_controller.rb

@@ -2,16 +2,27 @@
 
 module Groups
   class PackagesController < Groups::ApplicationController
+    include SortingHelper
+
     before_action :verify_packages_enabled!
 
     def index
+      @sort = sort_value
+
       @packages = ::Packages::GroupPackagesFinder.new(current_user, group)
         .execute
+        .sort_by_attribute(@sort)
         .page(params[:page])
     end
 
     private
 
+    def sort_value
+      return params[:sort] if packages_sort_options_hash.key?(params[:sort])
+
+      sort_value_recently_created
+    end
+
     def verify_packages_enabled!
       render_404 unless group.packages_feature_available?
     end

ee/app/helpers/ee/sorting_helper.rb

@@ -72,8 +72,10 @@ module EE
         sort_value_name_desc         => sort_title_name,
         sort_value_version_desc      => sort_title_version,
         sort_value_version_asc       => sort_title_version,
-        sort_value_type_desc         => sort_value_type_desc,
-        sort_value_type_asc          => sort_title_type
+        sort_value_type_desc         => sort_title_type,
+        sort_value_type_asc          => sort_title_type,
+        sort_value_project_name_desc => sort_title_project_name,
+        sort_value_project_name_asc  => sort_title_project_name
       }
     end
 
@@ -86,12 +88,14 @@ module EE
         sort_value_version_desc      => sort_value_version_asc,
         sort_value_version_asc       => sort_value_version_desc,
         sort_value_type_desc         => sort_value_type_asc,
-        sort_value_type_asc          => sort_value_type_desc
+        sort_value_type_asc          => sort_value_type_desc,
+        sort_value_project_name_desc => sort_value_project_name_asc,
+        sort_value_project_name_asc  => sort_value_project_name_desc
       }
     end
 
     def packages_sort_option_title(sort_value)
-      packages_sort_options_hash[sort_value]
+      packages_sort_options_hash[sort_value] || sort_title_created_date
     end
 
     def packages_sort_direction_button(sort_value)
@@ -132,6 +136,10 @@ module EE
       s_('SortOptions|Weight')
     end
 
+    def sort_title_project_name
+      s_('SortOptions|Project')
+    end
+
     def sort_title_version
       s_('SortOptions|Version')
     end
@@ -164,6 +172,14 @@ module EE
       'weight'
     end
 
+    def sort_value_project_name_asc
+      'project_name_asc'
+    end
+
+    def sort_value_project_name_desc
+      'project_name_desc'
+    end
+
     def sort_value_version_asc
       'version_asc'
     end

ee/app/models/packages/package.rb

@@ -36,6 +36,8 @@ class Packages::Package < ApplicationRecord
   scope :order_version_desc, -> { reorder('version DESC') }
   scope :order_type, -> { reorder('package_type ASC') }
   scope :order_type_desc, -> { reorder('package_type DESC') }
+  scope :order_project_name, -> { joins(:project).reorder('projects.name ASC') }
+  scope :order_project_name_desc, -> { joins(:project).reorder('projects.name DESC') }
 
   def self.for_projects(projects)
     return none unless projects.any?
@@ -66,6 +68,8 @@ class Packages::Package < ApplicationRecord
     when 'version_desc' then order_version_desc
     when 'type_asc' then order_type
     when 'type_desc' then order_type_desc
+    when 'project_name_asc' then order_project_name
+    when 'project_name_desc' then order_project_name_desc
     else
       order_created_desc
     end

ee/app/views/groups/packages/index.html.haml

 - page_title _("Packages")
+- sort_value = @sort
+- sort_title = packages_sort_option_title(sort_value)
 
 - if @packages.any?
+  .d-flex.justify-content-end
+    .dropdown.inline.prepend-top-default.append-bottom-default.package-sort-dropdown
+      .btn-group{ role: 'group' }
+        .btn-group{ role: 'group' }
+          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static', 'qa-selector': 'sort-dropdown-button' }, class: 'btn btn-default' }
+            = sort_title
+            = icon('chevron-down')
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+            %li
+              = sortable_item(sort_title_created_date,      package_sort_path(sort: sort_value_recently_created),  sort_title)
+              = sortable_item(sort_title_name,              package_sort_path(sort: sort_value_name_desc),         sort_title)
+              = sortable_item(sort_title_project_name,      package_sort_path(sort: sort_value_project_name_desc), sort_title)
+              = sortable_item(sort_title_version,           package_sort_path(sort: sort_value_version_desc),      sort_title)
+              = sortable_item(sort_title_type,              package_sort_path(sort: sort_value_type_desc),         sort_title)
+        = packages_sort_direction_button(sort_value)
+
   .table-holder
-    .gl-responsive-table-row.table-row-header{ role: 'row' }
+    .gl-responsive-table-row.table-row-header.bg-secondary-50.px-2.border-top{ role: 'row' }
       .table-section.section-30{ role: 'rowheader' }
         = _('Name')
       .table-section.section-20{ role: 'rowheader' }
@@ -14,7 +32,7 @@
       .table-section.section-20{ role: 'rowheader' }
         = _('Created')
     - @packages.each do |package|
-      .gl-responsive-table-row
+      .gl-responsive-table-row{ data: { 'qa-selector': 'package-row' } }
         .table-section.section-30
           .table-mobile-header{ role: "rowheader" }= _("Name")
           .table-mobile-content.flex-truncate-parent

ee/spec/features/groups/packages_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 describe 'Group Packages' do
+  include SortingHelper
+
   set(:user) { create(:user) }
   set(:group) { create(:group) }
   set(:project) { create(:project, group: group) }
@@ -56,7 +58,140 @@ describe 'Group Packages' do
     end
   end
 
+  context 'sorting when there are packages' do
+    let!(:second_project) { create(:project, name: 'second-project', group: group) }
+
+    let!(:aaa_package) do
+      create(
+        :maven_package,
+        name: 'aaa/company/app/my-app',
+        version: '1.0-SNAPSHOT',
+        project: project)
+    end
+
+    let!(:bbb_package) do
+      create(
+        :maven_package,
+        name: 'bbb/company/app/my-app',
+        version: '1.1-SNAPSHOT',
+        project: second_project)
+    end
+
+    it 'sorts by created date descending by default' do
+      visit group_packages_path(group)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_created_date)
+      expect(first_package).to include(bbb_package.name)
+      expect(last_package).to include(aaa_package.name)
+    end
+
+    it 'handles an invalid param' do
+      visit group_packages_path(group, sort: 'garbage') # bad sort param
+
+      expect(sort_dropdown_button_text).to eq(sort_title_created_date)
+      expect(first_package).to include(bbb_package.name)
+      expect(last_package).to include(aaa_package.name)
+    end
+
+    it 'sorts by created date descending' do
+      visit group_packages_path(group, sort: sort_value_recently_created)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_created_date)
+      expect(first_package).to include(bbb_package.name)
+      expect(last_package).to include(aaa_package.name)
+    end
+
+    it 'sorts by created date ascending' do
+      visit group_packages_path(group, sort: sort_value_oldest_created)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_created_date)
+      expect(first_package).to include(aaa_package.name)
+      expect(last_package).to include(bbb_package.name)
+    end
+
+    it 'sorts by name descending' do
+      visit group_packages_path(group, sort: sort_value_name_desc)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_name)
+      expect(first_package).to include(bbb_package.name)
+      expect(last_package).to include(aaa_package.name)
+    end
+
+    it 'sorts by name ascending' do
+      visit group_packages_path(group, sort: sort_value_name)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_name)
+      expect(first_package).to include(aaa_package.name)
+      expect(last_package).to include(bbb_package.name)
+    end
+
+    it 'sorts by version descending' do
+      visit group_packages_path(group, sort: sort_value_version_desc)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_version)
+      expect(first_package).to include(bbb_package.name)
+      expect(last_package).to include(aaa_package.name)
+    end
+
+    it 'sorts by version ascending' do
+      visit group_packages_path(group, sort: sort_value_version_asc)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_version)
+      expect(first_package).to include(aaa_package.name)
+      expect(last_package).to include(bbb_package.name)
+    end
+
+    it 'sorts by project descending' do
+      visit group_packages_path(group, sort: sort_value_project_name_desc)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_project_name)
+      expect(first_package).to include(bbb_package.name)
+      expect(last_package).to include(aaa_package.name)
+    end
+
+    it 'sorts by project ascending' do
+      visit group_packages_path(group, sort: sort_value_project_name_asc)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_project_name)
+      expect(first_package).to include(aaa_package.name)
+      expect(last_package).to include(bbb_package.name)
+    end
+  end
+
+  context 'sorting different types of packages' do
+    let!(:maven_package) { create(:maven_package, project: project) }
+    let!(:npm_package) { create(:npm_package, project: project) }
+
+    it 'sorts by type descending' do
+      visit group_packages_path(group, sort: sort_value_type_desc)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_type)
+      expect(first_package).to include(npm_package.name)
+      expect(last_package).to include(maven_package.name)
+    end
+
+    it 'sorts by type ascending' do
+      visit group_packages_path(group, sort: sort_value_type_asc)
+
+      expect(sort_dropdown_button_text).to eq(sort_title_type)
+      expect(first_package).to include(maven_package.name)
+      expect(last_package).to include(npm_package.name)
+    end
+  end
+
   def visit_group_packages
     visit group_packages_path(group)
   end
+
+  def first_package
+    page.all('[data-qa-selector="package-row"]').first.text
+  end
+
+  def last_package
+    page.all('[data-qa-selector="package-row"]').last.text
+  end
+
+  def sort_dropdown_button_text
+    page.find('[data-qa-selector="sort-dropdown-button"]').text
+  end
 end

locale/gitlab.pot

@@ -15268,6 +15268,9 @@ msgstr ""
 msgid "SortOptions|Priority"
 msgstr ""
 
+msgid "SortOptions|Project"
+msgstr ""
+
 msgid "SortOptions|Recent last activity"
 msgstr ""