Use order links in moderation section

Using order links in this case causes an unusual interface, where we
show filter links, then information about the number of results, and
then order links.

Whether or not this makes sense needs to be confirmed with usability
tests. In any case, this is still way better than using `<select>`
fields which automatically change to a new page, since they cause
problems to keyboard users, are harder to select for touchscreen users,
might confuse screen reader users who will notice a form but no way to
submit it, and are not elements we generally use to let users choose the
order of the records.

For a more detailed explanation of these issues, check the commit
message in the commit "Use order links to sort comments and topics"
(just a few commits ago).

app/assets/stylesheets/admin.scss

@@ -298,7 +298,8 @@ $table-header:   #ecf1f6;
     margin-bottom: 0;
   }
 
-  .menu.simple {
+  .menu.simple,
+  .order-links {
     margin-bottom: $line-height / 2;
 
     h2 {
@@ -313,6 +314,10 @@ $table-header:   #ecf1f6;
     }
   }
 
+  .order-links {
+    margin-bottom: $line-height;
+  }
+
   .tabs-panel {
     padding-left: 0;
     padding-right: 0;

app/components/moderation/shared/index_component.html.erb

@@ -3,10 +3,10 @@
 <%= render "shared/filter_subnav", i18n_namespace: "moderation.#{i18n_namespace}.index" %>
 
 <h3 class="inline-block"><%= page_entries_info records %></h3>
-<div class="float-right">
-  <%= t("moderation.#{i18n_namespace}.index.order") %>
-  <%= render "shared/order_selector", i18n_namespace: "moderation.#{i18n_namespace}.index" %>
-</div>
+
+<% if records.any? %>
+  <%= render "shared/order_links", i18n_namespace: "moderation.#{i18n_namespace}.index" %>
+<% end %>
 
 <%= form_tag form_path, method: :put do %>
   <p class="float-left js-check">

config/i18n-tasks.yml

@@ -170,16 +170,16 @@ ignore_unused:
   - "admin.dashboard.actions.index.default.*"
   - "admin.users.index.filter*"
   - "moderation.comments.index.filter*"
-  - "moderation.comments.index.order*"
+  - "moderation.comments.index.orders.*"
   - "moderation.debates.index.filter*"
   - "moderation.proposals.index.filter*"
-  - "moderation.proposals.index.order*"
+  - "moderation.proposals.index.orders.*"
   - "moderation.debates.index.filter*"
-  - "moderation.debates.index.order*"
+  - "moderation.debates.index.orders.*"
   - "moderation.budget_investments.index.filter*"
-  - "moderation.budget_investments.index.order*"
+  - "moderation.budget_investments.index.orders.*"
   - "moderation.proposal_notifications.index.filter*"
-  - "moderation.proposal_notifications.index.order*"
+  - "moderation.proposal_notifications.index.orders.*"
   - "valuation.budgets.index.filter*"
   - "valuation.budget_investments.index.filter*"
   - "users.show.filters.*"

config/locales/en/moderation.yml

@@ -14,7 +14,6 @@ en:
           moderate: Moderate
         hide: Hide comments
         ignore_flags: Mark as viewed
-        order: Order
         orders:
           flags: Most flagged
           newest: Newest
@@ -36,7 +35,6 @@ en:
           moderate: Moderate
         hide: Hide debates
         ignore_flags: Mark as viewed
-        order: Order
         orders:
           created_at: Newest
           flags: Most flagged
@@ -64,7 +62,6 @@ en:
           proposal: Proposal
         hide: Hide proposals
         ignore_flags: Mark as viewed
-        order: Order by
         orders:
           created_at: Most recent
           flags: Most flagged
@@ -83,7 +80,6 @@ en:
           budget_investment: Budget investment
         hide: Hide budget investments
         ignore_flags: Mark as viewed
-        order: Order by
         orders:
           created_at: Most recent
           flags: Most flagged
@@ -102,7 +98,6 @@ en:
           proposal_notification: Proposal notification
         hide: Hide proposals
         ignore_flags: Mark as viewed
-        order: Order by
         orders:
           created_at: Most recent
           moderated: Moderated

config/locales/es/moderation.yml

@@ -14,7 +14,6 @@ es:
           moderate: Moderar
         hide: Ocultar comentarios
         ignore_flags: Marcar como revisados
-        order: Orden
         orders:
           flags: Más denunciados
           newest: Más nuevos
@@ -36,7 +35,6 @@ es:
           moderate: Moderar
         hide: Ocultar debates
         ignore_flags: Marcar como revisados
-        order: Orden
         orders:
           created_at: Más nuevos
           flags: Más denunciados
@@ -64,7 +62,6 @@ es:
           proposal: Propuesta
         hide: Ocultar Propuestas
         ignore_flags: Marcar como revisadas
-        order: Ordenar por
         orders:
           created_at: Más recientes
           flags: Más denunciadas
@@ -83,7 +80,6 @@ es:
           budget_investment: Proyecto de gasto
         hide: Ocultar proyectos de gasto
         ignore_flags: Marcar como revisados
-        order: Ordenar por
         orders:
           created_at: Más recientes
           flags: Más denunciadas
@@ -102,7 +98,6 @@ es:
           proposal_notification: Notificación de propuesta
         hide: Ocultar notificaciones
         ignore_flags: Marcar como revisadas
-        order: Ordenar por
         orders:
           created_at: Más recientes
           moderated: Moderadas

spec/system/moderation/budget_investments_spec.rb

@@ -126,7 +126,8 @@ describe "Moderate budget investments" do
 
         accept_confirm { click_button "Mark as viewed" }
 
-        expect(page).to have_selector(".js-order-selector[data-order='created_at']")
+        expect(page).to have_link "Most recent", class: "is-active"
+        expect(page).to have_link "Most flagged"
 
         expect(page).to have_current_path(/filter=all/)
         expect(page).to have_current_path(/page=2/)

spec/system/moderation/comments_spec.rb

@@ -144,7 +144,8 @@ describe "Moderate comments" do
 
         accept_confirm { click_button "Mark as viewed" }
 
-        expect(page).to have_selector(".js-order-selector[data-order='newest']")
+        expect(page).to have_link "Newest", class: "is-active"
+        expect(page).to have_link "Most flagged"
 
         expect(page).to have_current_path(/filter=all/)
         expect(page).to have_current_path(/page=2/)

spec/system/moderation/debates_spec.rb

@@ -117,7 +117,8 @@ describe "Moderate debates" do
 
         accept_confirm { click_button "Mark as viewed" }
 
-        expect(page).to have_selector(".js-order-selector[data-order='created_at']")
+        expect(page).to have_link "Newest", class: "is-active"
+        expect(page).to have_link "Most flagged"
 
         expect(page).to have_current_path(/filter=all/)
         expect(page).to have_current_path(/page=2/)

spec/system/moderation/proposal_notifications_spec.rb

@@ -124,7 +124,8 @@ describe "Moderate proposal notifications" do
 
         accept_confirm { click_button "Mark as viewed" }
 
-        expect(page).to have_selector(".js-order-selector[data-order='created_at']")
+        expect(page).to have_link "Most recent", class: "is-active"
+        expect(page).to have_link "Moderated"
 
         expect(page).to have_current_path(/filter=all/)
         expect(page).to have_current_path(/page=2/)

spec/system/moderation/proposals_spec.rb

@@ -116,7 +116,8 @@ describe "Moderate proposals" do
 
         accept_confirm { click_button "Mark as viewed" }
 
-        expect(page).to have_selector(".js-order-selector[data-order='created_at']")
+        expect(page).to have_link "Most recent", class: "is-active"
+        expect(page).to have_link "Most flagged"
 
         expect(page).to have_current_path(/filter=all/)
         expect(page).to have_current_path(/page=2/)