From 52008ccc57ec31b55a94455fccdbdac8a3a79fa1 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 21 Oct 2025 12:56:58 +0530
Subject: [PATCH] Implements pagination in MR pipelines table

---
 .../components/pipelines_table_wrapper.vue    | 60 ++++++++++++++++++-
 .../get_merge_request_pipelines.query.graphql | 16 ++++-
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/ci/merge_requests/components/pipelines_table_wrapper.vue b/app/assets/javascripts/ci/merge_requests/components/pipelines_table_wrapper.vue
index 779b7660e69dcf..7930b78e89f13f 100644
--- a/app/assets/javascripts/ci/merge_requests/components/pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/ci/merge_requests/components/pipelines_table_wrapper.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlButton, GlEmptyState, GlLoadingIcon, GlModal, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlButton,
+  GlEmptyState,
+  GlLoadingIcon,
+  GlModal,
+  GlLink,
+  GlSprintf,
+  GlKeysetPagination,
+} from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import Api from '~/api';
 import { getQueryHeaders } from '~/ci/pipeline_details/graph/utils';
@@ -12,12 +20,14 @@ import retryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry
 import { TYPENAME_CI_PIPELINE } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { HTTP_STATUS_UNAUTHORIZED } from '~/lib/utils/http_status';
+import { PIPELINES_PER_PAGE } from '~/ci/pipelines_page/constants';
 import { formatPipelinesGraphQLDataToREST } from '../utils';
 
 export default {
   components: {
     GlButton,
     GlEmptyState,
+    GlKeysetPagination,
     GlLink,
     GlLoadingIcon,
     GlModal,
@@ -57,6 +67,12 @@ export default {
       isRunningMergeRequestPipeline: false,
       pageInfo: {},
       pipelines: [],
+      pagination: {
+        first: PIPELINES_PER_PAGE,
+        last: null,
+        after: '',
+        before: '',
+      },
     };
   },
   apollo: {
@@ -70,6 +86,10 @@ export default {
         return {
           fullPath: this.targetProjectFullPath,
           mergeRequestIid: String(this.mergeRequestId),
+          first: this.pagination.first,
+          last: this.pagination.last,
+          after: this.pagination.after,
+          before: this.pagination.before,
         };
       },
       update(data) {
@@ -146,6 +166,13 @@ export default {
           this.latestPipeline?.flags?.merge_request_pipeline,
       );
     },
+    showPagination() {
+      return (
+        !this.isLoading &&
+        !this.hasError &&
+        (this.pageInfo?.hasNextPage || this.pageInfo?.hasPreviousPage)
+      );
+    },
   },
   methods: {
     cancelPipeline(pipeline) {
@@ -168,6 +195,12 @@ export default {
       }
     },
     refreshPipelineTable() {
+      this.pagination = {
+        first: PIPELINES_PER_PAGE,
+        last: null,
+        after: '',
+        before: '',
+      };
       this.$apollo.queries.pipelines.refetch();
     },
     /**
@@ -227,6 +260,23 @@ export default {
         this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
       }
     },
+    nextPage() {
+      this.pagination = {
+        after: this.pageInfo?.endCursor || '',
+        before: '',
+        first: PIPELINES_PER_PAGE,
+        last: null,
+      };
+    },
+
+    prevPage() {
+      this.pagination = {
+        after: '',
+        before: this.pageInfo?.startCursor || '',
+        first: null,
+        last: PIPELINES_PER_PAGE,
+      };
+    },
   },
   modal: {
     id: 'create-pipeline-for-uork-merge-request-modal',
@@ -363,6 +413,14 @@ export default {
           </div>
         </template>
       </pipelines-table>
+      <div class="gl-mt-5 gl-flex gl-justify-center">
+        <gl-keyset-pagination
+          v-if="showPagination"
+          v-bind="pageInfo"
+          @prev="prevPage"
+          @next="nextPage"
+        />
+      </div>
     </div>
 
     <gl-modal
diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql
index 054ff966fff461..27929745ba2cc0 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_merge_request_pipelines.query.graphql
@@ -1,4 +1,13 @@
-query getMergeRequestPipelines($mergeRequestIid: String!, $fullPath: ID!) {
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
+
+query getMergeRequestPipelines(
+  $mergeRequestIid: String!
+  $fullPath: ID!
+  $first: Int
+  $last: Int
+  $after: String
+  $before: String
+) {
   project(fullPath: $fullPath) {
     id
     fullPath
@@ -7,7 +16,7 @@ query getMergeRequestPipelines($mergeRequestIid: String!, $fullPath: ID!) {
       iid
       title
       webPath
-      pipelines {
+      pipelines(first: $first, last: $last, after: $after, before: $before) {
         count
         nodes {
           id
@@ -51,6 +60,9 @@ query getMergeRequestPipelines($mergeRequestIid: String!, $fullPath: ID!) {
             path: webPath
           }
         }
+        pageInfo {
+          ...PageInfo
+        }
       }
     }
   }
-- 
GitLab