Merge branch 'project-forks/fix-sorting-button' into 'master'

Project forks: fix sorting dropdown

See merge request gitlab-org/gitlab!75122

app/controllers/projects/forks_controller.rb

@@ -22,6 +22,8 @@ class Projects::ForksController < Projects::ApplicationController
   end
 
   def index
+    @sort = params[:sort]
+
     @total_forks_count    = project.forks.size
     @public_forks_count   = project.forks.public_only.size
     @private_forks_count  = @total_forks_count - project.forks.public_and_internal_only.size

app/helpers/sorting_helper.rb

@@ -70,6 +70,15 @@ module SortingHelper
     options
   end
 
+  def forks_sort_options_hash
+    {
+      sort_value_recently_created => sort_title_created_date,
+      sort_value_oldest_created   => sort_title_created_date,
+      sort_value_latest_activity  => sort_title_latest_activity,
+      sort_value_oldest_activity  => sort_title_latest_activity
+    }
+  end
+
   def projects_sort_option_titles
     # Only used for the project filter search bar
     projects_sort_options_hash.merge({
@@ -93,6 +102,15 @@ module SortingHelper
     }
   end
 
+  def forks_reverse_sort_options_hash
+    {
+      sort_value_recently_created => sort_value_oldest_created,
+      sort_value_oldest_created   => sort_value_recently_created,
+      sort_value_latest_activity  => sort_value_oldest_activity,
+      sort_value_oldest_activity  => sort_value_latest_activity
+    }
+  end
+
   def groups_sort_options_hash
     {
       sort_value_name             => sort_title_name,
@@ -303,6 +321,13 @@ module SortingHelper
 
     sort_direction_button(url, reverse_sort, sort_value)
   end
+
+  def forks_sort_direction_button(sort_value, without = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id])
+    reverse_sort = forks_reverse_sort_options_hash[sort_value]
+    url = page_filter_path(sort: reverse_sort, without: without)
+
+    sort_direction_button(url, reverse_sort, sort_value)
+  end
 end
 
 SortingHelper.prepend_mod_with('SortingHelper')

app/views/projects/forks/index.html.haml

+- sort_value = @sort || sort_value_recently_created
+- sort_title = forks_sort_options_hash[sort_value]
+
 .top-area
   .nav-text
     - full_count_title = "#{@public_forks_count} public, #{@internal_forks_count} internal, and #{@private_forks_count} private"
     #{pluralize(@total_forks_count, 'fork')}: #{full_count_title}
 
-  .nav-controls
-    = form_tag request.original_url, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
-      = search_field_tag :filter_projects, nil, placeholder: _('Search forks'), class: 'projects-list-filter project-filter-form-field form-control input-short',
+  .gl-display-flex.gl-sm-flex-direction-column.gl-md-align-items-center
+    = form_tag request.original_url, method: :get, class: 'project-filter-form gl-display-flex gl-mt-3 gl-md-mt-0', id: 'project-filter-form' do |f|
+      = search_field_tag :filter_projects, nil, placeholder: _('Search forks'), class: 'projects-list-filter project-filter-form-field form-control input-short gl-flex-grow-1',
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
-    .dropdown
-      %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-        %span.light= _("sort:")
-        - if @sort.present?
-          = sort_options_hash[@sort]
-        - else
-          = sort_title_recently_created
-        = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-      %ul.dropdown-menu.dropdown-menu-right
-        %li
-          - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
-          = link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do
-            = sort_title_recently_created
-          = link_to page_filter_path(sort: sort_value_oldest_created, without: excluded_filters) do
-            = sort_title_oldest_created
-          = link_to page_filter_path(sort: sort_value_recently_updated, without: excluded_filters) do
-            = sort_title_recently_updated
-          = link_to page_filter_path(sort: sort_value_oldest_updated, without: excluded_filters) do
-            = sort_title_oldest_updated
+    .dropdown.gl-display-inline.gl-md-ml-3.issue-sort-dropdown.gl-mt-3.gl-md-mt-0
+      .btn-group{ role: 'group' }
+        .btn-group{ role: 'group' }
+          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'gl-button btn btn-default' }
+            = sort_title
+            = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+            %li
+              - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
+              = sortable_item(sort_title_created_date, page_filter_path(sort: sort_value_recently_created, without: excluded_filters), sort_title)
+              = sortable_item(sort_title_latest_activity, page_filter_path(sort: sort_value_latest_activity, without: excluded_filters), sort_title)
+        = forks_sort_direction_button(sort_value)
 
     - if current_user && can?(current_user, :fork_project, @project)
       - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
