From 227a5868b841274f664017192a9cc6ea817a60ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 27 Jun 2021 20:08:50 +0200
Subject: [PATCH] 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                      |  7 ++++++-
 .../moderation/shared/index_component.html.erb         |  8 ++++----
 config/i18n-tasks.yml                                  | 10 +++++-----
 config/locales/en/moderation.yml                       |  5 -----
 config/locales/es/moderation.yml                       |  5 -----
 spec/system/moderation/budget_investments_spec.rb      |  3 ++-
 spec/system/moderation/comments_spec.rb                |  3 ++-
 spec/system/moderation/debates_spec.rb                 |  3 ++-
 spec/system/moderation/proposal_notifications_spec.rb  |  3 ++-
 spec/system/moderation/proposals_spec.rb               |  3 ++-
 10 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 3aa10bb5c..c8e05d7d6 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/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;
diff --git a/app/components/moderation/shared/index_component.html.erb b/app/components/moderation/shared/index_component.html.erb
index ca984eaa9..56f1ce090 100644
--- a/app/components/moderation/shared/index_component.html.erb
+++ b/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">
diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml
index aa6a54f0a..28c779b6f 100644
--- a/config/i18n-tasks.yml
+++ b/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.*"
diff --git a/config/locales/en/moderation.yml b/config/locales/en/moderation.yml
index 99013cba9..81dc99a41 100644
--- a/config/locales/en/moderation.yml
+++ b/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
diff --git a/config/locales/es/moderation.yml b/config/locales/es/moderation.yml
index cc17634f6..295f98bd9 100644
--- a/config/locales/es/moderation.yml
+++ b/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
diff --git a/spec/system/moderation/budget_investments_spec.rb b/spec/system/moderation/budget_investments_spec.rb
index 32eae4501..a10e147a9 100644
--- a/spec/system/moderation/budget_investments_spec.rb
+++ b/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/)
diff --git a/spec/system/moderation/comments_spec.rb b/spec/system/moderation/comments_spec.rb
index d523a913d..9c5f02bc1 100644
--- a/spec/system/moderation/comments_spec.rb
+++ b/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/)
diff --git a/spec/system/moderation/debates_spec.rb b/spec/system/moderation/debates_spec.rb
index fa9dcf74d..61d584639 100644
--- a/spec/system/moderation/debates_spec.rb
+++ b/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/)
diff --git a/spec/system/moderation/proposal_notifications_spec.rb b/spec/system/moderation/proposal_notifications_spec.rb
index a73f794ac..28858ccaa 100644
--- a/spec/system/moderation/proposal_notifications_spec.rb
+++ b/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/)
diff --git a/spec/system/moderation/proposals_spec.rb b/spec/system/moderation/proposals_spec.rb
index cfc37d07a..56b082f06 100644
--- a/spec/system/moderation/proposals_spec.rb
+++ b/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/)