From b04ac817f668bcecaf496dcfe1c0e3d4b9f872ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 23 Apr 2024 23:57:44 +0200
Subject: [PATCH] Use a list of links for admin stats events

Using <h3> headings for the links had two disadvantages.

First, it was the wrong heading level to use, since there was no <h2>
tag before it.

Second, headings are supposed to be followed by content associated to
that heading; here, we had no content following the headings.

So we're using a list of links and giving it a heading. We're adding
styles so the page still looks like it used to, although these styles
are certainly asking for improvements.
---
 .../stylesheets/admin/stats/event_links.scss    | 14 ++++++++++++++
 .../admin/stats/event_links_component.html.erb  | 10 ++++------
 .../admin/stats/event_links_component.rb        | 11 +++++++++++
 config/locales/en/admin.yml                     |  1 +
 config/locales/es/admin.yml                     |  1 +
 .../admin/stats/event_links_component_spec.rb   | 17 +++++++++++++++++
 6 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/stylesheets/admin/stats/event_links.scss
 create mode 100644 spec/components/admin/stats/event_links_component_spec.rb

diff --git a/app/assets/stylesheets/admin/stats/event_links.scss b/app/assets/stylesheets/admin/stats/event_links.scss
new file mode 100644
index 000000000..5375edc41
--- /dev/null
+++ b/app/assets/stylesheets/admin/stats/event_links.scss
@@ -0,0 +1,14 @@
+.stats-event-links {
+  margin-top: $line-height;
+
+  ul {
+    @include header-font-size(h3);
+    font-weight: bold;
+    list-style-type: none;
+    margin-#{$global-left}: 0;
+
+    * + * {
+      margin-top: $line-height;
+    }
+  }
+}
diff --git a/app/components/admin/stats/event_links_component.html.erb b/app/components/admin/stats/event_links_component.html.erb
index e63a3624a..7a1181571 100644
--- a/app/components/admin/stats/event_links_component.html.erb
+++ b/app/components/admin/stats/event_links_component.html.erb
@@ -1,6 +1,4 @@
-<% event_names.each do |event| %>
-  <h3>
-    <%= link_to link_text(event),
-                graph_admin_stats_path(event: event) %>
-  </h3>
-<% end %>
+<div class="stats-event-links">
+  <h2><%= title %></h2>
+  <%= link_list(*links) %>
+</div>
diff --git a/app/components/admin/stats/event_links_component.rb b/app/components/admin/stats/event_links_component.rb
index 71d3121b9..9fcad74eb 100644
--- a/app/components/admin/stats/event_links_component.rb
+++ b/app/components/admin/stats/event_links_component.rb
@@ -1,5 +1,6 @@
 class Admin::Stats::EventLinksComponent < ApplicationComponent
   attr_reader :event_names
+  use_helpers :link_list
 
   def initialize(event_names)
     @event_names = event_names
@@ -14,4 +15,14 @@ class Admin::Stats::EventLinksComponent < ApplicationComponent
       end
       text
     end
+
+    def title
+      t("admin.stats.graph.title")
+    end
+
+    def links
+      event_names.map do |event|
+        [link_text(event), graph_admin_stats_path(event: event)]
+      end
+    end
 end
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index c1b8d651e..727be148e 100644
--- a/config/locales/en/admin.yml
+++ b/config/locales/en/admin.yml
@@ -1492,6 +1492,7 @@ en:
         visit: Visits
         level_2_user: Level 2 users
         proposal_created: Citizen proposals
+        title: Graphs
       budgets:
         no_data_before_balloting_phase: "There isn't any data to show before the balloting phase."
         title: "Participatory Budgets - Participation stats"
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index e0b9ce808..c562e63a3 100644
--- a/config/locales/es/admin.yml
+++ b/config/locales/es/admin.yml
@@ -1492,6 +1492,7 @@ es:
         visit: Visitas
         level_2_user: Usuarios nivel 2
         proposal_created: Propuestas Ciudadanas
+        title: Gráficos
       budgets:
         no_data_before_balloting_phase: "No hay datos que mostrar hasta que la fase de votación no esté abierta."
         title: "Presupuestos participativos - Estadisticas de participación"
diff --git a/spec/components/admin/stats/event_links_component_spec.rb b/spec/components/admin/stats/event_links_component_spec.rb
new file mode 100644
index 000000000..5c5728a74
--- /dev/null
+++ b/spec/components/admin/stats/event_links_component_spec.rb
@@ -0,0 +1,17 @@
+require "rails_helper"
+
+describe Admin::Stats::EventLinksComponent do
+  it "renders an <h2> heading followed by a list of links" do
+    render_inline Admin::Stats::EventLinksComponent.new(
+      %w[legislation_annotation_created legislation_answer_created]
+    )
+
+    expect(page).to have_css "h2", exact_text: "Graphs"
+    expect(page).to have_link count: 2
+
+    page.find("ul") do |list|
+      expect(list).to have_link "legislation_annotation_created"
+      expect(list).to have_link "legislation_answer_created"
+    end
+  end
+end