From 84c6eeae9c693e8a95e36d78f695a07f007cf98f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 1 Dec 2021 20:21:56 +0100
Subject: [PATCH] Use headers and actions in users moderation table

Having proper headers makes it more accessible.

We're also using the table actions component because we're going to add
another action. Since table actions use a flex layout, we have to tweak
the styles a little bit. For that, I'm adding a <main> element which
will make it possible to style just this table while also providing an
extra shortcut for people using screen readers.
---
 app/assets/stylesheets/application.scss       |  1 +
 .../stylesheets/moderation/users/index.scss   | 10 +++
 app/views/moderation/users/index.html.erb     | 68 ++++++++++---------
 3 files changed, 48 insertions(+), 31 deletions(-)
 create mode 100644 app/assets/stylesheets/moderation/users/index.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 91837158a..74675f1c3 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -40,6 +40,7 @@
 @import "debates/**/*";
 @import "layout/**/*";
 @import "machine_learning/**/*";
+@import "moderation/**/*";
 @import "proposals/**/*";
 @import "relationable/**/*";
 @import "sdg/**/*";
diff --git a/app/assets/stylesheets/moderation/users/index.scss b/app/assets/stylesheets/moderation/users/index.scss
new file mode 100644
index 000000000..aab07125c
--- /dev/null
+++ b/app/assets/stylesheets/moderation/users/index.scss
@@ -0,0 +1,10 @@
+.moderation-users-index {
+  th:last-child,
+  td:last-child {
+    text-align: $global-right;
+  }
+
+  .table-actions {
+    justify-content: flex-end;
+  }
+}
diff --git a/app/views/moderation/users/index.html.erb b/app/views/moderation/users/index.html.erb
index 87b5b2dd5..e1492c7bb 100644
--- a/app/views/moderation/users/index.html.erb
+++ b/app/views/moderation/users/index.html.erb
@@ -1,35 +1,41 @@
-<h2><%= t("moderation.users.index.title") %></h2>
+<main class="moderation-users-index">
+  <h2><%= t("moderation.users.index.title") %></h2>
 
-<%= render Admin::SearchComponent.new(label: t("moderation.users.index.search_placeholder")) %>
+  <%= render Admin::SearchComponent.new(label: t("moderation.users.index.search_placeholder")) %>
 
-<% if @users.present? %>
-  <h3><%= page_entries_info @users %></h3>
-<% end %>
+  <% if @users.present? %>
+    <h3><%= page_entries_info @users %></h3>
 
-<table id="moderation_users">
-  <tbody>
-    <% @users.each do |user| %>
-      <tr>
-        <td>
-          <%= user.name %>
-        </td>
-        <td class="text-right">
-          <% if user.hidden? %>
-            <%= t("moderation.users.index.hidden") %>
-          <% else %>
-            <%= render Admin::ActionComponent.new(
-              :hide_in_moderation_screen,
-              user,
-              text: t("moderation.users.index.hide"),
-              method: :put,
-              "aria-label": true,
-              class: "button hollow alert"
-            ) %>
-          <% end %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+    <table id="moderation_users" class="moderation-users">
+      <thead>
+        <th><%= t("admin.hidden_users.index.user") %></th>
+        <th><%= t("admin.actions.actions") %></th>
+      </thead>
+      <tbody>
+        <% @users.each do |user| %>
+          <tr>
+            <td>
+              <%= user.name %>
+            </td>
+            <td>
+              <% if user.hidden? %>
+                <%= t("moderation.users.index.hidden") %>
+              <% else %>
+                <%= render Admin::TableActionsComponent.new(user, actions: []) do |actions| %>
+                  <%= actions.action(
+                    :hide_in_moderation_screen,
+                    text: t("moderation.users.index.hide"),
+                    method: :put,
+                    class: "button hollow alert"
+                  ) %>
+                <% end %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
 
-<%= paginate @users %>
+    <%= paginate @users %>
+  <% end %>
+</main>