Add Pagy pagination to logs index

Gemfile

@@ -59,6 +59,8 @@ gem "redis"
 # Receive exceptions and configure alerts
 gem "sentry-rails"
 gem "sentry-ruby"
+# Pagination
+gem "pagy"
 
 group :development, :test do
   # Check gems for known vulnerabilities

Gemfile.lock

@@ -266,6 +266,8 @@ GEM
       childprocess (>= 0.6.3, < 5)
       iniparse (~> 1.4)
       rexml (~> 3.2)
+    pagy (5.10.1)
+      activesupport
     paper_trail (12.3.0)
       activerecord (>= 5.2)
       request_store (~> 1.1)
@@ -486,6 +488,7 @@ DEPENDENCIES
   listen (~> 3.3)
   notifications-ruby-client
   overcommit (>= 0.37.0)
+  pagy
   paper_trail
   paper_trail-globalid
   pg (~> 1.1)

app/controllers/case_logs_controller.rb

@@ -1,11 +1,13 @@
 class CaseLogsController < ApplicationController
+  include Pagy::Backend
+
   skip_before_action :verify_authenticity_token, if: :json_api_request?
   before_action :authenticate, if: :json_api_request?
   before_action :authenticate_user!, unless: :json_api_request?
   before_action :find_resource, except: %i[create index edit]
 
   def index
-    @case_logs = current_user.case_logs
+    @pagy, @case_logs = pagy(current_user.case_logs)
   end
 
   def create

app/frontend/styles/_pagination.scss

@@ -0,0 +1,134 @@
+// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss
+.govuk-pagination {
+  border-top: 1px solid $govuk-border-colour;
+  margin-top: govuk-spacing(2);
+  padding-top: govuk-spacing(2);
+  text-align: center;
+
+  @include govuk-media-query($from: tablet) {
+    // Hide whitespace between elements
+    font-size: 0;
+
+    // Trick to remove the need for floats
+    text-align: justify;
+
+    &:after {
+      content: " ";
+      display: inline-block;
+      width: 100%;
+    }
+  }
+}
+
+.govuk-pagination__list {
+  margin: 0 govuk-spacing(-3);
+  padding: 0;
+  list-style: none;
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
+
+.govuk-pagination__results {
+  @include govuk-font(19);
+  margin-top: 0;
+  margin-bottom: govuk-spacing(4);
+  padding: govuk-spacing(1) 0;
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+  }
+}
+
+.govuk-pagination__item {
+  @include govuk-font(19);
+  display: inline-block;
+  margin-bottom: govuk-spacing(4);
+
+  // Hide items on small screens
+  @include govuk-media-query($until: tablet) {
+    display: none;
+  }
+}
+
+// Only show previous, next, first, last and current items on mobile
+.govuk-pagination__item--current,
+.govuk-pagination__item--divider,
+.govuk-pagination__item--prev,
+.govuk-pagination__item--next,
+.govuk-pagination__item:nth-child(2),
+.govuk-pagination__item:nth-last-child(2) {
+  @include govuk-media-query($until: tablet) {
+    display: inline-block;
+  }
+}
+
+.govuk-pagination__item--current,
+.govuk-pagination__item--divider {
+  box-sizing: border-box;
+  font-weight: bold;
+  min-width: govuk-spacing(8);
+  min-height: govuk-spacing(4);
+  padding: govuk-spacing(2);
+  text-align: center;
+}
+
+.govuk-pagination__item--divider {
+  margin: 0 govuk-spacing(-4);
+  padding-right: 0;
+  padding-left: 0;
+  color: $govuk-secondary-text-colour;
+  pointer-events: none;
+}
+
+.govuk-pagination__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-underline;
+  box-sizing: border-box;
+  color: $govuk-link-colour;
+  display: block;
+  min-width: govuk-spacing(8);
+  min-height: govuk-spacing(4);
+  padding: govuk-spacing(2);
+  text-align: center;
+
+  .govuk-pagination__link-label {
+    @include govuk-font($size: 16, $weight: "regular");
+    display: block;
+    padding-left: 32px;
+    text-decoration: underline;
+  }
+
+  &:hover .govuk-pagination__link-label {
+    @include govuk-link-hover-decoration;
+  }
+
+  &:focus {
+    box-shadow: 0 0 $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+    text-decoration: underline;
+  }
+
+  &:hover:not(:focus) {
+    background-color: govuk-colour("light-grey", $legacy: "grey-4");
+  }
+}
+
+.govuk-pagination__icon {
+  fill: currentColor;
+}
+
+.govuk-pagination__item--prev .govuk-pagination__link,
+.govuk-pagination__item--next .govuk-pagination__link {
+  padding: govuk-spacing(2) govuk-spacing(3);
+  font-weight: bold;
+}
+
+.govuk-pagination__item--prev .govuk-pagination__icon {
+  margin-right: govuk-spacing(2);
+}
+
+.govuk-pagination__item--next .govuk-pagination__icon {
+  margin-left: govuk-spacing(2);
+}

