Fix "projects" page pagination (#3793)

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);
+                });
+        });
+    }
 }