Fix "projects" page pagination

The projects page doesn't properly paginate the list of projects, limiting the total to 100 projects.  This PR fixes that by adding pagination and associated tests.

Author: williamjallen

resources/js/vue/app.js

@@ -63,6 +63,11 @@ const apolloClient = new ApolloClient({
           users: relayStylePagination(),
         },
       },
+      User: {
+        fields: {
+          projects: relayStylePagination(),
+        },
+      },
       Project: {
         fields: {
           sites: relayStylePagination(),

resources/js/vue/components/ProjectsPage.vue

@@ -126,7 +126,7 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
 const PROJECT_LIST_QUERY = `
-  projects {
+  projects(after: $after) {
     edges {
       node {
         id
@@ -146,6 +146,10 @@ const PROJECT_LIST_QUERY = `
         }
       }
     }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
   }
 `;
 
@@ -174,20 +178,30 @@ export default {
   apollo: {
     allVisibleProjects: {
       query: gql`
-        query allVisibleProjects($countBuildsSince: DateTimeTz!) {
+        query allVisibleProjects($countBuildsSince: DateTimeTz!, $after: String) {
           allVisibleProjects: ${PROJECT_LIST_QUERY}
         }
       `,
       variables() {
         return {
           countBuildsSince: this.oneDayAgo,
+          after: null,
         };
       },
+      result({data}) {
+        if (data && data.allVisibleProjects.pageInfo.hasNextPage) {
+          this.$apollo.queries.allVisibleProjects.fetchMore({
+            variables: {
+              after: data.allVisibleProjects.pageInfo.endCursor,
+            },
+          });
+        }
+      },
     },
 
     myProjects: {
       query: gql`
-        query myProjects($countBuildsSince: DateTimeTz!) {
+        query myProjects($countBuildsSince: DateTimeTz!, $after: String) {
           me {
             id
             ${PROJECT_LIST_QUERY}
@@ -198,8 +212,18 @@ export default {
       variables() {
         return {
           countBuildsSince: this.oneDayAgo,
+          after: null,
         };
       },
+      result({data}) {
+        if (data && data.me?.projects.pageInfo.hasNextPage) {
+          this.$apollo.queries.myProjects.fetchMore({
+            variables: {
+              after: data.me.projects.pageInfo.endCursor,
+            },
+          });
+        }
+      },
     },
   },
 

tests/Browser/Pages/ProjectsPageTest.php

@@ -287,4 +287,57 @@ public function testShowsDateOfLastSubmission(): void
                 });
         });
     }
+
+    public function testPaginationLoadsAllProjects(): void
+    {
+        $this->users['admin'] = $this->makeAdminUser();
+
+        // Create 110 public projects, each with a recent build so they appear on the active tab
+        for ($i = 1; $i <= 110; $i++) {
+            $project = $this->makePublicProject();
+            $this->projects["project{$i}"] = $project;
+
+            $project->builds()->create([
+                'siteid' => $this->site->id,
+                'name' => Str::uuid()->toString(),
+                'uuid' => Str::uuid()->toString(),
+                'submittime' => Carbon::now(),
+            ]);
+
+            $project->users()->attach($this->users['admin'], ['role' => Project::PROJECT_USER]);
+        }
+
+        // The first project created has the lowest ID (first pagination page) and the last has
+        // the highest ID (final pagination page).  Waiting for the last project's name guarantees
+        // all pages have been fetched before asserting.
+        $firstProjectName = $this->projects['project1']->name;
+        $lastProjectName = $this->projects['project110']->name;
+
+        $this->browse(function (Browser $browser) use ($firstProjectName, $lastProjectName): void {
+            $browser->loginAs($this->users['admin'])
+                ->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser) use ($firstProjectName, $lastProjectName): void {
+                    // Test "All" tab shows projects with lowest and highest IDs
+                    $browser->click('@all-tab')
+                        ->waitFor('@projects-table')
+                        ->waitForText($lastProjectName)
+                        ->assertSeeIn('@projects-table', $firstProjectName)
+                        ->assertSeeIn('@projects-table', $lastProjectName);
+
+                    // Test "Active" tab shows projects with lowest and highest IDs
+                    $browser->click('@active-tab')
+                        ->waitFor('@projects-table')
+                        ->waitForText($lastProjectName)
+                        ->assertSeeIn('@projects-table', $firstProjectName)
+                        ->assertSeeIn('@projects-table', $lastProjectName);
+
+                    // Test "Member" tab shows projects with lowest and highest IDs
+                    $browser->click('@member-tab')
+                        ->waitFor('@projects-table')
+                        ->waitForText($lastProjectName)
+                        ->assertSeeIn('@projects-table', $firstProjectName)
+                        ->assertSeeIn('@projects-table', $lastProjectName);
+                });
+        });
+    }
 }