app/frontend/styles/application.scss

@@ -22,6 +22,7 @@ $govuk-global-styles: true;
 @import "table-group";
 @import "task-list";
 @import "template";
+@import "pagination";
 @import "panel";
 
 // Turbo

app/helpers/application_helper.rb

@@ -1,4 +1,6 @@
 module ApplicationHelper
+  include Pagy::Frontend
+
   def browser_title(title, *resources)
     if resources.any? { |r| r.present? && r.errors.present? }
       "Error: #{[title, t('service_name'), 'GOV.UK'].select(&:present?).join(' - ')}"

app/views/case_logs/index.html.erb

@@ -11,4 +11,5 @@
 
 <% if @case_logs.present? %>
   <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs" } %>
+  <%== render partial: 'pagy/nav', locals: {pagy: @pagy} %>
 <% end %>

app/views/pagy/_nav.html.erb

@@ -0,0 +1,31 @@
+<% link = pagy_link_proc(pagy) -%>
+<nav class="govuk-pagination" id="pagination-label" aria-label="results navigation">
+
+  <ul class="govuk-pagination__list">
+    <li class="govuk-pagination__item govuk-pagination__item--prev">
+      <a class="govuk-pagination__link" href=<%= "/logs?page=#{pagy.prev}" %>>
+        <span class="govuk-pagination__link-title">
+          <svg class="govuk-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17">
+            <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+          </svg>Previous
+          <span class="govuk-visually-hidden">page</span>
+        </span></a>
+    </li>
+    <% (1..pagy.pages).each do |idx| %>
+      <% if pagy.page == idx %>
+        <li class="govuk-pagination__item govuk-pagination__item--current"><span class="govuk-visually-hidden">Page </span><%= idx %><span class="govuk-visually-hidden"> (current page) </span></li>
+      <% else %>
+        <li class="govuk-pagination__item"><a class="govuk-pagination__link" href=<%= "/logs?page=#{idx}" %>><span class="govuk-visually-hidden">Page </span><%= idx %></a></li>
+      <% end %>
+    <% end %>
+    <li class="govuk-pagination__item govuk-pagination__item--next">
+      <a class="govuk-pagination__link" href=<%= "/logs?page=#{pagy.next}" %>>
+        Next <span class="govuk-visually-hidden">page</span>
+        <span class="govuk-pagination__link-title">
+          <svg class="govuk-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17">
+            <path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+          </svg>
+        </span></a>
+    </li>
+  </ul>
+</nav>

config/initializers/pagy.rb

