Add pagination to Terraform list view

Updated GraphQL query and terraform_list.vue to include pagination

app/assets/javascripts/terraform/components/terraform_list.vue

 <script>
-import { GlAlert, GlBadge, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlBadge, GlKeysetPagination, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
 import getStatesQuery from '../graphql/queries/get_states.query.graphql';
 import EmptyState from './empty_state.vue';
 import StatesTable from './states_table.vue';
+import { MAX_LIST_COUNT } from '../constants';
 
 export default {
   apollo: {
@@ -11,12 +12,14 @@ export default {
       variables() {
         return {
           projectPath: this.projectPath,
+          ...this.cursor,
         };
       },
       update: data => {
         return {
           count: data?.project?.terraformStates?.count,
           list: data?.project?.terraformStates?.nodes,
+          pageInfo: data?.project?.terraformStates?.pageInfo,
         };
       },
       error() {
@@ -28,6 +31,7 @@ export default {
     EmptyState,
     GlAlert,
     GlBadge,
+    GlKeysetPagination,
     GlLoadingIcon,
     GlTab,
     GlTabs,
@@ -43,10 +47,26 @@ export default {
       type: String,
     },
   },
+  data() {
+    return {
+      cursor: {
+        first: MAX_LIST_COUNT,
+        after: null,
+        last: null,
+        before: null,
+      },
+    };
+  },
   computed: {
     isLoading() {
       return this.$apollo.queries.states.loading;
     },
+    pageInfo() {
+      return this.states?.pageInfo || {};
+    },
+    showPagination() {
+      return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage;
+    },
     statesCount() {
       return this.states?.count;
     },
@@ -54,6 +74,25 @@ export default {
       return this.states?.list;
     },
   },
+  methods: {
+    updatePagination(item) {
+      if (item === this.pageInfo.endCursor) {
+        this.cursor = {
+          first: MAX_LIST_COUNT,
+          after: item,
+          last: null,
+          before: null,
+        };
+      } else {
+        this.cursor = {
+          first: null,
+          after: null,
+          last: MAX_LIST_COUNT,
+          before: item,
+        };
+      }
+    },
+  },
 };
 </script>
 
@@ -71,7 +110,17 @@ export default {
         <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" />
 
         <div v-else-if="statesList">
-          <states-table v-if="statesCount" :states="statesList" />
+          <div v-if="statesCount">
+            <states-table :states="statesList" />
+
+            <div v-if="showPagination" class="gl-display-flex gl-justify-content-center gl-mt-5">
+              <gl-keyset-pagination
+                v-bind="pageInfo"
+                @prev="updatePagination"
+                @next="updatePagination"
+              />
+            </div>
+          </div>
 
           <empty-state v-else :image="emptyStateImage" />
         </div>

app/assets/javascripts/terraform/constants.js

+export const MAX_LIST_COUNT = 25;

app/assets/javascripts/terraform/graphql/queries/get_states.query.graphql

 #import "../fragments/state.fragment.graphql"
+#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
 
-query getStates($projectPath: ID!) {
+query getStates($projectPath: ID!, $first: Int, $last: Int, $before: String, $after: String) {
   project(fullPath: $projectPath) {
-    terraformStates {
+    terraformStates(first: $first, last: $last, before: $before, after: $after) {
       count
+
       nodes {
         ...State
       }
+
+      pageInfo {
+        ...PageInfo
+      }
     }
   }
 }

changelogs/unreleased/emilyring-state-pagination.yml

+---
+title: Add pagination to Terraform list view
+merge_request: 47412
+author:
+type: changed

spec/frontend/terraform/components/terraform_list_spec.js

-import { GlAlert, GlBadge, GlLoadingIcon, GlTab } from '@gitlab/ui';
+import { GlAlert, GlBadge, GlKeysetPagination, GlLoadingIcon, GlTab } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import VueApollo from 'vue-apollo';
@@ -39,6 +39,7 @@ describe('TerraformList', () => {
 
   const findBadge = () => wrapper.find(GlBadge);
   const findEmptyState = () => wrapper.find(EmptyState);
+  const findPaginationButtons = () => wrapper.find(GlKeysetPagination);
   const findStatesTable = () => wrapper.find(StatesTable);
   const findTab = () => wrapper.find(GlTab);
 
@@ -73,6 +74,12 @@ describe('TerraformList', () => {
           terraformStates: {
             nodes: states,
             count: states.length,
+            pageInfo: {
+              hasNextPage: true,
+              hasPreviousPage: false,
+              startCursor: 'prev',
+              endCursor: 'next',
+            },
           },
         });
 
@@ -84,8 +91,33 @@ describe('TerraformList', () => {
         expect(findBadge().text()).toBe('2');
       });
 
-      it('renders the states table', () => {
+      it('renders the states table and pagination buttons', () => {
         expect(findStatesTable().exists()).toBe(true);
+        expect(findPaginationButtons().exists()).toBe(true);
+      });
+
+      describe('when list has no additional pages', () => {
+        beforeEach(() => {
+          createWrapper({
+            terraformStates: {
+              nodes: states,
+              count: states.length,
+              pageInfo: {
+                hasNextPage: false,
+                hasPreviousPage: false,
+                startCursor: '',
+                endCursor: '',
+              },
+            },
+          });
+
+          return wrapper.vm.$nextTick();
+        });
+
+        it('renders the states table without pagination buttons', () => {
+          expect(findStatesTable().exists()).toBe(true);
+          expect(findPaginationButtons().exists()).toBe(false);
+        });
       });
     });
 
@@ -95,6 +127,7 @@ describe('TerraformList', () => {
           terraformStates: {
             nodes: [],
             count: 0,
+            pageInfo: null,
           },
         });