-        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'btn gl-button btn-confirm' do
+        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'btn gl-button btn-confirm gl-md-ml-3' do
           = sprite_icon('fork', size: 12)
           %span= _('Fork')
       - else
-        = link_to new_project_fork_path(@project), title: _("Fork project"), class: 'btn gl-button btn-confirm' do
+        = link_to new_project_fork_path(@project), title: _("Fork project"), class: 'btn gl-button btn-confirm gl-md-ml-3 gl-mt-3 gl-md-mt-0' do
           = sprite_icon('fork', size: 12)
           %span= _('Fork')
 

locale/gitlab.pot

@@ -42224,9 +42224,6 @@ msgstr ""
 msgid "smartcn custom analyzer"
 msgstr ""
 
-msgid "sort:"
-msgstr ""
-
 msgid "source"
 msgstr ""
 

spec/helpers/sorting_helper_spec.rb

@@ -191,4 +191,77 @@ RSpec.describe SortingHelper do
       end
     end
   end
+
+  describe 'with `forks` controller' do
+    before do
+      stub_controller_path 'forks'
+    end
+
+    describe '#forks_sort_options_hash' do
+      it 'returns a hash of available sorting options' do
+        expect(forks_sort_options_hash).to include({
+          sort_value_recently_created => sort_title_created_date,
+          sort_value_oldest_created   => sort_title_created_date,
+          sort_value_latest_activity  => sort_title_latest_activity,
+          sort_value_oldest_activity  => sort_title_latest_activity
+        })
+      end
+    end
+
+    describe '#forks_reverse_sort_options_hash' do
+      context 'for each sort option' do
+        using RSpec::Parameterized::TableSyntax
+
+        where(:sort_key, :reverse_sort_title) do
+          sort_value_recently_created | sort_value_oldest_created
+          sort_value_oldest_created   | sort_value_recently_created
+          sort_value_latest_activity  | sort_value_oldest_activity
+          sort_value_oldest_activity  | sort_value_latest_activity
+        end
+
+        with_them do
+          it 'returns the correct reversed hash' do
+            reverse_hash = forks_reverse_sort_options_hash
+
+            expect(reverse_hash).to include(sort_key)
+            expect(reverse_hash[sort_key]).to eq(reverse_sort_title)
+          end
+        end
+      end
+    end
+
+    describe '#forks_sort_direction_button' do
+      context 'for each sort option' do
+        using RSpec::Parameterized::TableSyntax
+
+        sort_lowest_icon = 'sort-lowest'
+        sort_highest_icon = 'sort-highest'
+
+        where(:selected_sort, :icon) do
+          sort_value_recently_created | sort_highest_icon
+          sort_value_latest_activity  | sort_highest_icon
+          sort_value_oldest_created   | sort_lowest_icon
+          sort_value_oldest_activity  | sort_lowest_icon
+        end
+
+        with_them do
+          it 'returns the correct icon' do
+            set_sorting_url selected_sort
+
+            expect(forks_sort_direction_button(selected_sort)).to include(icon)
+          end
+        end
+      end
+
+      it 'returns the correct link to reverse the current sort option' do
+        sort_options_links = forks_reverse_sort_options_hash
+
+        sort_options_links.each do |selected_sort, reverse_sort|
+          set_sorting_url selected_sort
+
+          expect(forks_sort_direction_button(selected_sort)).to include(reverse_sort)
+        end
+      end
+    end
+  end
 end