Feature: Use new pagination component on project solutions page

Because:
- We introduced a new and improved pagination component for admin v2.

This commit:
- Replaces the project submission pagination markup with our new pagination component
- Remove pagy.css - we're no longer using any of pagy's styles and don't need to override them anymore.
- Bumps to pagy 9

Gemfile

@@ -30,7 +30,7 @@ gem 'octokit', '~> 8.1'
 gem 'omniauth-github', '~> 2.0.1'
 gem 'omniauth-google-oauth2', '~> 1.1.1'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'
-gem 'pagy', '~> 6.2'
+gem 'pagy', '~> 9.0'
 gem 'pg', '~> 1.5'
 gem 'propshaft', '~> 0.9'
 gem 'public_activity', '~> 3.0'

Gemfile.lock

@@ -344,7 +344,7 @@ GEM
       actionpack (>= 4.2)
       omniauth (~> 2.0)
     orm_adapter (0.5.0)
-    pagy (6.5.0)
+    pagy (9.0.5)
     parallel (1.26.1)
     parallel_tests (4.7.1)
       parallel
@@ -631,7 +631,7 @@ DEPENDENCIES
   omniauth-github (~> 2.0.1)
   omniauth-google-oauth2 (~> 1.1.1)
   omniauth-rails_csrf_protection (~> 1.0)
-  pagy (~> 6.2)
+  pagy (~> 9.0)
   parallel_tests (~> 4.7)
   pg (~> 1.5)
   propshaft (~> 0.9)

app/assets/stylesheets/application.tailwind.css

@@ -9,7 +9,6 @@
 @import './custom_styles/lesson-content.css';
 @import './custom_styles/lesson-notes.css';
 @import './custom_styles/prism-theme.css';
-@import './custom_styles/pagy.css';
 @import './custom_styles/animations.css';
 @import './custom_styles/static-pages.css';
 @import './custom_styles/charts.css';

app/components/admin/pagination_component.html.erb → app/components/pagination_component.html.erb

@@ -1,4 +1,4 @@
-<nav class="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 py-3" aria-label="Pagination">
+<nav class="flex items-center justify-between py-3" aria-label="Pagination">
   <div class="hidden sm:block">
     <p class="text-sm text-gray-700 dark:text-gray-300">
       Showing

app/components/admin/pagination_component.rb → app/components/pagination_component.rb

@@ -1,4 +1,4 @@
-class Admin::PaginationComponent < ApplicationComponent
+class PaginationComponent < ApplicationComponent
   def initialize(pagy:, resource_name:)
     @pagy = pagy
     @resource_name = resource_name

app/views/admin/announcements/index.html.erb

@@ -69,7 +69,7 @@
             </tbody>
           </table>
 
-          <%= render Admin::PaginationComponent.new(pagy: @pagy, resource_name: 'announcements') %>
+          <%= render PaginationComponent.new(pagy: @pagy, resource_name: 'announcements') %>
         </div>
       </div>
 

app/views/admin/flags/index.html.erb

@@ -1,5 +1,5 @@
-<div class="max-w-5xl w-full mx-auto">
-  <div class="sm:flex sm:items-center max-w-5xl">
+<div class="max-w-6xl w-full mx-auto">
+  <div class="sm:flex sm:items-center max-w-6xl">
     <div class="sm:flex-auto">
       <h1 class="text-xl font-semibold leading-6 text-gray-800 dark:text-gray-300">Flags</h1>
       <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Student solutions that have been flagged as broken or inappropiate.</p>
@@ -23,7 +23,7 @@
 
   <div class="mt-8 flow-root">
     <% if @flags.any? %>
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 max-w-5xl px-6">
+      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 max-w-6xl px-6">
         <div class="inline-block min-w-full py-2 align-middle">
           <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
             <thead>
@@ -84,9 +84,11 @@
               <% end %>
             </tbody>
           </table>
-          <%= render Admin::PaginationComponent.new(pagy: @pagy, resource_name: 'flags') %>
         </div>
       </div>
+      <div class="pt-4">
+        <%= render PaginationComponent.new(pagy: @pagy, resource_name: 'flags') %>
+      </div>
     <% else %>
       <div class="mt-6 flex flex-col items-center space-y-2 pt-10">
         <%= inline_svg_tag 'icons/inbox.svg', class: 'h-16 w-16 text-gray-400 dark:text-gray-500', aria: true %>

app/views/lessons/project_submissions/index.html.erb

@@ -9,7 +9,7 @@
   </div>
 
   <%= turbo_frame_tag 'submissions-list', data: { test_id: 'submissions-list', turbo_action: :advance } do %>
-    <div class="mb-8 text-left">
+    <div class="mb-4 text-left">
 
       <header class="flex flex-col space-y-6 justify-between items-center text-center md:space-y-0 md:text-left md:flex-row">
         <div class="flex md:flex-start flex-col space-y-1">
@@ -59,7 +59,7 @@
     </div>
 
     <div class="text-center overflow-x-auto">
-      <%== pagy_nav(@pagy, params: { sort: params[:sort], direction: params[:direction] }, link_extra: "data-turbo-frame='_top'") %>
+       <%= render PaginationComponent.new(pagy: @pagy, resource_name: 'Solutions') %>
     </div>
   <% end %>
 </div>

spec/components/admin/pagination_component_spec.rb → spec/components/pagination_component_spec.rb

@@ -1,6 +1,6 @@
 require 'rails_helper'
 
-RSpec.describe Admin::PaginationComponent, type: :component do
+RSpec.describe PaginationComponent, type: :component do
   context 'when there is more than one page' do
     it 'renders the pagination component' do
       with_request_url('/admin/flags') do

spec/system/all_lesson_project_submissions_spec.rb

@@ -7,7 +7,7 @@
     let(:lesson) { create(:lesson, :project) }
 
     it 'paginates the results' do
-      create_list(:project_submission, 20, lesson:) # rubocop:disable FactoryBot/ExcessiveCreateList
+      create_list(:project_submission, 25, lesson:) # rubocop:disable FactoryBot/ExcessiveCreateList
 
       sign_in(user)
       visit lesson_path(lesson)
@@ -16,7 +16,7 @@
       expect(page).to have_current_path(lesson_project_submissions_path(lesson))
 
       within(:test_id, 'submissions-list') do
-        expect(page).to have_css('[data-test-id="submission-item"]', count: 15)
+        expect(page).to have_css('[data-test-id="submission-item"]', count: 20)
       end
 
       click_on('Next')