@@ -0,0 +1,235 @@
+# frozen_string_literal: true
+
+# Pagy initializer file (5.10.1)
+# Customize only what you really need and notice that the core Pagy works also without any of the following lines.
+# Should you just cherry pick part of this file, please maintain the require-order of the extras
+
+# Pagy DEFAULT Variables
+# See https://ddnexus.github.io/pagy/api/pagy#variables
+# All the Pagy::DEFAULT are set for all the Pagy instances but can be overridden per instance by just passing them to
+# Pagy.new|Pagy::Countless.new|Pagy::Calendar::*.new or any of the #pagy* controller methods
+
+# Instance variables
+# See https://ddnexus.github.io/pagy/api/pagy#instance-variables
+# Pagy::DEFAULT[:page]   = 1                                  # default
+# Pagy::DEFAULT[:items]  = 20                                 # default
+# Pagy::DEFAULT[:outset] = 0                                  # default
+
+# Other Variables
+# See https://ddnexus.github.io/pagy/api/pagy#other-variables
+# Pagy::DEFAULT[:size]       = [1,4,4,1]                       # default
+# Pagy::DEFAULT[:page_param] = :page                           # default
+# The :params can be also set as a lambda e.g ->(params){ params.exclude('useless').merge!('custom' => 'useful') }
+# Pagy::DEFAULT[:params]     = {}                              # default
+# Pagy::DEFAULT[:fragment]   = '#fragment'                     # example
+# Pagy::DEFAULT[:link_extra] = 'data-remote="true"'            # example
+# Pagy::DEFAULT[:i18n_key]   = 'pagy.item_name'                # default
+# Pagy::DEFAULT[:cycle]      = true                            # example
+
+# Extras
+# See https://ddnexus.github.io/pagy/extras
+
+# Backend Extras
+
+# Array extra: Paginate arrays efficiently, avoiding expensive array-wrapping and without overriding
+# See https://ddnexus.github.io/pagy/extras/array
+# require 'pagy/extras/array'
+
+# Calendar extra: Add pagination filtering by calendar time unit (year, quarter, month, week, day)
+# See https://ddnexus.github.io/pagy/extras/calendar
+# require 'pagy/extras/calendar'
+# Default for each unit
+# Pagy::Calendar::Year::DEFAULT[:order]     = :asc        # Time direction of pagination
+# Pagy::Calendar::Year::DEFAULT[:format]    = '%Y'        # strftime format
+#
+# Pagy::Calendar::Quarter::DEFAULT[:order]  = :asc        # Time direction of pagination
+# Pagy::Calendar::Quarter::DEFAULT[:format] = '%Y-Q%q'    # strftime format
+#
+# Pagy::Calendar::Month::DEFAULT[:order]    = :asc        # Time direction of pagination
+# Pagy::Calendar::Month::DEFAULT[:format]   = '%Y-%m'     # strftime format
+#
+# Pagy::Calendar::Week::DEFAULT[:order]     = :asc        # Time direction of pagination
+# Pagy::Calendar::Week::DEFAULT[:format]    = '%Y-%W'     # strftime format
+#
+# Pagy::Calendar::Day::DEFAULT[:order]      = :asc        # Time direction of pagination
+# Pagy::Calendar::Day::DEFAULT[:format]     = '%Y-%m-%d'  # strftime format
+#
+# Uncomment the following lines, if you need calendar localization without using the I18n extra
+# module LocalizePagyCalendar
+#   def localize(time, opts)
+#     ::I18n.l(time, **opts)
+#   end
+# end
+# Pagy::Calendar.prepend LocalizePagyCalendar
+
+# Countless extra: Paginate without any count, saving one query per rendering
+# See https://ddnexus.github.io/pagy/extras/countless
+# require 'pagy/extras/countless'
+# Pagy::DEFAULT[:countless_minimal] = false   # default (eager loading)
+
+# Elasticsearch Rails extra: Paginate `ElasticsearchRails::Results` objects
+# See https://ddnexus.github.io/pagy/extras/elasticsearch_rails
+# Default :pagy_search method: change only if you use also
+# the searchkick or meilisearch extra that defines the same
+# Pagy::DEFAULT[:elasticsearch_rails_pagy_search] = :pagy_search
+# Default original :search method called internally to do the actual search
+# Pagy::DEFAULT[:elasticsearch_rails_search] = :search
+# require 'pagy/extras/elasticsearch_rails'
+
+# Headers extra: http response headers (and other helpers) useful for API pagination
+# See http://ddnexus.github.io/pagy/extras/headers
+# require 'pagy/extras/headers'
+# Pagy::DEFAULT[:headers] = { page: 'Current-Page',
+#                            items: 'Page-Items',
+#                            count: 'Total-Count',
+#                            pages: 'Total-Pages' }     # default
+
+# Meilisearch extra: Paginate `Meilisearch` result objects
+# See https://ddnexus.github.io/pagy/extras/meilisearch
+# Default :pagy_search method: change only if you use also
+# the elasticsearch_rails or searchkick extra that define the same method
+# Pagy::DEFAULT[:meilisearch_pagy_search] = :pagy_search
+# Default original :search method called internally to do the actual search
+# Pagy::DEFAULT[:meilisearch_search] = :ms_search
+# require 'pagy/extras/meilisearch'
+
+# Metadata extra: Provides the pagination metadata to Javascript frameworks like Vue.js, react.js, etc.
+# See https://ddnexus.github.io/pagy/extras/metadata
+# you must require the shared internal extra (BEFORE the metadata extra) ONLY if you need also the :sequels
+# require 'pagy/extras/shared'
+# require 'pagy/extras/metadata'
+# For performance reasons, you should explicitly set ONLY the metadata you use in the frontend
+# Pagy::DEFAULT[:metadata] = %i[scaffold_url page prev next last]   # example
+
+# Searchkick extra: Paginate `Searchkick::Results` objects
+# See https://ddnexus.github.io/pagy/extras/searchkick
+# Default :pagy_search method: change only if you use also
+# the elasticsearch_rails or meilisearch extra that defines the same
+# DEFAULT[:searchkick_pagy_search] = :pagy_search
+# Default original :search method called internally to do the actual search
+# Pagy::DEFAULT[:searchkick_search] = :search
+# require 'pagy/extras/searchkick'
+# uncomment if you are going to use Searchkick.pagy_search
+# Searchkick.extend Pagy::Searchkick
+
+# Frontend Extras
+
+# Bootstrap extra: Add nav, nav_js and combo_nav_js helpers and templates for Bootstrap pagination
+# See https://ddnexus.github.io/pagy/extras/bootstrap
+# require 'pagy/extras/bootstrap'
+
+# Bulma extra: Add nav, nav_js and combo_nav_js helpers and templates for Bulma pagination
+# See https://ddnexus.github.io/pagy/extras/bulma
+# require 'pagy/extras/bulma'
+
+# Foundation extra: Add nav, nav_js and combo_nav_js helpers and templates for Foundation pagination
+# See https://ddnexus.github.io/pagy/extras/foundation
+# require 'pagy/extras/foundation'
+
+# Materialize extra: Add nav, nav_js and combo_nav_js helpers for Materialize pagination
+# See https://ddnexus.github.io/pagy/extras/materialize
+# require 'pagy/extras/materialize'
+
+# Navs extra: Add nav_js and combo_nav_js javascript helpers
+# Notice: the other frontend extras add their own framework-styled versions,
+# so require this extra only if you need the unstyled version
+# See https://ddnexus.github.io/pagy/extras/navs
+# require 'pagy/extras/navs'
+
+# Semantic extra: Add nav, nav_js and combo_nav_js helpers for Semantic UI pagination
+# See https://ddnexus.github.io/pagy/extras/semantic
+# require 'pagy/extras/semantic'
+
+# UIkit extra: Add nav helper and templates for UIkit pagination
+# See https://ddnexus.github.io/pagy/extras/uikit
+# require 'pagy/extras/uikit'
+
+# Multi size var used by the *_nav_js helpers
+# See https://ddnexus.github.io/pagy/extras/navs#steps
+# Pagy::DEFAULT[:steps] = { 0 => [2,3,3,2], 540 => [3,5,5,3], 720 => [5,7,7,5] }   # example
+
+# Feature Extras
+
+# Gearbox extra: Automatically change the number of items per page depending on the page number
+# See https://ddnexus.github.io/pagy/extras/gearbox
+# require 'pagy/extras/gearbox'
+# set to false only if you want to make :gearbox_extra an opt-in variable
+# Pagy::DEFAULT[:gearbox_extra] = false               # default true
+# Pagy::DEFAULT[:gearbox_items] = [15, 30, 60, 100]   # default
+
+# Items extra: Allow the client to request a custom number of items per page with an optional selector UI
+# See https://ddnexus.github.io/pagy/extras/items
+# require 'pagy/extras/items'
+# set to false only if you want to make :items_extra an opt-in variable
+# Pagy::DEFAULT[:items_extra] = false    # default true
+# Pagy::DEFAULT[:items_param] = :items   # default
+# Pagy::DEFAULT[:max_items]   = 100      # default
+
+# Overflow extra: Allow for easy handling of overflowing pages
+# See https://ddnexus.github.io/pagy/extras/overflow
+# require 'pagy/extras/overflow'
+# Pagy::DEFAULT[:overflow] = :empty_page    # default  (other options: :last_page and :exception)
+
+# Support extra: Extra support for features like: incremental, infinite, auto-scroll pagination
+# See https://ddnexus.github.io/pagy/extras/support
+# require 'pagy/extras/support'
+
+# Trim extra: Remove the page=1 param from links
+# See https://ddnexus.github.io/pagy/extras/trim
+# require 'pagy/extras/trim'
+# set to false only if you want to make :trim_extra an opt-in variable
+# Pagy::DEFAULT[:trim_extra] = false # default true
+
+# Standalone extra: Use pagy in non Rack environment/gem
+# See https://ddnexus.github.io/pagy/extras/standalone
+# require 'pagy/extras/standalone'
+# Pagy::DEFAULT[:url] = 'http://www.example.com/subdir'  # optional default
+
+# Rails
+# Enable the .js file required by the helpers that use javascript
+# (pagy*_nav_js, pagy*_combo_nav_js, and pagy_items_selector_js)
+# See https://ddnexus.github.io/pagy/extras#javascript
+
+# With the asset pipeline
+# Sprockets need to look into the pagy javascripts dir, so add it to the assets paths
+# Rails.application.config.assets.paths << Pagy.root.join('javascripts')
+
+# I18n
+
+# Pagy internal I18n: ~18x faster using ~10x less memory than the i18n gem
+# See https://ddnexus.github.io/pagy/api/frontend#i18n
+# Notice: No need to configure anything in this section if your app uses only "en"
+# or if you use the i18n extra below
+#
+# Examples:
+# load the "de" built-in locale:
+# Pagy::I18n.load(locale: 'de')
+#
+# load the "de" locale defined in the custom file at :filepath:
+# Pagy::I18n.load(locale: 'de', filepath: 'path/to/pagy-de.yml')
+#
+# load the "de", "en" and "es" built-in locales:
+# (the first passed :locale will be used also as the default_locale)
+# Pagy::I18n.load({ locale: 'de' },
+#                 { locale: 'en' },
+#                 { locale: 'es' })
+#
+# load the "en" built-in locale, a custom "es" locale,
+# and a totally custom locale complete with a custom :pluralize proc:
+# (the first passed :locale will be used also as the default_locale)
+# Pagy::I18n.load({ locale: 'en' },
+#                 { locale: 'es', filepath: 'path/to/pagy-es.yml' },
+#                 { locale: 'xyz',  # not built-in
+#                   filepath: 'path/to/pagy-xyz.yml',
+#                   pluralize: lambda{ |count| ... } )
+
+# I18n extra: uses the standard i18n gem which is ~18x slower using ~10x more memory
+# than the default pagy internal i18n (see above)
+# See https://ddnexus.github.io/pagy/extras/i18n
+# require 'pagy/extras/i18n'
+
+# Default i18n key
+# Pagy::DEFAULT[:i18n_key] = 'pagy.item_name'   # default
+
+# When you are done setting your own default freeze it, so it will not get changed accidentally
+Pagy::DEFAULT.freeze