Allow sorting gems alphabetically in the Profile show page

app/assets/stylesheets/modules/org.css

@@ -194,9 +194,27 @@
     text-align: right; } }
 @media (min-width: 780px) {
   .profile__downloads-wrap {
-    padding-top: 32px; } }
+    padding-top: 32px;
+  }
+  .profile__downloads-wrap form {
+    align-items: flex-end;
+  }
+}
+
+.profile__downloads-wrap form {
+  display: flex;
+  flex-direction: column;
+}
 
+.profile__downloads-wrap form label:first-child,
+.profile__downloads-wrap form select{
+  margin-bottom: 0.5rem;
+}
 
+.profile__downloads-wrap form select,
+.profile__downloads-wrap form button {
+  width: fit-content;
+}
 
 /* Dashboard Gems and Subscriptions */
 

app/controllers/profiles_controller.rb

@@ -9,9 +9,13 @@ class ProfilesController < ApplicationController
 
   def show
     @user           = User.find_by_slug!(params[:id])
-    rubygems        = @user.rubygems_downloaded
-    @rubygems       = rubygems.slice!(0, 10)
-    @extra_rubygems = rubygems
+    rubygems        = @user.rubygems
+    @rubygems       = case params[:sort_by]
+                      when "name"
+                        rubygems.reorder(:name)
+                      else
+                        rubygems.by_downloads
+                      end
   end
 
   def me

app/javascript/controllers/gem_sort_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="gem-sort"
+export default class extends Controller {
+  static targets = ["form", "select"]
+  connect() {
+    this.selectTarget.onchange = () => this.formSubmit();
+  }
+
+  formSubmit = () => {
+    this.formTarget.submit();
+  }
+}

app/views/profiles/_sort_form.html.erb

@@ -0,0 +1,23 @@
+<%=
+  form_with(
+    data: {
+      "controller": "gem-sort",
+      "gem-sort-target": "form",
+    },
+    method: :get,
+    url: profile_path(@user&.handle)
+  ) do |f|
+%>
+  <%= f.label :sort_by, class: "t-text--s"%>
+  <%=
+    select_tag :sort_by,
+               options_for_select(
+                 [
+                   ["Name", "name"],
+                   ["Downloads", "downloads"]
+                 ],
+                 params[:sort_by] || "downloads"
+               ),
+               data: { "gem-sort-target" => "select" }
+  %>
+<% end %>

app/views/profiles/show.html.erb

@@ -113,6 +113,8 @@
       <h2 id="downloads_count" class="gem__downloads">
         <%= number_with_delimiter(@user.total_downloads_count) %>
       </h2>
+
+      <%= render partial: "sort_form" %>
     </div>
   </header>
 <% end %>
@@ -123,7 +125,7 @@
       <%=
         render(
           partial: 'rubygem',
-          collection: @rubygems + @extra_rubygems,
+          collection: @rubygems,
           locals: {graph: false}
         )
       %>

test/integration/profile_test.rb

@@ -177,4 +177,19 @@ def sign_out
     assert page.has_content? "special note"
     assert page.has_content? "request note"
   end
+
+  test "sort gems alphabetically in profile" do
+    alphabetical_first = FactoryBot.create(:rubygem, name: "AGem", owners: [@user], downloads: 1)
+    alphabetical_last = FactoryBot.create(:rubygem, name: "ZGem", owners: [@user], downloads: 999)
+
+    visit profile_path(@user.handle)
+    dropdown = find(:element, "data-gem-sort-target": "select")
+    form = find(:element, "data-gem-sort-target": "form")
+    dropdown.select("Name")
+    # Submit form without button
+    Capybara::RackTest::Form.new(form.base.driver, form.native).submit({})
+    rubygem_links = page.all(:element, "a", class: "gems__gem__name")
+    assert rubygem_links.first.text == alphabetical_first.name
+    assert rubygem_links.last.text == alphabetical_last.name
+  end
 end