From 3368b000beb38edc5beef8fbc554e465ce2a886d Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 25 Sep 2025 17:54:27 +0100
Subject: [PATCH 01/34] Creates getPipelineCreationRequests graphql query

(cherry picked from commit 5254ee366355637b413b6860730e061599f12246)
---
 ...t_pipeline_creation_requests.query.graphql | 13 +++++++++
 .../legacy_pipelines_table_wrapper.vue        | 29 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql

diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
new file mode 100644
index 00000000000000..39803d89cde9ae
--- /dev/null
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -0,0 +1,13 @@
+query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
+  project(fullPath: $fullPath) {
+    mergeRequest(iid: $mergeRequestIid) {
+      id
+      iid
+      pipelineCreationRequests {
+        status
+        pipelineId
+        error
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index a74d7f705fa25a..b3c3cce201eaad 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -10,6 +10,7 @@ import PipelinesService from '~/ci/pipelines_page/services/pipelines_service';
 import PipelineStore from '~/ci/pipeline_details/stores/pipelines_store';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import { s__, __ } from '~/locale';
+import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
 
 export default {
   components: {
@@ -82,9 +83,34 @@ export default {
       page: getParameterByName('page') || '1',
       requestData: {},
       modalId: 'create-pipeline-for-fork-merge-request-modal',
+      pipelineCreationRequests: [],
     };
   },
 
+  apollo: {
+    pipelineCreationRequests: {
+      query: getPipelineCreationRequests,
+      variables() {        
+        return {
+          fullPath: this.targetProjectFullPath,
+          mergeRequestIid: this.mergeRequestId.toString(),
+        };
+      },
+      skip() {
+        return !this.isMergeRequestTable || !this.mergeRequestId || !this.targetProjectFullPath;
+      },
+      pollInterval() {
+        return this.inProgressRequests.length > 0 ? 1000 : 0;
+      },
+      update(data) {
+        return data.project?.mergeRequest?.pipelineCreationRequests || [];
+      },
+      error(error) {
+        console.error('Failed to fetch pipeline creation requests:', error);
+      },
+    },
+  },
+
   computed: {
     shouldRenderTable() {
       return !this.isLoading && this.state.pipelines.length > 0 && !this.hasError;
@@ -135,6 +161,9 @@ export default {
         (latest.flags.detached_merge_request_pipeline || latest.flags.merge_request_pipeline)
       );
     },
+    inProgressRequests() {
+      return this.pipelineCreationRequests.filter(req => req.status === 'IN_PROGRESS');
+    },
   },
   created() {
     this.service = new PipelinesService(this.endpoint);
-- 
GitLab


From 64b61592e6b4dafb55a6b0dcc8e8ee04ecad9893 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 25 Sep 2025 17:56:28 +0100
Subject: [PATCH 02/34] Left hook fixes

(cherry picked from commit 81df8f777a801c21b4fddf0ee56378c3833ba335)
---
 .../queries/get_pipeline_creation_requests.query.graphql   | 2 +-
 .../commit/pipelines/legacy_pipelines_table_wrapper.vue    | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
index 39803d89cde9ae..ecd2982043983e 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -10,4 +10,4 @@ query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index b3c3cce201eaad..272031a426d5ad 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -90,7 +90,7 @@ export default {
   apollo: {
     pipelineCreationRequests: {
       query: getPipelineCreationRequests,
-      variables() {        
+      variables() {
         return {
           fullPath: this.targetProjectFullPath,
           mergeRequestIid: this.mergeRequestId.toString(),
@@ -105,9 +105,6 @@ export default {
       update(data) {
         return data.project?.mergeRequest?.pipelineCreationRequests || [];
       },
-      error(error) {
-        console.error('Failed to fetch pipeline creation requests:', error);
-      },
     },
   },
 
@@ -162,7 +159,7 @@ export default {
       );
     },
     inProgressRequests() {
-      return this.pipelineCreationRequests.filter(req => req.status === 'IN_PROGRESS');
+      return this.pipelineCreationRequests.filter((req) => req.status === 'IN_PROGRESS');
     },
   },
   created() {
-- 
GitLab


From 0479b03a87da94d5476da795f2f1568f1702754e Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 2 Oct 2025 03:56:10 +0530
Subject: [PATCH 03/34] Add GraphQL subscription for pipeline creation

- Add ciPipelineCreationRequestsUpdated subscription to track real-time pipeline creation status
- Integrate subscription in legacy_pipelines_table_wrapper.vue to replace polling
- Add GraphQL triggers in merge request pipeline creation service
- Update MergeRequest type to include pipelineCreationRequests field
---
 ...tion_requests_updated.subscription.graphql | 11 ++++++
 .../legacy_pipelines_table_wrapper.vue        | 37 +++++++++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql

diff --git a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
new file mode 100644
index 00000000000000..8a8f9055b184ed
--- /dev/null
+++ b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
@@ -0,0 +1,11 @@
+subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!) {
+  ciPipelineCreationRequestsUpdated(mergeRequestId: $mergeRequestId) {
+    id
+    iid
+    pipelineCreationRequests {
+      status
+      pipelineId
+      error
+    }
+  }
+}
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 272031a426d5ad..1884e0ce940f71 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -11,6 +11,7 @@ import PipelineStore from '~/ci/pipeline_details/stores/pipelines_store';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import { s__, __ } from '~/locale';
 import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
+import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
 
 export default {
   components: {
@@ -82,6 +83,7 @@ export default {
       state: store.state,
       page: getParameterByName('page') || '1',
       requestData: {},
+      mergeRequestGlobalId: null,
       modalId: 'create-pipeline-for-fork-merge-request-modal',
       pipelineCreationRequests: [],
     };
@@ -100,11 +102,40 @@ export default {
         return !this.isMergeRequestTable || !this.mergeRequestId || !this.targetProjectFullPath;
       },
       pollInterval() {
-        return this.inProgressRequests.length > 0 ? 1000 : 0;
+        return this.hasInProgressCreationRequests ? 10000 : 0;
       },
       update(data) {
+        if (data.project?.mergeRequest?.id) {
+          this.mergeRequestGlobalId = data.project.mergeRequest.id;
+        }
         return data.project?.mergeRequest?.pipelineCreationRequests || [];
       },
+      subscribeToMore: {
+        document: pipelineCreationRequestsUpdatedSubscription,
+        variables() {
+          return {
+            mergeRequestId: this.mergeRequestGlobalId,
+          };
+        },
+        skip() {
+          return !this.isMergeRequestTable || !this.mergeRequestGlobalId;
+        },
+        updateQuery: (previousResult, { subscriptionData }) => {
+          if (!subscriptionData.data?.ciPipelineCreationRequestsUpdated) return previousResult;
+
+          const updated = subscriptionData.data.ciPipelineCreationRequestsUpdated;
+          return {
+            ...previousResult,
+            project: {
+              ...previousResult.project,
+              mergeRequest: {
+                ...previousResult.project.mergeRequest,
+                pipelineCreationRequests: updated.pipelineCreationRequests,
+              },
+            },
+          };
+        },
+      },
     },
   },
 
@@ -158,8 +189,8 @@ export default {
         (latest.flags.detached_merge_request_pipeline || latest.flags.merge_request_pipeline)
       );
     },
-    inProgressRequests() {
-      return this.pipelineCreationRequests.filter((req) => req.status === 'IN_PROGRESS');
+    hasInProgressCreationRequests() {
+      return this.pipelineCreationRequests.some((req) => req.status === 'IN_PROGRESS');
     },
   },
   created() {
-- 
GitLab


From de950ed9ee151746cbdf86848a990b1718f0b6b7 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 2 Oct 2025 05:48:17 +0530
Subject: [PATCH 04/34] Update loader state based on subscription response

---
 .../legacy_pipelines_table_wrapper.vue        | 130 ++++++++++--------
 1 file changed, 75 insertions(+), 55 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 1884e0ce940f71..e527ec2c75a6d2 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -89,56 +89,6 @@ export default {
     };
   },
 
-  apollo: {
-    pipelineCreationRequests: {
-      query: getPipelineCreationRequests,
-      variables() {
-        return {
-          fullPath: this.targetProjectFullPath,
-          mergeRequestIid: this.mergeRequestId.toString(),
-        };
-      },
-      skip() {
-        return !this.isMergeRequestTable || !this.mergeRequestId || !this.targetProjectFullPath;
-      },
-      pollInterval() {
-        return this.hasInProgressCreationRequests ? 10000 : 0;
-      },
-      update(data) {
-        if (data.project?.mergeRequest?.id) {
-          this.mergeRequestGlobalId = data.project.mergeRequest.id;
-        }
-        return data.project?.mergeRequest?.pipelineCreationRequests || [];
-      },
-      subscribeToMore: {
-        document: pipelineCreationRequestsUpdatedSubscription,
-        variables() {
-          return {
-            mergeRequestId: this.mergeRequestGlobalId,
-          };
-        },
-        skip() {
-          return !this.isMergeRequestTable || !this.mergeRequestGlobalId;
-        },
-        updateQuery: (previousResult, { subscriptionData }) => {
-          if (!subscriptionData.data?.ciPipelineCreationRequestsUpdated) return previousResult;
-
-          const updated = subscriptionData.data.ciPipelineCreationRequestsUpdated;
-          return {
-            ...previousResult,
-            project: {
-              ...previousResult.project,
-              mergeRequest: {
-                ...previousResult.project.mergeRequest,
-                pipelineCreationRequests: updated.pipelineCreationRequests,
-              },
-            },
-          };
-        },
-      },
-    },
-  },
-
   computed: {
     shouldRenderTable() {
       return !this.isLoading && this.state.pipelines.length > 0 && !this.hasError;
@@ -190,7 +140,19 @@ export default {
       );
     },
     hasInProgressCreationRequests() {
-      return this.pipelineCreationRequests.some((req) => req.status === 'IN_PROGRESS');
+      return (
+        this.pipelineCreationRequests?.some((request) => request.status === 'IN_PROGRESS') ?? false
+      );
+    },
+  },
+  watch: {
+    pipelineCreationRequests: {
+      handler(newRequests, oldRequests) {
+        if (this.hasInProgressRequestsCompleted(oldRequests, newRequests)) {
+          this.onRefreshPipelinesTable();
+        }
+      },
+      deep: true,
     },
   },
   created() {
@@ -241,6 +203,61 @@ export default {
         this.$refs.modal.show();
       }
     },
+    hasInProgressRequestsCompleted(previousRequests = [], currentRequests = []) {
+      const prevInProgressCount = this.countRequestsByStatus(previousRequests, 'IN_PROGRESS');
+      const currInProgressCount = this.countRequestsByStatus(currentRequests, 'IN_PROGRESS');
+
+      return currInProgressCount < prevInProgressCount;
+    },
+    countRequestsByStatus(requests, status) {
+      return requests.filter((request) => request.status === status).length;
+    },
+  },
+  apollo: {
+    pipelineCreationRequests: {
+      query: getPipelineCreationRequests,
+      variables() {
+        return {
+          fullPath: this.targetProjectFullPath,
+          mergeRequestIid: this.mergeRequestId.toString(),
+        };
+      },
+      skip() {
+        return !this.isMergeRequestTable || !this.mergeRequestId || !this.targetProjectFullPath;
+      },
+      update(data) {
+        if (data.project?.mergeRequest?.id) {
+          this.mergeRequestGlobalId = data.project.mergeRequest.id;
+        }
+        return data.project?.mergeRequest?.pipelineCreationRequests || [];
+      },
+      subscribeToMore: {
+        document: pipelineCreationRequestsUpdatedSubscription,
+        variables() {
+          return {
+            mergeRequestId: this.mergeRequestGlobalId,
+          };
+        },
+        skip() {
+          return !this.isMergeRequestTable || !this.mergeRequestGlobalId;
+        },
+        updateQuery: (previousResult, { subscriptionData }) => {
+          if (!subscriptionData.data?.ciPipelineCreationRequestsUpdated) return previousResult;
+
+          const updated = subscriptionData.data.ciPipelineCreationRequestsUpdated;
+          return {
+            ...previousResult,
+            project: {
+              ...previousResult.project,
+              mergeRequest: {
+                ...previousResult.project.mergeRequest,
+                pipelineCreationRequests: updated.pipelineCreationRequests,
+              },
+            },
+          };
+        },
+      },
+    },
   },
   pipelineIdKey: PIPELINE_ID_KEY,
   modal: {
@@ -330,7 +347,8 @@ export default {
           <div class="gl-align-middle">
             <gl-button
               variant="confirm"
-              :loading="state.isRunningMergeRequestPipeline"
+              :loading="hasInProgressCreationRequests"
+              :disabled="hasInProgressCreationRequests"
               data-testid="run_pipeline_button"
               @click="tryRunPipeline"
             >
@@ -349,7 +367,8 @@ export default {
         <gl-button
           class="gl-mb-3 gl-mt-3 gl-w-full @md/panel:gl-w-auto"
           data-testid="run_pipeline_button_mobile"
-          :loading="state.isRunningMergeRequestPipeline"
+          :loading="hasInProgressCreationRequests"
+          :disabled="hasInProgressCreationRequests"
           @click="tryRunPipeline"
         >
           {{ $options.i18n.runPipelineText }}
@@ -357,7 +376,7 @@ export default {
       </div>
 
       <pipelines-table
-        :is-creating-pipeline="state.isRunningMergeRequestPipeline"
+        :is-creating-pipeline="hasInProgressCreationRequests"
         :pipeline-id-type="$options.pipelineIdKey"
         :pipelines="state.pipelines"
         :view-type="viewType"
@@ -370,7 +389,8 @@ export default {
           <div v-if="canRenderPipelineButton" class="gl-text-right">
             <gl-button
               data-testid="run_pipeline_button"
-              :loading="state.isRunningMergeRequestPipeline"
+              :loading="hasInProgressCreationRequests"
+              :disabled="hasInProgressCreationRequests"
               @click="tryRunPipeline"
             >
               {{ $options.i18n.runPipelineText }}
-- 
GitLab


From f16e2f9b646a80e81eb7dd0825f8fc7d06c3b5bf Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 2 Oct 2025 06:37:15 +0530
Subject: [PATCH 05/34] Remove duplicate pipelines.json call

---
 .../javascripts/ci/pipeline_details/mixins/pipelines_mixin.js | 3 +--
 .../commit/pipelines/legacy_pipelines_table_wrapper.vue       | 4 +---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js b/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js
index 074e5b49759000..ab812eb653f88d 100644
--- a/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js
+++ b/app/assets/javascripts/ci/pipeline_details/mixins/pipelines_mixin.js
@@ -201,9 +201,8 @@ export default {
         .then(() => {
           if (!options.isAsync) {
             this.$toast.show(TOAST_MESSAGE);
+            this.updateTable();
           }
-
-          this.updateTable();
         })
         .catch((e) => {
           const unauthorized = e.response.status === HTTP_STATUS_UNAUTHORIZED;
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index e527ec2c75a6d2..81c23b4a876d7f 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -140,9 +140,7 @@ export default {
       );
     },
     hasInProgressCreationRequests() {
-      return (
-        this.pipelineCreationRequests?.some((request) => request.status === 'IN_PROGRESS') ?? false
-      );
+      return this.countRequestsByStatus(this.pipelineCreationRequests, 'IN_PROGRESS') > 0;
     },
   },
   watch: {
-- 
GitLab


From 1cd9b828cb0672679434f0e1b250fe4285e7ee4e Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Fri, 3 Oct 2025 05:40:38 +0530
Subject: [PATCH 06/34] Add failed alert & remove skeleton loader

---
 .../javascripts/ci/common/pipelines_table.vue |  9 -----
 ...t_pipeline_creation_requests.query.graphql |  1 +
 .../legacy_pipelines_table_wrapper.vue        | 39 +++++++++++++++----
 locale/gitlab.pot                             |  3 ++
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/ci/common/pipelines_table.vue b/app/assets/javascripts/ci/common/pipelines_table.vue
index 8fa59609f26be8..ccc83ea4d06658 100644
--- a/app/assets/javascripts/ci/common/pipelines_table.vue
+++ b/app/assets/javascripts/ci/common/pipelines_table.vue
@@ -59,11 +59,6 @@ export default {
     },
   },
   props: {
-    isCreatingPipeline: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     pipelines: {
       type: Array,
       required: true,
@@ -122,10 +117,6 @@ export default {
     pipelinesWithDetails() {
       let { pipelines } = this;
 
-      if (this.isCreatingPipeline) {
-        pipelines = [{ isLoading: true }, ...this.pipelines];
-      }
-
       if (this.useFailedJobsWidget) {
         pipelines = pipelines.map((p) => {
           return p.failed_builds_count > 0 ? { ...p, _showDetails: true } : p;
diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
index ecd2982043983e..4d706f7339d50a 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -1,5 +1,6 @@
 query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
   project(fullPath: $fullPath) {
+    id
     mergeRequest(iid: $mergeRequestIid) {
       id
       iid
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 81c23b4a876d7f..f469746564d02d 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlButton, GlEmptyState, GlLoadingIcon, GlModal, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlButton,
+  GlEmptyState,
+  GlLoadingIcon,
+  GlModal,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import PipelinesTable from '~/ci/common/pipelines_table.vue';
@@ -15,6 +23,7 @@ import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/gra
 
 export default {
   components: {
+    GlAlert,
     GlButton,
     GlEmptyState,
     GlLink,
@@ -86,6 +95,7 @@ export default {
       mergeRequestGlobalId: null,
       modalId: 'create-pipeline-for-fork-merge-request-modal',
       pipelineCreationRequests: [],
+      showCreationFailedAlert: false,
     };
   },
 
@@ -146,9 +156,11 @@ export default {
   watch: {
     pipelineCreationRequests: {
       handler(newRequests, oldRequests) {
-        if (this.hasInProgressRequestsCompleted(oldRequests, newRequests)) {
+        if (this.haveRequestsSucceeded(oldRequests, newRequests)) {
           this.onRefreshPipelinesTable();
         }
+
+        this.showCreationFailedAlert = this.haveRequestsFailed(oldRequests, newRequests);
       },
       deep: true,
     },
@@ -201,11 +213,17 @@ export default {
         this.$refs.modal.show();
       }
     },
-    hasInProgressRequestsCompleted(previousRequests = [], currentRequests = []) {
-      const prevInProgressCount = this.countRequestsByStatus(previousRequests, 'IN_PROGRESS');
-      const currInProgressCount = this.countRequestsByStatus(currentRequests, 'IN_PROGRESS');
+    haveRequestsSucceeded(previousRequests = [], currentRequests = []) {
+      const prevSucceededCount = this.countRequestsByStatus(previousRequests, 'SUCCEEDED');
+      const currSucceededCount = this.countRequestsByStatus(currentRequests, 'SUCCEEDED');
+
+      return currSucceededCount > prevSucceededCount;
+    },
+    haveRequestsFailed(previousRequests = [], currentRequests = []) {
+      const prevFailedCount = this.countRequestsByStatus(previousRequests, 'FAILED');
+      const currFailedCount = this.countRequestsByStatus(currentRequests, 'FAILED');
 
-      return currInProgressCount < prevInProgressCount;
+      return currFailedCount > prevFailedCount;
     },
     countRequestsByStatus(requests, status) {
       return requests.filter((request) => request.status === status).length;
@@ -280,6 +298,7 @@ export default {
     ),
     runPipelineText: s__('Pipeline|Run pipeline'),
     emptyStateTitle: s__('Pipelines|There are currently no pipelines.'),
+    pipelineCreationFailed: s__('Pipeline|Pipeline creation failed. Please try again.'),
   },
   mrPipelinesDocsPath: helpPagePath('ci/pipelines/merge_request_pipelines.md', {
     anchor: 'prerequisites',
@@ -297,6 +316,13 @@ export default {
 </script>
 <template>
   <div class="content-list pipelines">
+    <gl-alert
+      v-if="showCreationFailedAlert"
+      variant="danger"
+      :dismissible="true"
+      @dismiss="showCreationFailedAlert = false"
+      >{{ $options.i18n.pipelineCreationFailed }}</gl-alert
+    >
     <gl-loading-icon
       v-if="isLoading"
       :label="s__('Pipelines|Loading pipelines')"
@@ -374,7 +400,6 @@ export default {
       </div>
 
       <pipelines-table
-        :is-creating-pipeline="hasInProgressCreationRequests"
         :pipeline-id-type="$options.pipelineIdKey"
         :pipelines="state.pipelines"
         :view-type="viewType"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3a1d69f38bc1c7..09c267b84ffbc7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -49397,6 +49397,9 @@ msgstr ""
 msgid "Pipeline|Pipeline cannot be run."
 msgstr ""
 
+msgid "Pipeline|Pipeline creation failed. Please try again."
+msgstr ""
+
 msgid "Pipeline|Pipelines"
 msgstr ""
 
-- 
GitLab


From 2404ed521e1de1fb99a3ded1f498347b0817261f Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 6 Oct 2025 12:06:24 +0530
Subject: [PATCH 07/34] Implement a debounced pipeline creation loader

---
 .../javascripts/ci/common/pipelines_table.vue |  9 ++++
 .../legacy_pipelines_table_wrapper.vue        | 41 +++++++++++++++++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/ci/common/pipelines_table.vue b/app/assets/javascripts/ci/common/pipelines_table.vue
index ccc83ea4d06658..8fa59609f26be8 100644
--- a/app/assets/javascripts/ci/common/pipelines_table.vue
+++ b/app/assets/javascripts/ci/common/pipelines_table.vue
@@ -59,6 +59,11 @@ export default {
     },
   },
   props: {
+    isCreatingPipeline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     pipelines: {
       type: Array,
       required: true,
@@ -117,6 +122,10 @@ export default {
     pipelinesWithDetails() {
       let { pipelines } = this;
 
+      if (this.isCreatingPipeline) {
+        pipelines = [{ isLoading: true }, ...this.pipelines];
+      }
+
       if (this.useFailedJobsWidget) {
         pipelines = pipelines.map((p) => {
           return p.failed_builds_count > 0 ? { ...p, _showDetails: true } : p;
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index f469746564d02d..3b4cfccfad1921 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -96,6 +96,8 @@ export default {
       modalId: 'create-pipeline-for-fork-merge-request-modal',
       pipelineCreationRequests: [],
       showCreationFailedAlert: false,
+      isCreatingPipeline: false,
+      loaderTimeout: null,
     };
   },
 
@@ -154,13 +156,21 @@ export default {
     },
   },
   watch: {
+    hasInProgressCreationRequests: {
+      handler(hasInProgress) {
+        if (hasInProgress) {
+          this.startDebouncedPipelineLoader();
+        }
+      },
+      immediate: true,
+    },
     pipelineCreationRequests: {
       handler(newRequests, oldRequests) {
-        if (this.haveRequestsSucceeded(oldRequests, newRequests)) {
+        if (this.didRequestsSucceedSince(oldRequests, newRequests)) {
           this.onRefreshPipelinesTable();
         }
 
-        this.showCreationFailedAlert = this.haveRequestsFailed(oldRequests, newRequests);
+        this.showCreationFailedAlert = this.didRequestsFailedSince(oldRequests, newRequests);
       },
       deep: true,
     },
@@ -177,6 +187,9 @@ export default {
 
       this.store.storePagination(resp.headers);
       this.setCommonData(pipelines, this.isMergeRequestTable);
+      if (!this.hasInProgressCreationRequests) {
+        this.stopDebouncedPipelineLoader();
+      }
 
       if (resp.headers?.['x-total']) {
         const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
@@ -200,6 +213,7 @@ export default {
      *
      */
     onClickRunPipeline() {
+      this.startDebouncedPipelineLoader();
       eventHub.$emit('runMergeRequestPipeline', {
         projectId: this.projectId,
         mergeRequestId: this.mergeRequestId,
@@ -213,13 +227,13 @@ export default {
         this.$refs.modal.show();
       }
     },
-    haveRequestsSucceeded(previousRequests = [], currentRequests = []) {
+    didRequestsSucceedSince(previousRequests = [], currentRequests = []) {
       const prevSucceededCount = this.countRequestsByStatus(previousRequests, 'SUCCEEDED');
       const currSucceededCount = this.countRequestsByStatus(currentRequests, 'SUCCEEDED');
 
       return currSucceededCount > prevSucceededCount;
     },
-    haveRequestsFailed(previousRequests = [], currentRequests = []) {
+    didRequestsFailedSince(previousRequests = [], currentRequests = []) {
       const prevFailedCount = this.countRequestsByStatus(previousRequests, 'FAILED');
       const currFailedCount = this.countRequestsByStatus(currentRequests, 'FAILED');
 
@@ -228,6 +242,24 @@ export default {
     countRequestsByStatus(requests, status) {
       return requests.filter((request) => request.status === status).length;
     },
+    startDebouncedPipelineLoader() {
+      if (this.loaderTimeout) {
+        clearTimeout(this.loaderTimeout);
+      }
+
+      this.loaderTimeout = setTimeout(() => {
+        this.isCreatingPipeline = true;
+      }, 300);
+    },
+
+    stopDebouncedPipelineLoader() {
+      if (this.loaderTimeout) {
+        clearTimeout(this.loaderTimeout);
+        this.loaderTimeout = null;
+      }
+
+      this.isCreatingPipeline = false;
+    },
   },
   apollo: {
     pipelineCreationRequests: {
@@ -400,6 +432,7 @@ export default {
       </div>
 
       <pipelines-table
+        :is-creating-pipeline="isCreatingPipeline"
         :pipeline-id-type="$options.pipelineIdKey"
         :pipelines="state.pipelines"
         :view-type="viewType"
-- 
GitLab


From 40759ea69559c925998b7ecbd2c7feb070f59220 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 6 Oct 2025 21:08:02 +0530
Subject: [PATCH 08/34] Add tests for legacy pipelines table graphql
 integration

---
 .../legacy_pipelines_table_wrapper_spec.js    | 183 ++++++++++++++++++
 1 file changed, 183 insertions(+)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index 3a76e27d23f607..30a89841efd080 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -2,6 +2,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlLoadingIcon, GlModal, GlTableLite } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
+import { createMockSubscription as createMockApolloSubscription } from 'mock-apollo-client';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -19,6 +20,8 @@ import {
 import { createAlert } from '~/alert';
 import { TOAST_MESSAGE } from '~/ci/pipeline_details/constants';
 import axios from '~/lib/utils/axios_utils';
+import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
+import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
 
 Vue.use(VueApollo);
 
@@ -28,6 +31,26 @@ const $toast = {
 
 jest.mock('~/alert');
 
+const generatePipelineCreationRequestsResponse = ({
+  requests = [
+    { status: 'IN_PROGRESS', pipelineId: null, error: null },
+    { status: 'SUCCEEDED', pipelineId: '123', error: null },
+  ],
+} = {}) => {
+  return {
+    data: {
+      project: {
+        id: 'gid://gitlab/Project/5',
+        mergeRequest: {
+          id: 'gid://gitlab/MergeRequest/3',
+          iid: '3',
+          pipelineCreationRequests: requests,
+        },
+      },
+    },
+  };
+};
+
 describe('Pipelines table in Commits and Merge requests', () => {
   let wrapper;
   let pipeline;
@@ -468,4 +491,164 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
     });
   });
+
+  describe('Apollo GraphQL integration', () => {
+    let getPipelineCreationRequestsHandler;
+    let mockedSubscription;
+
+    beforeEach(() => {
+      getPipelineCreationRequestsHandler = jest
+        .fn()
+        .mockResolvedValue(generatePipelineCreationRequestsResponse());
+
+      mockedSubscription = createMockApolloSubscription();
+    });
+
+    const createComponentWithGraphQL = (props = {}, handlers = []) => {
+      const requestHandlers = [
+        [getPipelineCreationRequests, getPipelineCreationRequestsHandler],
+        ...handlers,
+      ];
+
+      const subscriptionHandlers = [
+        [pipelineCreationRequestsUpdatedSubscription, () => mockedSubscription],
+      ];
+
+      const apolloProvider = createMockApollo(requestHandlers);
+
+      subscriptionHandlers.forEach(([query, stream]) => {
+        apolloProvider.defaultClient.setRequestHandler(query, stream);
+      });
+
+      apolloProvider.defaultClient.clearStore();
+
+      wrapper = mountExtended(LegacyPipelinesTableWrapper, {
+        propsData: {
+          endpoint: 'endpoint.json',
+          emptyStateSvgPath: 'foo',
+          errorStateSvgPath: 'foo',
+          isMergeRequestTable: true,
+          mergeRequestId: 3,
+          targetProjectFullPath: 'test/project',
+          ...props,
+        },
+        mocks: {
+          $toast,
+        },
+        stubs: {
+          GlModal: stubComponent(GlModal, {
+            template: '<div />',
+            methods: { show: showMock },
+          }),
+        },
+        apolloProvider,
+      });
+    };
+
+    describe('hasInProgressCreationRequests computed property', () => {
+      beforeEach(() => {
+        mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipeline]);
+      });
+
+      it('returns true when status is IN_PROGRESS', async () => {
+        const inProgressRequests = [
+          { status: 'IN_PROGRESS', pipelineId: null, error: null },
+          { status: 'SUCCEEDED', pipelineId: '123', error: null },
+        ];
+
+        getPipelineCreationRequestsHandler.mockResolvedValue(
+          generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+        );
+
+        createComponentWithGraphQL();
+
+        await waitForPromises();
+
+        expect(wrapper.vm.hasInProgressCreationRequests).toBe(true);
+      });
+
+      it('returns false when no in-progress requests', async () => {
+        const completedRequests = [
+          { status: 'SUCCEEDED', pipelineId: '123', error: null },
+          { status: 'FAILED', pipelineId: null, error: 'Pipeline failed' },
+        ];
+
+        getPipelineCreationRequestsHandler.mockResolvedValue(
+          generatePipelineCreationRequestsResponse({ requests: completedRequests }),
+        );
+
+        createComponentWithGraphQL();
+
+        await waitForPromises();
+
+        expect(wrapper.vm.hasInProgressCreationRequests).toBe(false);
+      });
+
+      it('returns false when pipelineCreationRequests is empty', async () => {
+        getPipelineCreationRequestsHandler.mockResolvedValue(
+          generatePipelineCreationRequestsResponse({ requests: [] }),
+        );
+
+        createComponentWithGraphQL();
+
+        await waitForPromises();
+
+        expect(wrapper.vm.hasInProgressCreationRequests).toBe(false);
+      });
+    });
+
+    describe('getPipelineCreationRequests query', () => {
+      beforeEach(() => {
+        mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipeline]);
+      });
+
+      it('calls getPipelineCreationRequests query with correct variables', async () => {
+        createComponentWithGraphQL({
+          targetProjectFullPath: 'test/project',
+          mergeRequestId: 3,
+        });
+
+        await waitForPromises();
+
+        expect(getPipelineCreationRequestsHandler).toHaveBeenCalledWith({
+          fullPath: 'test/project',
+          mergeRequestIid: '3',
+        });
+      });
+
+      it('skips query when not on merge request table', async () => {
+        createComponentWithGraphQL({
+          isMergeRequestTable: false,
+          targetProjectFullPath: 'test/project',
+          mergeRequestId: 3,
+        });
+
+        await waitForPromises();
+
+        expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+      });
+
+      it('skips query when mergeRequestId is missing', async () => {
+        createComponentWithGraphQL({
+          targetProjectFullPath: 'test/project',
+          mergeRequestId: null,
+        });
+
+        await waitForPromises();
+
+        expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+      });
+
+      it('skips query when targetProjectFullPath is missing', async () => {
+        createComponentWithGraphQL({
+          targetProjectFullPath: null,
+          mergeRequestId: 3,
+        });
+
+        await waitForPromises();
+
+        expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+      });
+    });
+  });
 });
-- 
GitLab


From fe9f7911c2422926a510b191c69edaa35b563887 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 7 Oct 2025 05:00:25 +0530
Subject: [PATCH 09/34] Implement run pipeline loader tests

---
 .../legacy_pipelines_table_wrapper_spec.js    | 199 +++++++++++++-----
 1 file changed, 143 insertions(+), 56 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index 30a89841efd080..57931bf263d13b 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -68,6 +68,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
   const findMrPipelinesDocsLink = () => wrapper.findByTestId('mr-pipelines-docs-link');
   const findUserPermissionsDocsLink = () => wrapper.findByTestId('user-permissions-docs-link');
   const findPipelinesTable = () => wrapper.findComponent(PipelinesTable);
+  const findSkeletonLoader = () => wrapper.find('.gl-animate-skeleton-loader');
 
   const createComponent = ({ props = {}, mountFn = mountExtended } = {}) => {
     wrapper = mountFn(LegacyPipelinesTableWrapper, {
@@ -496,12 +497,34 @@ describe('Pipelines table in Commits and Merge requests', () => {
     let getPipelineCreationRequestsHandler;
     let mockedSubscription;
 
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
     beforeEach(() => {
       getPipelineCreationRequestsHandler = jest
         .fn()
         .mockResolvedValue(generatePipelineCreationRequestsResponse());
 
       mockedSubscription = createMockApolloSubscription();
+      mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [
+        {
+          ...pipeline,
+          flags: {
+            ...pipeline.flags,
+            detached_merge_request_pipeline: true,
+            merge_request_pipeline: true,
+          },
+        },
+      ]);
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
     });
 
     const createComponentWithGraphQL = (props = {}, handlers = []) => {
@@ -545,63 +568,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
     };
 
-    describe('hasInProgressCreationRequests computed property', () => {
-      beforeEach(() => {
-        mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipeline]);
-      });
-
-      it('returns true when status is IN_PROGRESS', async () => {
-        const inProgressRequests = [
-          { status: 'IN_PROGRESS', pipelineId: null, error: null },
-          { status: 'SUCCEEDED', pipelineId: '123', error: null },
-        ];
-
-        getPipelineCreationRequestsHandler.mockResolvedValue(
-          generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
-        );
-
-        createComponentWithGraphQL();
-
-        await waitForPromises();
-
-        expect(wrapper.vm.hasInProgressCreationRequests).toBe(true);
-      });
-
-      it('returns false when no in-progress requests', async () => {
-        const completedRequests = [
-          { status: 'SUCCEEDED', pipelineId: '123', error: null },
-          { status: 'FAILED', pipelineId: null, error: 'Pipeline failed' },
-        ];
-
-        getPipelineCreationRequestsHandler.mockResolvedValue(
-          generatePipelineCreationRequestsResponse({ requests: completedRequests }),
-        );
-
-        createComponentWithGraphQL();
-
-        await waitForPromises();
-
-        expect(wrapper.vm.hasInProgressCreationRequests).toBe(false);
-      });
-
-      it('returns false when pipelineCreationRequests is empty', async () => {
-        getPipelineCreationRequestsHandler.mockResolvedValue(
-          generatePipelineCreationRequestsResponse({ requests: [] }),
-        );
-
-        createComponentWithGraphQL();
-
-        await waitForPromises();
-
-        expect(wrapper.vm.hasInProgressCreationRequests).toBe(false);
-      });
-    });
-
     describe('getPipelineCreationRequests query', () => {
-      beforeEach(() => {
-        mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipeline]);
-      });
-
       it('calls getPipelineCreationRequests query with correct variables', async () => {
         createComponentWithGraphQL({
           targetProjectFullPath: 'test/project',
@@ -650,5 +617,125 @@ describe('Pipelines table in Commits and Merge requests', () => {
         expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
       });
     });
+
+    describe('Run pipeline button', () => {
+      describe('when there are in progress pipeline creation requests', () => {
+        it('disables & enables loading on desktop button', async () => {
+          const inProgressRequests = [
+            { status: 'IN_PROGRESS', pipelineId: null, error: null },
+            { status: 'SUCCEEDED', pipelineId: '123', error: null },
+          ];
+
+          getPipelineCreationRequestsHandler.mockResolvedValue(
+            generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+          );
+
+          createComponentWithGraphQL({
+            canRunPipeline: true,
+            isMergeRequestTable: true,
+            mergeRequestId: 3,
+            projectId: '5',
+          });
+
+          await waitForPromises();
+
+          expect(findRunPipelineBtn().exists()).toBe(true);
+          expect(findRunPipelineBtn().props('disabled')).toBe(true);
+          expect(findRunPipelineBtn().props('loading')).toBe(true);
+        });
+
+        it('disables & enables loading on mobile button', async () => {
+          const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
+
+          getPipelineCreationRequestsHandler.mockResolvedValue(
+            generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+          );
+
+          createComponentWithGraphQL({
+            canRunPipeline: true,
+            isMergeRequestTable: true,
+            mergeRequestId: 3,
+            projectId: '5',
+          });
+
+          await waitForPromises();
+
+          expect(findRunPipelineBtnMobile().exists()).toBe(true);
+          expect(findRunPipelineBtnMobile().props('disabled')).toBe(true);
+          expect(findRunPipelineBtnMobile().props('loading')).toBe(true);
+        });
+
+        it('disables & enables loading on empty state button', async () => {
+          mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
+
+          const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
+
+          getPipelineCreationRequestsHandler.mockResolvedValue(
+            generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+          );
+
+          createComponentWithGraphQL({
+            canRunPipeline: true,
+            isMergeRequestTable: true,
+            mergeRequestId: 3,
+            projectId: '5',
+          });
+
+          await waitForPromises();
+
+          expect(findRunPipelineBtn().exists()).toBe(true);
+          expect(findRunPipelineBtn().props('disabled')).toBe(true);
+          expect(findRunPipelineBtn().props('loading')).toBe(true);
+        });
+      });
+
+      describe('shows skeleton loader', () => {
+        it('after a small delay when run pipeline button is clicked', async () => {
+          createComponentWithGraphQL({
+            canRunPipeline: true,
+            isMergeRequestTable: true,
+            mergeRequestId: 3,
+            projectId: '5',
+          });
+
+          await waitForPromises();
+
+          expect(findSkeletonLoader().exists()).toBe(false);
+
+          await findRunPipelineBtn().trigger('click');
+
+          expect(findSkeletonLoader().exists()).toBe(false);
+
+          jest.runAllTimers();
+          await nextTick();
+
+          expect(findSkeletonLoader().exists()).toBe(true);
+        });
+
+        it('when hasInProgressCreationRequests becomes true', async () => {
+          getPipelineCreationRequestsHandler.mockResolvedValue(
+            generatePipelineCreationRequestsResponse({
+              requests: [{ status: 'IN_PROGRESS', pipelineId: null, error: null }],
+            }),
+          );
+
+          createComponentWithGraphQL({
+            canRunPipeline: true,
+            isMergeRequestTable: true,
+            mergeRequestId: 3,
+            projectId: '5',
+          });
+
+          await waitForPromises();
+
+          expect(findSkeletonLoader().exists()).toBe(false);
+
+          jest.runAllTimers();
+          await nextTick();
+
+          expect(findSkeletonLoader().exists()).toBe(true);
+        });
+      });
+    });
   });
 });
-- 
GitLab


From 4932ab98d0b105c5723be49c0669690ee17018e4 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 7 Oct 2025 05:07:59 +0530
Subject: [PATCH 10/34] Fix it block title

---
 .../commit/pipelines/legacy_pipelines_table_wrapper_spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index 57931bf263d13b..ddc6fdf2447a10 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -620,7 +620,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
     describe('Run pipeline button', () => {
       describe('when there are in progress pipeline creation requests', () => {
-        it('disables & enables loading on desktop button', async () => {
+        it('disables the desktop button & enables loading', async () => {
           const inProgressRequests = [
             { status: 'IN_PROGRESS', pipelineId: null, error: null },
             { status: 'SUCCEEDED', pipelineId: '123', error: null },
@@ -644,7 +644,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
           expect(findRunPipelineBtn().props('loading')).toBe(true);
         });
 
-        it('disables & enables loading on mobile button', async () => {
+        it('disables the mobile button & enables loading', async () => {
           const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
 
           getPipelineCreationRequestsHandler.mockResolvedValue(
@@ -665,7 +665,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
           expect(findRunPipelineBtnMobile().props('loading')).toBe(true);
         });
 
-        it('disables & enables loading on empty state button', async () => {
+        it('disables the empty state button & enables loading', async () => {
           mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
 
           const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
-- 
GitLab


From edee0933d9586de219d9e5903efdee021dfad18f Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 7 Oct 2025 18:36:16 +0530
Subject: [PATCH 11/34] Clear timeout before unmounting

---
 .../commit/pipelines/legacy_pipelines_table_wrapper.vue      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 3b4cfccfad1921..aac4811e060e10 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -179,6 +179,9 @@ export default {
     this.service = new PipelinesService(this.endpoint);
     this.requestData = { page: this.page };
   },
+  beforeUnmount() {
+    clearTimeout(this.loaderTimeout);
+  },
   methods: {
     // eslint-disable-next-line vue/no-unused-properties -- successCallback() is used by the `PipelinesMixin` mixin
     successCallback(resp) {
@@ -267,7 +270,7 @@ export default {
       variables() {
         return {
           fullPath: this.targetProjectFullPath,
-          mergeRequestIid: this.mergeRequestId.toString(),
+          mergeRequestIid: String(this.mergeRequestId),
         };
       },
       skip() {
-- 
GitLab


From a867356e6c62f4d078ef69b922178ebef4af8d8a Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 9 Oct 2025 07:28:51 +0530
Subject: [PATCH 12/34] Fix failing legacy_pipelines_table_wrapper_spec test

---
 .../legacy_pipelines_table_wrapper.vue        |  17 +-
 .../legacy_pipelines_table_wrapper_spec.js    | 192 +++++++++---------
 2 files changed, 102 insertions(+), 107 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index aac4811e060e10..cb3ff061c52605 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -154,6 +154,11 @@ export default {
     hasInProgressCreationRequests() {
       return this.countRequestsByStatus(this.pipelineCreationRequests, 'IN_PROGRESS') > 0;
     },
+    showRunPipelineButtonLoader() {
+      return this.isMergeRequestTable
+        ? this.hasInProgressCreationRequests
+        : this.state.isRunningMergeRequestPipeline;
+    },
   },
   watch: {
     hasInProgressCreationRequests: {
@@ -406,8 +411,8 @@ export default {
           <div class="gl-align-middle">
             <gl-button
               variant="confirm"
-              :loading="hasInProgressCreationRequests"
-              :disabled="hasInProgressCreationRequests"
+              :loading="showRunPipelineButtonLoader"
+              :disabled="showRunPipelineButtonLoader"
               data-testid="run_pipeline_button"
               @click="tryRunPipeline"
             >
@@ -426,8 +431,8 @@ export default {
         <gl-button
           class="gl-mb-3 gl-mt-3 gl-w-full @md/panel:gl-w-auto"
           data-testid="run_pipeline_button_mobile"
-          :loading="hasInProgressCreationRequests"
-          :disabled="hasInProgressCreationRequests"
+          :loading="showRunPipelineButtonLoader"
+          :disabled="showRunPipelineButtonLoader"
           @click="tryRunPipeline"
         >
           {{ $options.i18n.runPipelineText }}
@@ -448,8 +453,8 @@ export default {
           <div v-if="canRenderPipelineButton" class="gl-text-right">
             <gl-button
               data-testid="run_pipeline_button"
-              :loading="hasInProgressCreationRequests"
-              :disabled="hasInProgressCreationRequests"
+              :loading="showRunPipelineButtonLoader"
+              :disabled="showRunPipelineButtonLoader"
               @click="tryRunPipeline"
             >
               {{ $options.i18n.runPipelineText }}
diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index ddc6fdf2447a10..2955d4f59c508a 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -55,6 +55,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
   let wrapper;
   let pipeline;
   let mock;
+  let getPipelineCreationRequestsHandler;
+  let mockedSubscription;
   const showMock = jest.fn();
 
   const findRunPipelineBtn = () => wrapper.findByTestId('run_pipeline_button');
@@ -70,7 +72,24 @@ describe('Pipelines table in Commits and Merge requests', () => {
   const findPipelinesTable = () => wrapper.findComponent(PipelinesTable);
   const findSkeletonLoader = () => wrapper.find('.gl-animate-skeleton-loader');
 
-  const createComponent = ({ props = {}, mountFn = mountExtended } = {}) => {
+  const createComponent = ({ props = {}, handlers = [], mountFn = mountExtended } = {}) => {
+    const requestHandlers = [
+      [getPipelineCreationRequests, getPipelineCreationRequestsHandler],
+      ...handlers,
+    ];
+
+    const subscriptionHandlers = [
+      [pipelineCreationRequestsUpdatedSubscription, () => mockedSubscription],
+    ];
+
+    const apolloProvider = createMockApollo(requestHandlers);
+
+    subscriptionHandlers.forEach(([query, stream]) => {
+      apolloProvider.defaultClient.setRequestHandler(query, stream);
+    });
+
+    apolloProvider.defaultClient.clearStore();
+
     wrapper = mountFn(LegacyPipelinesTableWrapper, {
       propsData: {
         endpoint: 'endpoint.json',
@@ -87,12 +106,17 @@ describe('Pipelines table in Commits and Merge requests', () => {
           methods: { show: showMock },
         }),
       },
-      apolloProvider: createMockApollo(),
+      apolloProvider,
     });
   };
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
+    getPipelineCreationRequestsHandler = jest
+      .fn()
+      .mockResolvedValue(generatePipelineCreationRequestsResponse());
+
+    mockedSubscription = createMockApolloSubscription();
 
     const { pipelines } = fixture;
 
@@ -264,6 +288,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 isMergeRequestTable: true,
                 mergeRequestId: 3,
                 projectId: '5',
+                targetProjectFullPath: 'test/project',
               },
             });
 
@@ -280,18 +305,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
             await findRunPipelineBtnMobile().trigger('click');
 
             expect(findRunPipelineBtn().props('loading')).toBe(true);
-
-            await waitForPromises();
-
-            expect(findRunPipelineBtn().props('disabled')).toBe(false);
-          });
-
-          it('sets isCreatingPipeline to true in pipelines table', async () => {
-            expect(findPipelinesTable().props('isCreatingPipeline')).toBe(false);
-
-            await findRunPipelineBtn().trigger('click');
-
-            expect(findPipelinesTable().props('isCreatingPipeline')).toBe(true);
           });
         });
 
@@ -494,9 +507,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
   });
 
   describe('Apollo GraphQL integration', () => {
-    let getPipelineCreationRequestsHandler;
-    let mockedSubscription;
-
     beforeAll(() => {
       jest.useFakeTimers();
     });
@@ -506,11 +516,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
     });
 
     beforeEach(() => {
-      getPipelineCreationRequestsHandler = jest
-        .fn()
-        .mockResolvedValue(generatePipelineCreationRequestsResponse());
-
-      mockedSubscription = createMockApolloSubscription();
       mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [
         {
           ...pipeline,
@@ -527,52 +532,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
       jest.clearAllTimers();
     });
 
-    const createComponentWithGraphQL = (props = {}, handlers = []) => {
-      const requestHandlers = [
-        [getPipelineCreationRequests, getPipelineCreationRequestsHandler],
-        ...handlers,
-      ];
-
-      const subscriptionHandlers = [
-        [pipelineCreationRequestsUpdatedSubscription, () => mockedSubscription],
-      ];
-
-      const apolloProvider = createMockApollo(requestHandlers);
-
-      subscriptionHandlers.forEach(([query, stream]) => {
-        apolloProvider.defaultClient.setRequestHandler(query, stream);
-      });
-
-      apolloProvider.defaultClient.clearStore();
-
-      wrapper = mountExtended(LegacyPipelinesTableWrapper, {
-        propsData: {
-          endpoint: 'endpoint.json',
-          emptyStateSvgPath: 'foo',
-          errorStateSvgPath: 'foo',
-          isMergeRequestTable: true,
-          mergeRequestId: 3,
-          targetProjectFullPath: 'test/project',
-          ...props,
-        },
-        mocks: {
-          $toast,
-        },
-        stubs: {
-          GlModal: stubComponent(GlModal, {
-            template: '<div />',
-            methods: { show: showMock },
-          }),
-        },
-        apolloProvider,
-      });
-    };
-
     describe('getPipelineCreationRequests query', () => {
       it('calls getPipelineCreationRequests query with correct variables', async () => {
-        createComponentWithGraphQL({
-          targetProjectFullPath: 'test/project',
-          mergeRequestId: 3,
+        createComponent({
+          props: {
+            isMergeRequestTable: true,
+            targetProjectFullPath: 'test/project',
+            mergeRequestId: 3,
+          },
         });
 
         await waitForPromises();
@@ -584,10 +551,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
 
       it('skips query when not on merge request table', async () => {
-        createComponentWithGraphQL({
-          isMergeRequestTable: false,
-          targetProjectFullPath: 'test/project',
-          mergeRequestId: 3,
+        createComponent({
+          props: {
+            isMergeRequestTable: false,
+            targetProjectFullPath: 'test/project',
+            mergeRequestId: 3,
+          },
         });
 
         await waitForPromises();
@@ -596,9 +565,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
 
       it('skips query when mergeRequestId is missing', async () => {
-        createComponentWithGraphQL({
-          targetProjectFullPath: 'test/project',
-          mergeRequestId: null,
+        createComponent({
+          props: {
+            targetProjectFullPath: 'test/project',
+            mergeRequestId: null,
+            isMergeRequestTable: true,
+          },
         });
 
         await waitForPromises();
@@ -607,9 +579,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
 
       it('skips query when targetProjectFullPath is missing', async () => {
-        createComponentWithGraphQL({
-          targetProjectFullPath: null,
-          mergeRequestId: 3,
+        createComponent({
+          props: {
+            targetProjectFullPath: null,
+            mergeRequestId: 3,
+            isMergeRequestTable: true,
+          },
         });
 
         await waitForPromises();
@@ -630,11 +605,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
             generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
           );
 
-          createComponentWithGraphQL({
-            canRunPipeline: true,
-            isMergeRequestTable: true,
-            mergeRequestId: 3,
-            projectId: '5',
+          createComponent({
+            props: {
+              canRunPipeline: true,
+              isMergeRequestTable: true,
+              mergeRequestId: 3,
+              projectId: '5',
+              targetProjectFullPath: 'test/project',
+            },
           });
 
           await waitForPromises();
@@ -651,11 +629,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
             generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
           );
 
-          createComponentWithGraphQL({
-            canRunPipeline: true,
-            isMergeRequestTable: true,
-            mergeRequestId: 3,
-            projectId: '5',
+          createComponent({
+            props: {
+              canRunPipeline: true,
+              isMergeRequestTable: true,
+              mergeRequestId: 3,
+              projectId: '5',
+              targetProjectFullPath: 'test/project',
+            },
           });
 
           await waitForPromises();
@@ -674,11 +655,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
             generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
           );
 
-          createComponentWithGraphQL({
-            canRunPipeline: true,
-            isMergeRequestTable: true,
-            mergeRequestId: 3,
-            projectId: '5',
+          createComponent({
+            props: {
+              canRunPipeline: true,
+              isMergeRequestTable: true,
+              mergeRequestId: 3,
+              projectId: '5',
+              targetProjectFullPath: 'test/project',
+            },
           });
 
           await waitForPromises();
@@ -691,11 +675,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
       describe('shows skeleton loader', () => {
         it('after a small delay when run pipeline button is clicked', async () => {
-          createComponentWithGraphQL({
-            canRunPipeline: true,
-            isMergeRequestTable: true,
-            mergeRequestId: 3,
-            projectId: '5',
+          createComponent({
+            props: {
+              canRunPipeline: true,
+              isMergeRequestTable: true,
+              mergeRequestId: 3,
+              projectId: '5',
+              targetProjectFullPath: 'test/project',
+            },
           });
 
           await waitForPromises();
@@ -719,11 +706,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
             }),
           );
 
-          createComponentWithGraphQL({
-            canRunPipeline: true,
-            isMergeRequestTable: true,
-            mergeRequestId: 3,
-            projectId: '5',
+          createComponent({
+            props: {
+              canRunPipeline: true,
+              isMergeRequestTable: true,
+              mergeRequestId: 3,
+              projectId: '5',
+              targetProjectFullPath: 'test/project',
+            },
           });
 
           await waitForPromises();
-- 
GitLab


From 173c34fe90444dca870e905492bbd6ccb12c5ea1 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 9 Oct 2025 09:33:39 +0530
Subject: [PATCH 13/34] Test pipeline creation request subscription update

---
 .../legacy_pipelines_table_wrapper_spec.js    | 137 +++++++++++++++---
 1 file changed, 118 insertions(+), 19 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index 2955d4f59c508a..b2eacffe059c43 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -2,7 +2,6 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlLoadingIcon, GlModal, GlTableLite } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
-import { createMockSubscription as createMockApolloSubscription } from 'mock-apollo-client';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -31,32 +30,43 @@ const $toast = {
 
 jest.mock('~/alert');
 
+const generateMockPipelineCreationMergeRequest = (requests) => ({
+  id: 'gid://gitlab/MergeRequest/3',
+  iid: '3',
+  pipelineCreationRequests: requests,
+});
+
 const generatePipelineCreationRequestsResponse = ({
   requests = [
     { status: 'IN_PROGRESS', pipelineId: null, error: null },
     { status: 'SUCCEEDED', pipelineId: '123', error: null },
   ],
-} = {}) => {
-  return {
-    data: {
-      project: {
-        id: 'gid://gitlab/Project/5',
-        mergeRequest: {
-          id: 'gid://gitlab/MergeRequest/3',
-          iid: '3',
-          pipelineCreationRequests: requests,
-        },
-      },
+} = {}) => ({
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/5',
+      mergeRequest: generateMockPipelineCreationMergeRequest(requests),
     },
-  };
-};
+  },
+});
+
+const generatePipelineCreationSubscriptionUpdateResponse = ({
+  requests = [
+    { status: 'IN_PROGRESS', pipelineId: null, error: null },
+    { status: 'SUCCEEDED', pipelineId: '123', error: null },
+  ],
+} = {}) => ({
+  data: {
+    ciPipelineCreationRequestsUpdated: generateMockPipelineCreationMergeRequest(requests),
+  },
+});
 
 describe('Pipelines table in Commits and Merge requests', () => {
   let wrapper;
   let pipeline;
   let mock;
   let getPipelineCreationRequestsHandler;
-  let mockedSubscription;
+  let mockSubscriptionHandler;
   const showMock = jest.fn();
 
   const findRunPipelineBtn = () => wrapper.findByTestId('run_pipeline_button');
@@ -79,13 +89,13 @@ describe('Pipelines table in Commits and Merge requests', () => {
     ];
 
     const subscriptionHandlers = [
-      [pipelineCreationRequestsUpdatedSubscription, () => mockedSubscription],
+      [pipelineCreationRequestsUpdatedSubscription, mockSubscriptionHandler],
     ];
 
     const apolloProvider = createMockApollo(requestHandlers);
 
-    subscriptionHandlers.forEach(([query, stream]) => {
-      apolloProvider.defaultClient.setRequestHandler(query, stream);
+    subscriptionHandlers.forEach(([query, handler]) => {
+      apolloProvider.defaultClient.setRequestHandler(query, handler);
     });
 
     apolloProvider.defaultClient.clearStore();
@@ -116,7 +126,9 @@ describe('Pipelines table in Commits and Merge requests', () => {
       .fn()
       .mockResolvedValue(generatePipelineCreationRequestsResponse());
 
-    mockedSubscription = createMockApolloSubscription();
+    mockSubscriptionHandler = jest
+      .fn()
+      .mockResolvedValue(generatePipelineCreationSubscriptionUpdateResponse());
 
     const { pipelines } = fixture;
 
@@ -593,6 +605,93 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
     });
 
+    describe('pipelineCreationRequestsUpdated subscription', () => {
+      it('calls subscription with correct variables', async () => {
+        createComponent({
+          props: {
+            isMergeRequestTable: true,
+            targetProjectFullPath: 'test/project',
+            mergeRequestId: 3,
+          },
+        });
+
+        await waitForPromises();
+
+        expect(mockSubscriptionHandler).toHaveBeenCalledWith({
+          mergeRequestId: 'gid://gitlab/MergeRequest/3',
+        });
+      });
+
+      it('skips subscription when not on merge request table', async () => {
+        createComponent({
+          props: {
+            isMergeRequestTable: false,
+            targetProjectFullPath: 'test/project',
+            mergeRequestId: 3,
+          },
+        });
+
+        await waitForPromises();
+
+        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+      });
+
+      it('skips subscription when mergeRequestId is missing', async () => {
+        createComponent({
+          props: {
+            isMergeRequestTable: true,
+            targetProjectFullPath: 'test/project',
+            mergeRequestId: null,
+          },
+        });
+
+        await waitForPromises();
+
+        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+      });
+
+      it('skips subscription when targetProjectFullPath is missing', async () => {
+        createComponent({
+          props: {
+            isMergeRequestTable: true,
+            targetProjectFullPath: null,
+            mergeRequestId: 3,
+          },
+        });
+
+        await waitForPromises();
+
+        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+      });
+
+      it('skips subscription when mergeRequestGlobalId is not available', async () => {
+        getPipelineCreationRequestsHandler.mockResolvedValue({
+          data: {
+            project: {
+              id: 'gid://gitlab/Project/5',
+              mergeRequest: {
+                id: null,
+                iid: '3',
+                pipelineCreationRequests: [],
+              },
+            },
+          },
+        });
+
+        createComponent({
+          props: {
+            isMergeRequestTable: true,
+            targetProjectFullPath: 'test/project',
+            mergeRequestId: 3,
+          },
+        });
+
+        await waitForPromises();
+
+        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+      });
+    });
+
     describe('Run pipeline button', () => {
       describe('when there are in progress pipeline creation requests', () => {
         it('disables the desktop button & enables loading', async () => {
-- 
GitLab


From 1fad3574ea1b01a5862b18f2a2a87f839af8d69c Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 23 Oct 2025 21:07:54 +0530
Subject: [PATCH 14/34] Quick fixes based on MR feedback

---
 .../legacy_pipelines_table_wrapper.vue        | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index cb3ff061c52605..18f65d93bb31df 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -11,7 +11,7 @@ import {
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import PipelinesTable from '~/ci/common/pipelines_table.vue';
-import { PIPELINE_ID_KEY } from '~/ci/constants';
+import { PIPELINE_ID_KEY, PIPELINE_LOADER_DEBOUNCE_IN_MS } from '~/ci/constants';
 import eventHub from '~/ci/event_hub';
 import PipelinesMixin from '~/ci/pipeline_details/mixins/pipelines_mixin';
 import PipelinesService from '~/ci/pipelines_page/services/pipelines_service';
@@ -152,7 +152,7 @@ export default {
       );
     },
     hasInProgressCreationRequests() {
-      return this.countRequestsByStatus(this.pipelineCreationRequests, 'IN_PROGRESS') > 0;
+      return this.requestLengthByStatus(this.pipelineCreationRequests, 'IN_PROGRESS') > 0;
     },
     showRunPipelineButtonLoader() {
       return this.isMergeRequestTable
@@ -171,11 +171,11 @@ export default {
     },
     pipelineCreationRequests: {
       handler(newRequests, oldRequests) {
-        if (this.didRequestsSucceedSince(oldRequests, newRequests)) {
+        if (this.hasSuccessCountIncreased(oldRequests, newRequests)) {
           this.onRefreshPipelinesTable();
         }
 
-        this.showCreationFailedAlert = this.didRequestsFailedSince(oldRequests, newRequests);
+        this.showCreationFailedAlert = this.hasFailureCountIncreased(oldRequests, newRequests);
       },
       deep: true,
     },
@@ -235,19 +235,19 @@ export default {
         this.$refs.modal.show();
       }
     },
-    didRequestsSucceedSince(previousRequests = [], currentRequests = []) {
-      const prevSucceededCount = this.countRequestsByStatus(previousRequests, 'SUCCEEDED');
-      const currSucceededCount = this.countRequestsByStatus(currentRequests, 'SUCCEEDED');
+    hasSuccessCountIncreased(previousRequests = [], currentRequests = []) {
+      const oldRequestsCount = this.requestLengthByStatus(previousRequests, 'SUCCEEDED');
+      const newRequestsCount = this.requestLengthByStatus(currentRequests, 'SUCCEEDED');
 
-      return currSucceededCount > prevSucceededCount;
+      return newRequestsCount > oldRequestsCount;
     },
-    didRequestsFailedSince(previousRequests = [], currentRequests = []) {
-      const prevFailedCount = this.countRequestsByStatus(previousRequests, 'FAILED');
-      const currFailedCount = this.countRequestsByStatus(currentRequests, 'FAILED');
+    hasFailureCountIncreased(previousRequests = [], currentRequests = []) {
+      const oldRequestsCount = this.requestLengthByStatus(previousRequests, 'FAILED');
+      const newRequestsCount = this.requestLengthByStatus(currentRequests, 'FAILED');
 
-      return currFailedCount > prevFailedCount;
+      return newRequestsCount > oldRequestsCount;
     },
-    countRequestsByStatus(requests, status) {
+    requestLengthByStatus(requests, status) {
       return requests.filter((request) => request.status === status).length;
     },
     startDebouncedPipelineLoader() {
@@ -257,9 +257,8 @@ export default {
 
       this.loaderTimeout = setTimeout(() => {
         this.isCreatingPipeline = true;
-      }, 300);
+      }, PIPELINE_LOADER_DEBOUNCE_IN_MS);
     },
-
     stopDebouncedPipelineLoader() {
       if (this.loaderTimeout) {
         clearTimeout(this.loaderTimeout);
-- 
GitLab


From 0c48b0ead7591b8e66806853a5990737d7bcd66a Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Fri, 24 Oct 2025 17:47:57 +0530
Subject: [PATCH 15/34] Add feature flag to enable/disable loader

---
 .../pipelines/legacy_pipelines_table_wrapper.vue     | 12 ++++++++++--
 .../projects/merge_requests_controller.rb            |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 18f65d93bb31df..dbcf7ccd64a066 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -102,6 +102,9 @@ export default {
   },
 
   computed: {
+    isRealtimePipelineCreationRequestsEnabled() {
+      return Boolean(window.gon?.features?.ciPipelineCreationRequestsRealtime);
+    },
     shouldRenderTable() {
       return !this.isLoading && this.state.pipelines.length > 0 && !this.hasError;
     },
@@ -155,7 +158,7 @@ export default {
       return this.requestLengthByStatus(this.pipelineCreationRequests, 'IN_PROGRESS') > 0;
     },
     showRunPipelineButtonLoader() {
-      return this.isMergeRequestTable
+      return this.isMergeRequestTable && this.isRealtimePipelineCreationRequestsEnabled
         ? this.hasInProgressCreationRequests
         : this.state.isRunningMergeRequestPipeline;
     },
@@ -278,7 +281,12 @@ export default {
         };
       },
       skip() {
-        return !this.isMergeRequestTable || !this.mergeRequestId || !this.targetProjectFullPath;
+        return (
+          !this.isRealtimePipelineCreationRequestsEnabled ||
+          !this.isMergeRequestTable ||
+          !this.mergeRequestId ||
+          !this.targetProjectFullPath
+        );
       },
       update(data) {
         if (data.project?.mergeRequest?.id) {
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 9f4e3296e72b8a..d714f78cc0d937 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -40,6 +40,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
 
   before_action only: [:show, :diffs, :rapid_diffs, :reports] do
     push_frontend_feature_flag(:mr_pipelines_graphql, project)
+    push_frontend_feature_flag(:ci_pipeline_creation_requests_realtime, project)
     push_frontend_feature_flag(:notifications_todos_buttons, current_user)
     push_frontend_feature_flag(:mr_review_batch_submit, current_user)
   end
-- 
GitLab


From 5dfab05a3e03c7c27d13efaf1da7c5b3df2bd75a Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Sat, 25 Oct 2025 01:16:47 +0530
Subject: [PATCH 16/34] Add feature flag checks for pipelines table

---
 .../legacy_pipelines_table_wrapper_spec.js    | 473 ++++++++++--------
 1 file changed, 257 insertions(+), 216 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index b2eacffe059c43..8cd0c98ccfba2c 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -544,285 +544,326 @@ describe('Pipelines table in Commits and Merge requests', () => {
       jest.clearAllTimers();
     });
 
-    describe('getPipelineCreationRequests query', () => {
-      it('calls getPipelineCreationRequests query with correct variables', async () => {
-        createComponent({
-          props: {
-            isMergeRequestTable: true,
-            targetProjectFullPath: 'test/project',
-            mergeRequestId: 3,
-          },
+    describe('with feature flag ci_pipeline_creation_requests_realtime', () => {
+      describe('when feature flag is OFF', () => {
+        beforeEach(() => {
+          window.gon = { features: { ciPipelineCreationRequestsRealtime: false } };
         });
 
-        await waitForPromises();
+        it('skips getPipelineCreationRequests query', async () => {
+          createComponent({
+            props: {
+              isMergeRequestTable: true,
+              targetProjectFullPath: 'test/project',
+              mergeRequestId: 3,
+            },
+          });
 
-        expect(getPipelineCreationRequestsHandler).toHaveBeenCalledWith({
-          fullPath: 'test/project',
-          mergeRequestIid: '3',
-        });
-      });
+          await waitForPromises();
 
-      it('skips query when not on merge request table', async () => {
-        createComponent({
-          props: {
-            isMergeRequestTable: false,
-            targetProjectFullPath: 'test/project',
-            mergeRequestId: 3,
-          },
+          expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
         });
 
-        await waitForPromises();
+        it('skips subscription', async () => {
+          createComponent({
+            props: {
+              isMergeRequestTable: true,
+              targetProjectFullPath: 'test/project',
+              mergeRequestId: 3,
+            },
+          });
 
-        expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
-      });
+          await waitForPromises();
 
-      it('skips query when mergeRequestId is missing', async () => {
-        createComponent({
-          props: {
-            targetProjectFullPath: 'test/project',
-            mergeRequestId: null,
-            isMergeRequestTable: true,
-          },
+          expect(mockSubscriptionHandler).not.toHaveBeenCalled();
         });
-
-        await waitForPromises();
-
-        expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
       });
 
-      it('skips query when targetProjectFullPath is missing', async () => {
-        createComponent({
-          props: {
-            targetProjectFullPath: null,
-            mergeRequestId: 3,
-            isMergeRequestTable: true,
-          },
+      describe('when feature flag is ON', () => {
+        beforeEach(() => {
+          window.gon = { features: { ciPipelineCreationRequestsRealtime: true } };
         });
+        describe('getPipelineCreationRequests query', () => {
+          it('calls getPipelineCreationRequests query with correct variables', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
 
-        await waitForPromises();
-
-        expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
-      });
-    });
+            await waitForPromises();
 
-    describe('pipelineCreationRequestsUpdated subscription', () => {
-      it('calls subscription with correct variables', async () => {
-        createComponent({
-          props: {
-            isMergeRequestTable: true,
-            targetProjectFullPath: 'test/project',
-            mergeRequestId: 3,
-          },
-        });
+            expect(getPipelineCreationRequestsHandler).toHaveBeenCalledWith({
+              fullPath: 'test/project',
+              mergeRequestIid: '3',
+            });
+          });
 
-        await waitForPromises();
+          it('skips query when not on merge request table', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: false,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
 
-        expect(mockSubscriptionHandler).toHaveBeenCalledWith({
-          mergeRequestId: 'gid://gitlab/MergeRequest/3',
-        });
-      });
+            await waitForPromises();
 
-      it('skips subscription when not on merge request table', async () => {
-        createComponent({
-          props: {
-            isMergeRequestTable: false,
-            targetProjectFullPath: 'test/project',
-            mergeRequestId: 3,
-          },
-        });
+            expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+          });
 
-        await waitForPromises();
+          it('skips query when mergeRequestId is missing', async () => {
+            createComponent({
+              props: {
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: null,
+                isMergeRequestTable: true,
+              },
+            });
 
-        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-      });
+            await waitForPromises();
 
-      it('skips subscription when mergeRequestId is missing', async () => {
-        createComponent({
-          props: {
-            isMergeRequestTable: true,
-            targetProjectFullPath: 'test/project',
-            mergeRequestId: null,
-          },
-        });
+            expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+          });
 
-        await waitForPromises();
+          it('skips query when targetProjectFullPath is missing', async () => {
+            createComponent({
+              props: {
+                targetProjectFullPath: null,
+                mergeRequestId: 3,
+                isMergeRequestTable: true,
+              },
+            });
 
-        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-      });
+            await waitForPromises();
 
-      it('skips subscription when targetProjectFullPath is missing', async () => {
-        createComponent({
-          props: {
-            isMergeRequestTable: true,
-            targetProjectFullPath: null,
-            mergeRequestId: 3,
-          },
+            expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+          });
         });
 
-        await waitForPromises();
+        describe('pipelineCreationRequestsUpdated subscription', () => {
+          it('calls subscription with correct variables', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
 
-        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-      });
+            await waitForPromises();
+
+            expect(mockSubscriptionHandler).toHaveBeenCalledWith({
+              mergeRequestId: 'gid://gitlab/MergeRequest/3',
+            });
+          });
 
-      it('skips subscription when mergeRequestGlobalId is not available', async () => {
-        getPipelineCreationRequestsHandler.mockResolvedValue({
-          data: {
-            project: {
-              id: 'gid://gitlab/Project/5',
-              mergeRequest: {
-                id: null,
-                iid: '3',
-                pipelineCreationRequests: [],
+          it('skips subscription when not on merge request table', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: false,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
               },
-            },
-          },
-        });
+            });
 
-        createComponent({
-          props: {
-            isMergeRequestTable: true,
-            targetProjectFullPath: 'test/project',
-            mergeRequestId: 3,
-          },
-        });
+            await waitForPromises();
 
-        await waitForPromises();
+            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+          });
 
-        expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-      });
-    });
+          it('skips subscription when mergeRequestId is missing', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: null,
+              },
+            });
 
-    describe('Run pipeline button', () => {
-      describe('when there are in progress pipeline creation requests', () => {
-        it('disables the desktop button & enables loading', async () => {
-          const inProgressRequests = [
-            { status: 'IN_PROGRESS', pipelineId: null, error: null },
-            { status: 'SUCCEEDED', pipelineId: '123', error: null },
-          ];
+            await waitForPromises();
 
-          getPipelineCreationRequestsHandler.mockResolvedValue(
-            generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
-          );
+            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+          });
 
-          createComponent({
-            props: {
-              canRunPipeline: true,
-              isMergeRequestTable: true,
-              mergeRequestId: 3,
-              projectId: '5',
-              targetProjectFullPath: 'test/project',
-            },
+          it('skips subscription when targetProjectFullPath is missing', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: null,
+                mergeRequestId: 3,
+              },
+            });
+
+            await waitForPromises();
+
+            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
           });
 
-          await waitForPromises();
+          it('skips subscription when mergeRequestGlobalId is not available', async () => {
+            getPipelineCreationRequestsHandler.mockResolvedValue({
+              data: {
+                project: {
+                  id: 'gid://gitlab/Project/5',
+                  mergeRequest: {
+                    id: null,
+                    iid: '3',
+                    pipelineCreationRequests: [],
+                  },
+                },
+              },
+            });
 
-          expect(findRunPipelineBtn().exists()).toBe(true);
-          expect(findRunPipelineBtn().props('disabled')).toBe(true);
-          expect(findRunPipelineBtn().props('loading')).toBe(true);
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
+
+            await waitForPromises();
+
+            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+          });
         });
 
-        it('disables the mobile button & enables loading', async () => {
-          const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
+        describe('Run pipeline button', () => {
+          describe('when there are in progress pipeline creation requests', () => {
+            it('disables the desktop button & enables loading', async () => {
+              const inProgressRequests = [
+                { status: 'IN_PROGRESS', pipelineId: null, error: null },
+                { status: 'SUCCEEDED', pipelineId: '123', error: null },
+              ];
+
+              getPipelineCreationRequestsHandler.mockResolvedValue(
+                generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+              );
+
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+              });
+
+              await waitForPromises();
+
+              expect(findRunPipelineBtn().exists()).toBe(true);
+              expect(findRunPipelineBtn().props('disabled')).toBe(true);
+              expect(findRunPipelineBtn().props('loading')).toBe(true);
+            });
 
-          getPipelineCreationRequestsHandler.mockResolvedValue(
-            generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
-          );
+            it('disables the mobile button & enables loading', async () => {
+              const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
 
-          createComponent({
-            props: {
-              canRunPipeline: true,
-              isMergeRequestTable: true,
-              mergeRequestId: 3,
-              projectId: '5',
-              targetProjectFullPath: 'test/project',
-            },
-          });
+              getPipelineCreationRequestsHandler.mockResolvedValue(
+                generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+              );
 
-          await waitForPromises();
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+              });
 
-          expect(findRunPipelineBtnMobile().exists()).toBe(true);
-          expect(findRunPipelineBtnMobile().props('disabled')).toBe(true);
-          expect(findRunPipelineBtnMobile().props('loading')).toBe(true);
-        });
+              await waitForPromises();
 
-        it('disables the empty state button & enables loading', async () => {
-          mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
+              expect(findRunPipelineBtnMobile().exists()).toBe(true);
+              expect(findRunPipelineBtnMobile().props('disabled')).toBe(true);
+              expect(findRunPipelineBtnMobile().props('loading')).toBe(true);
+            });
 
-          const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
+            it('disables the empty state button & enables loading', async () => {
+              mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
 
-          getPipelineCreationRequestsHandler.mockResolvedValue(
-            generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
-          );
+              const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
 
-          createComponent({
-            props: {
-              canRunPipeline: true,
-              isMergeRequestTable: true,
-              mergeRequestId: 3,
-              projectId: '5',
-              targetProjectFullPath: 'test/project',
-            },
-          });
+              getPipelineCreationRequestsHandler.mockResolvedValue(
+                generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+              );
 
-          await waitForPromises();
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+              });
 
-          expect(findRunPipelineBtn().exists()).toBe(true);
-          expect(findRunPipelineBtn().props('disabled')).toBe(true);
-          expect(findRunPipelineBtn().props('loading')).toBe(true);
-        });
-      });
+              await waitForPromises();
 
-      describe('shows skeleton loader', () => {
-        it('after a small delay when run pipeline button is clicked', async () => {
-          createComponent({
-            props: {
-              canRunPipeline: true,
-              isMergeRequestTable: true,
-              mergeRequestId: 3,
-              projectId: '5',
-              targetProjectFullPath: 'test/project',
-            },
+              expect(findRunPipelineBtn().exists()).toBe(true);
+              expect(findRunPipelineBtn().props('disabled')).toBe(true);
+              expect(findRunPipelineBtn().props('loading')).toBe(true);
+            });
           });
 
-          await waitForPromises();
+          describe('shows skeleton loader', () => {
+            it('after a small delay when run pipeline button is clicked', async () => {
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+              });
 
-          expect(findSkeletonLoader().exists()).toBe(false);
+              await waitForPromises();
 
-          await findRunPipelineBtn().trigger('click');
+              expect(findSkeletonLoader().exists()).toBe(false);
 
-          expect(findSkeletonLoader().exists()).toBe(false);
+              await findRunPipelineBtn().trigger('click');
 
-          jest.runAllTimers();
-          await nextTick();
+              expect(findSkeletonLoader().exists()).toBe(false);
 
-          expect(findSkeletonLoader().exists()).toBe(true);
-        });
+              jest.runAllTimers();
+              await nextTick();
 
-        it('when hasInProgressCreationRequests becomes true', async () => {
-          getPipelineCreationRequestsHandler.mockResolvedValue(
-            generatePipelineCreationRequestsResponse({
-              requests: [{ status: 'IN_PROGRESS', pipelineId: null, error: null }],
-            }),
-          );
+              expect(findSkeletonLoader().exists()).toBe(true);
+            });
 
-          createComponent({
-            props: {
-              canRunPipeline: true,
-              isMergeRequestTable: true,
-              mergeRequestId: 3,
-              projectId: '5',
-              targetProjectFullPath: 'test/project',
-            },
-          });
+            it('when hasInProgressCreationRequests becomes true', async () => {
+              getPipelineCreationRequestsHandler.mockResolvedValue(
+                generatePipelineCreationRequestsResponse({
+                  requests: [{ status: 'IN_PROGRESS', pipelineId: null, error: null }],
+                }),
+              );
 
-          await waitForPromises();
+              createComponent({
+                props: {
+                  canRunPipeline: true,
+                  isMergeRequestTable: true,
+                  mergeRequestId: 3,
+                  projectId: '5',
+                  targetProjectFullPath: 'test/project',
+                },
+              });
 
-          expect(findSkeletonLoader().exists()).toBe(false);
+              await waitForPromises();
 
-          jest.runAllTimers();
-          await nextTick();
+              expect(findSkeletonLoader().exists()).toBe(false);
 
-          expect(findSkeletonLoader().exists()).toBe(true);
+              jest.runAllTimers();
+              await nextTick();
+
+              expect(findSkeletonLoader().exists()).toBe(true);
+            });
+          });
         });
       });
     });
-- 
GitLab


From b962b6090da985b9e210d1a07c68bce547c47926 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Sat, 25 Oct 2025 01:41:56 +0530
Subject: [PATCH 17/34] Implement it.each spec methods

---
 .../legacy_pipelines_table_wrapper_spec.js    | 147 ++++++------------
 1 file changed, 50 insertions(+), 97 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index 8cd0c98ccfba2c..a9d160c322bac8 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -601,47 +601,27 @@ describe('Pipelines table in Commits and Merge requests', () => {
             });
           });
 
-          it('skips query when not on merge request table', async () => {
-            createComponent({
-              props: {
-                isMergeRequestTable: false,
-                targetProjectFullPath: 'test/project',
-                mergeRequestId: 3,
-              },
-            });
-
-            await waitForPromises();
-
-            expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
-          });
-
-          it('skips query when mergeRequestId is missing', async () => {
-            createComponent({
-              props: {
-                targetProjectFullPath: 'test/project',
-                mergeRequestId: null,
-                isMergeRequestTable: true,
-              },
-            });
-
-            await waitForPromises();
-
-            expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
-          });
-
-          it('skips query when targetProjectFullPath is missing', async () => {
-            createComponent({
-              props: {
-                targetProjectFullPath: null,
-                mergeRequestId: 3,
-                isMergeRequestTable: true,
-              },
-            });
+          it.each`
+            scenario                              | isMergeRequestTable | targetProjectFullPath | mergeRequestId
+            ${'not on merge request table'}       | ${false}            | ${'test/project'}     | ${3}
+            ${'mergeRequestId is missing'}        | ${true}             | ${'test/project'}     | ${null}
+            ${'targetProjectFullPath is missing'} | ${true}             | ${null}               | ${3}
+          `(
+            'skips query when $scenario',
+            async ({ isMergeRequestTable, targetProjectFullPath, mergeRequestId }) => {
+              createComponent({
+                props: {
+                  isMergeRequestTable,
+                  targetProjectFullPath,
+                  mergeRequestId,
+                },
+              });
 
-            await waitForPromises();
+              await waitForPromises();
 
-            expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
-          });
+              expect(getPipelineCreationRequestsHandler).not.toHaveBeenCalled();
+            },
+          );
         });
 
         describe('pipelineCreationRequestsUpdated subscription', () => {
@@ -661,74 +641,47 @@ describe('Pipelines table in Commits and Merge requests', () => {
             });
           });
 
-          it('skips subscription when not on merge request table', async () => {
-            createComponent({
-              props: {
-                isMergeRequestTable: false,
-                targetProjectFullPath: 'test/project',
-                mergeRequestId: 3,
-              },
-            });
-
-            await waitForPromises();
-
-            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-          });
-
-          it('skips subscription when mergeRequestId is missing', async () => {
-            createComponent({
-              props: {
-                isMergeRequestTable: true,
-                targetProjectFullPath: 'test/project',
-                mergeRequestId: null,
-              },
-            });
-
-            await waitForPromises();
-
-            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-          });
-
-          it('skips subscription when targetProjectFullPath is missing', async () => {
-            createComponent({
-              props: {
-                isMergeRequestTable: true,
-                targetProjectFullPath: null,
-                mergeRequestId: 3,
-              },
-            });
-
-            await waitForPromises();
-
-            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-          });
-
-          it('skips subscription when mergeRequestGlobalId is not available', async () => {
+          const mockMergeRequestGlobalId = () =>
             getPipelineCreationRequestsHandler.mockResolvedValue({
               data: {
                 project: {
                   id: 'gid://gitlab/Project/5',
-                  mergeRequest: {
-                    id: null,
-                    iid: '3',
-                    pipelineCreationRequests: [],
-                  },
+                  mergeRequest: { id: null, iid: '3', pipelineCreationRequests: [] },
                 },
               },
             });
 
-            createComponent({
-              props: {
-                isMergeRequestTable: true,
-                targetProjectFullPath: 'test/project',
-                mergeRequestId: 3,
-              },
-            });
+          it.each`
+            scenario                                   | isMergeRequestTable | targetProjectFullPath | mergeRequestId | mockHandlerSetup
+            ${'not on merge request table'}            | ${false}            | ${'test/project'}     | ${3}           | ${undefined}
+            ${'mergeRequestId is missing'}             | ${true}             | ${'test/project'}     | ${null}        | ${undefined}
+            ${'targetProjectFullPath is missing'}      | ${true}             | ${null}               | ${3}           | ${undefined}
+            ${'mergeRequestGlobalId is not available'} | ${true}             | ${'test/project'}     | ${3}           | ${mockMergeRequestGlobalId}
+          `(
+            'skips subscription when $scenario',
+            async ({
+              isMergeRequestTable,
+              targetProjectFullPath,
+              mergeRequestId,
+              mockHandlerSetup,
+            }) => {
+              if (mockHandlerSetup) {
+                mockHandlerSetup();
+              }
 
-            await waitForPromises();
+              createComponent({
+                props: {
+                  isMergeRequestTable,
+                  targetProjectFullPath,
+                  mergeRequestId,
+                },
+              });
 
-            expect(mockSubscriptionHandler).not.toHaveBeenCalled();
-          });
+              await waitForPromises();
+
+              expect(mockSubscriptionHandler).not.toHaveBeenCalled();
+            },
+          );
         });
 
         describe('Run pipeline button', () => {
-- 
GitLab


From 73fac9dcd8fff545808ba8558b5f5a4dde667e67 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Sat, 25 Oct 2025 12:04:53 +0530
Subject: [PATCH 18/34] Add tests coverage for error alert & test cleanup

---
 .../legacy_pipelines_table_wrapper_spec.js    | 135 ++++++++++++------
 1 file changed, 88 insertions(+), 47 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index a9d160c322bac8..a05fad27c6fffc 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -81,6 +81,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
   const findUserPermissionsDocsLink = () => wrapper.findByTestId('user-permissions-docs-link');
   const findPipelinesTable = () => wrapper.findComponent(PipelinesTable);
   const findSkeletonLoader = () => wrapper.find('.gl-animate-skeleton-loader');
+  const findCreationFailedAlert = () => wrapper.findComponent({ name: 'GlAlert' });
 
   const createComponent = ({ props = {}, handlers = [], mountFn = mountExtended } = {}) => {
     const requestHandlers = [
@@ -518,7 +519,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
     });
   });
 
-  describe('Apollo GraphQL integration', () => {
+  describe('GraphQL pipeline creation requests', () => {
     beforeAll(() => {
       jest.useFakeTimers();
     });
@@ -684,62 +685,102 @@ describe('Pipelines table in Commits and Merge requests', () => {
           );
         });
 
-        describe('Run pipeline button', () => {
-          describe('when there are in progress pipeline creation requests', () => {
-            it('disables the desktop button & enables loading', async () => {
-              const inProgressRequests = [
-                { status: 'IN_PROGRESS', pipelineId: null, error: null },
-                { status: 'SUCCEEDED', pipelineId: '123', error: null },
-              ];
+        describe('Pipeline creation failed alert', () => {
+          it('shows alert when pipeline creation fails', async () => {
+            const failedRequests = [
+              { status: 'FAILED', pipelineId: null, error: 'Creation failed' },
+            ];
 
-              getPipelineCreationRequestsHandler.mockResolvedValue(
-                generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
-              );
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: failedRequests }),
+            );
 
-              createComponent({
-                props: {
-                  canRunPipeline: true,
-                  isMergeRequestTable: true,
-                  mergeRequestId: 3,
-                  projectId: '5',
-                  targetProjectFullPath: 'test/project',
-                },
-              });
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
 
-              await waitForPromises();
+            await waitForPromises();
+
+            expect(findCreationFailedAlert().exists()).toBe(true);
+            expect(findCreationFailedAlert().text()).toBe(
+              'Pipeline creation failed. Please try again.',
+            );
+            expect(findCreationFailedAlert().props('variant')).toBe('danger');
+            expect(findCreationFailedAlert().props('dismissible')).toBe(true);
+          });
+
+          it('hides alert when dismissed', async () => {
+            const failedRequests = [
+              { status: 'FAILED', pipelineId: null, error: 'Creation failed' },
+            ];
 
-              expect(findRunPipelineBtn().exists()).toBe(true);
-              expect(findRunPipelineBtn().props('disabled')).toBe(true);
-              expect(findRunPipelineBtn().props('loading')).toBe(true);
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: failedRequests }),
+            );
+
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
             });
 
-            it('disables the mobile button & enables loading', async () => {
-              const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
+            await waitForPromises();
 
-              getPipelineCreationRequestsHandler.mockResolvedValue(
-                generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
-              );
+            expect(findCreationFailedAlert().exists()).toBe(true);
 
-              createComponent({
-                props: {
-                  canRunPipeline: true,
-                  isMergeRequestTable: true,
-                  mergeRequestId: 3,
-                  projectId: '5',
-                  targetProjectFullPath: 'test/project',
-                },
-              });
+            await findCreationFailedAlert().vm.$emit('dismiss');
 
-              await waitForPromises();
+            expect(findCreationFailedAlert().exists()).toBe(false);
+          });
 
-              expect(findRunPipelineBtnMobile().exists()).toBe(true);
-              expect(findRunPipelineBtnMobile().props('disabled')).toBe(true);
-              expect(findRunPipelineBtnMobile().props('loading')).toBe(true);
+          it('shows alert when failure count increases via subscription', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
             });
 
-            it('disables the empty state button & enables loading', async () => {
-              mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
+            await waitForPromises();
+
+            expect(findCreationFailedAlert().exists()).toBe(false);
+
+            const failedRequests = [
+              { status: 'FAILED', pipelineId: null, error: 'Creation failed' },
+            ];
+
+            wrapper.vm.$apollo.queries.pipelineCreationRequests.updateQuery = jest.fn();
+            wrapper.vm.pipelineCreationRequests = failedRequests;
+
+            await nextTick();
 
+            expect(findCreationFailedAlert().exists()).toBe(true);
+          });
+        });
+
+        describe('Run pipeline button', () => {
+          describe('when there are in progress pipeline creation requests', () => {
+            it.each([
+              {
+                buttonType: 'desktop',
+                findRunButton: () => findRunPipelineBtn(),
+              },
+              {
+                buttonType: 'mobile',
+                findRunButton: () => findRunPipelineBtnMobile(),
+              },
+              {
+                buttonType: 'empty state',
+                findRunButton: () => findRunPipelineBtn(),
+              },
+            ])('disables the $buttonType button & enables loading', async ({ findRunButton }) => {
               const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
 
               getPipelineCreationRequestsHandler.mockResolvedValue(
@@ -758,9 +799,9 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
               await waitForPromises();
 
-              expect(findRunPipelineBtn().exists()).toBe(true);
-              expect(findRunPipelineBtn().props('disabled')).toBe(true);
-              expect(findRunPipelineBtn().props('loading')).toBe(true);
+              expect(findRunButton().exists()).toBe(true);
+              expect(findRunButton().props('disabled')).toBe(true);
+              expect(findRunButton().props('loading')).toBe(true);
             });
           });
 
-- 
GitLab


From 0848e998fd9cfb735f842f8b26ea4c3ad91fe314 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 27 Oct 2025 19:23:29 +0530
Subject: [PATCH 19/34] Add tests for debounced pipeline loader

---
 .../legacy_pipelines_table_wrapper_spec.js    | 128 ++++++++++++++++++
 1 file changed, 128 insertions(+)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index a05fad27c6fffc..a919cb451f176f 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -21,6 +21,7 @@ import { TOAST_MESSAGE } from '~/ci/pipeline_details/constants';
 import axios from '~/lib/utils/axios_utils';
 import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
 import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
+import { PIPELINE_LOADER_DEBOUNCE_IN_MS } from '~/ci/constants';
 
 Vue.use(VueApollo);
 
@@ -859,6 +860,133 @@ describe('Pipelines table in Commits and Merge requests', () => {
             });
           });
         });
+
+        describe('debounced pipeline loader', () => {
+          it('shows skeleton loader after debounce delay when run pipeline button is clicked', async () => {
+            createComponent({
+              props: {
+                canRunPipeline: true,
+                isMergeRequestTable: true,
+                mergeRequestId: 3,
+                projectId: '5',
+                targetProjectFullPath: 'test/project',
+              },
+            });
+
+            await waitForPromises();
+
+            expect(findSkeletonLoader().exists()).toBe(false);
+
+            findRunPipelineBtn().trigger('click');
+
+            expect(findSkeletonLoader().exists()).toBe(false);
+
+            jest.advanceTimersByTime(PIPELINE_LOADER_DEBOUNCE_IN_MS);
+            await nextTick();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+          });
+
+          it('stops showing skeleton loader when pipeline creation completes', async () => {
+            const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
+            const completedRequests = [{ status: 'SUCCEEDED', pipelineId: '123', error: null }];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
+            );
+
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
+
+            await waitForPromises();
+
+            jest.advanceTimersByTime(PIPELINE_LOADER_DEBOUNCE_IN_MS);
+            await nextTick();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: completedRequests }),
+            );
+
+            mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
+
+            findPipelinesTable().vm.$emit('refresh-pipelines-table');
+            await waitForPromises();
+
+            expect(findSkeletonLoader().exists()).toBe(false);
+          });
+
+          it('continues showing skeleton loader when there are still in-progress requests', async () => {
+            const mixedRequests = [
+              { status: 'IN_PROGRESS', pipelineId: null, error: null },
+              { status: 'SUCCEEDED', pipelineId: '123', error: null },
+            ];
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: mixedRequests }),
+            );
+
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
+
+            await waitForPromises();
+
+            jest.advanceTimersByTime(PIPELINE_LOADER_DEBOUNCE_IN_MS);
+            await nextTick();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: mixedRequests }),
+            );
+
+            mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [
+              {
+                ...pipeline,
+                flags: {
+                  ...pipeline.flags,
+                  detached_merge_request_pipeline: true,
+                  merge_request_pipeline: true,
+                },
+              },
+            ]);
+            findPipelinesTable().vm.$emit('refresh-pipelines-table');
+            await waitForPromises();
+
+            expect(findSkeletonLoader().exists()).toBe(true);
+          });
+
+          it('clears timeout on component unmount', async () => {
+            createComponent({
+              props: {
+                isMergeRequestTable: true,
+                targetProjectFullPath: 'test/project',
+                mergeRequestId: 3,
+              },
+            });
+
+            await waitForPromises();
+
+            const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+            findRunPipelineBtn().trigger('click');
+
+            wrapper.destroy();
+
+            expect(clearTimeoutSpy).toHaveBeenCalled();
+          });
+        });
       });
     });
   });
-- 
GitLab


From fa40532e25ef719cb719e59ee1e661297c10a437 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 27 Oct 2025 19:35:42 +0530
Subject: [PATCH 20/34] Update test mock data

---
 .../pipelines/legacy_pipelines_table_wrapper_spec.js  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index a919cb451f176f..b173db2035ce72 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -923,13 +923,13 @@ describe('Pipelines table in Commits and Merge requests', () => {
           });
 
           it('continues showing skeleton loader when there are still in-progress requests', async () => {
-            const mixedRequests = [
+            const inProgressRequests = [
+              { status: 'IN_PROGRESS', pipelineId: null, error: null },
               { status: 'IN_PROGRESS', pipelineId: null, error: null },
-              { status: 'SUCCEEDED', pipelineId: '123', error: null },
             ];
 
             getPipelineCreationRequestsHandler.mockResolvedValue(
-              generatePipelineCreationRequestsResponse({ requests: mixedRequests }),
+              generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
             );
 
             createComponent({
@@ -947,6 +947,11 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
             expect(findSkeletonLoader().exists()).toBe(true);
 
+            const mixedRequests = [
+              { status: 'IN_PROGRESS', pipelineId: null, error: null },
+              { status: 'SUCCEEDED', pipelineId: '123', error: null },
+            ];
+
             getPipelineCreationRequestsHandler.mockResolvedValue(
               generatePipelineCreationRequestsResponse({ requests: mixedRequests }),
             );
-- 
GitLab


From e771c6e135a3e6be8a7320e19896ddf73e375dc1 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 27 Oct 2025 23:03:14 +0530
Subject: [PATCH 21/34] Use feature flags mixin

---
 .../legacy_pipelines_table_wrapper.vue        | 11 +++++--
 .../legacy_pipelines_table_wrapper_spec.js    | 33 +++++++++++++++----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index dbcf7ccd64a066..8502528726e3fc 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -17,6 +17,7 @@ import PipelinesMixin from '~/ci/pipeline_details/mixins/pipelines_mixin';
 import PipelinesService from '~/ci/pipelines_page/services/pipelines_service';
 import PipelineStore from '~/ci/pipeline_details/stores/pipelines_store';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__, __ } from '~/locale';
 import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
 import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
@@ -33,7 +34,7 @@ export default {
     PipelinesTable,
     TablePagination,
   },
-  mixins: [PipelinesMixin],
+  mixins: [PipelinesMixin, glFeatureFlagsMixin()],
   props: {
     canCreatePipelineInTargetProject: {
       type: Boolean,
@@ -103,7 +104,7 @@ export default {
 
   computed: {
     isRealtimePipelineCreationRequestsEnabled() {
-      return Boolean(window.gon?.features?.ciPipelineCreationRequestsRealtime);
+      return this.glFeatures.ciPipelineCreationRequestsRealtime;
     },
     shouldRenderTable() {
       return !this.isLoading && this.state.pipelines.length > 0 && !this.hasError;
@@ -302,7 +303,11 @@ export default {
           };
         },
         skip() {
-          return !this.isMergeRequestTable || !this.mergeRequestGlobalId;
+          return (
+            !this.isRealtimePipelineCreationRequestsEnabled ||
+            !this.isMergeRequestTable ||
+            !this.mergeRequestGlobalId
+          );
         },
         updateQuery: (previousResult, { subscriptionData }) => {
           if (!subscriptionData.data?.ciPipelineCreationRequestsUpdated) return previousResult;
diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index b173db2035ce72..a92773958a5da9 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -84,7 +84,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
   const findSkeletonLoader = () => wrapper.find('.gl-animate-skeleton-loader');
   const findCreationFailedAlert = () => wrapper.findComponent({ name: 'GlAlert' });
 
-  const createComponent = ({ props = {}, handlers = [], mountFn = mountExtended } = {}) => {
+  const createComponent = ({
+    props = {},
+    handlers = [],
+    mountFn = mountExtended,
+    glFeatures = { ciPipelineCreationRequestsRealtime: false },
+  } = {}) => {
     const requestHandlers = [
       [getPipelineCreationRequests, getPipelineCreationRequestsHandler],
       ...handlers,
@@ -112,6 +117,9 @@ describe('Pipelines table in Commits and Merge requests', () => {
       mocks: {
         $toast,
       },
+      provide: {
+        glFeatures,
+      },
       stubs: {
         GlModal: stubComponent(GlModal, {
           template: '<div />',
@@ -548,10 +556,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
     describe('with feature flag ci_pipeline_creation_requests_realtime', () => {
       describe('when feature flag is OFF', () => {
-        beforeEach(() => {
-          window.gon = { features: { ciPipelineCreationRequestsRealtime: false } };
-        });
-
         it('skips getPipelineCreationRequests query', async () => {
           createComponent({
             props: {
@@ -582,9 +586,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
 
       describe('when feature flag is ON', () => {
+        let glFeatures;
+
         beforeEach(() => {
-          window.gon = { features: { ciPipelineCreationRequestsRealtime: true } };
+          glFeatures = { ciPipelineCreationRequestsRealtime: true };
         });
+
         describe('getPipelineCreationRequests query', () => {
           it('calls getPipelineCreationRequests query with correct variables', async () => {
             createComponent({
@@ -593,6 +600,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -617,6 +625,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                   targetProjectFullPath,
                   mergeRequestId,
                 },
+                glFeatures,
               });
 
               await waitForPromises();
@@ -634,6 +643,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -677,6 +687,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                   targetProjectFullPath,
                   mergeRequestId,
                 },
+                glFeatures,
               });
 
               await waitForPromises();
@@ -702,6 +713,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -729,6 +741,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -747,6 +760,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -796,6 +810,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                   projectId: '5',
                   targetProjectFullPath: 'test/project',
                 },
+                glFeatures,
               });
 
               await waitForPromises();
@@ -816,6 +831,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                   projectId: '5',
                   targetProjectFullPath: 'test/project',
                 },
+                glFeatures,
               });
 
               await waitForPromises();
@@ -847,6 +863,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                   projectId: '5',
                   targetProjectFullPath: 'test/project',
                 },
+                glFeatures,
               });
 
               await waitForPromises();
@@ -871,6 +888,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 projectId: '5',
                 targetProjectFullPath: 'test/project',
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -901,6 +919,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -938,6 +957,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
@@ -979,6 +999,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 targetProjectFullPath: 'test/project',
                 mergeRequestId: 3,
               },
+              glFeatures,
             });
 
             await waitForPromises();
-- 
GitLab


From 4cebe035ad3ccad3cceebf21ef1e2a421945c893 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 3 Nov 2025 12:06:23 +0000
Subject: [PATCH 22/34] Move apollo requests after component props

---
 .../legacy_pipelines_table_wrapper.vue        | 109 +++++++++---------
 1 file changed, 54 insertions(+), 55 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 8502528726e3fc..4abcfd0e399b1a 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -84,7 +84,61 @@ export default {
       default: 'root',
     },
   },
+  apollo: {
+    pipelineCreationRequests: {
+      query: getPipelineCreationRequests,
+      variables() {
+        return {
+          fullPath: this.targetProjectFullPath,
+          mergeRequestIid: String(this.mergeRequestId),
+        };
+      },
+      skip() {
+        return (
+          !this.isRealtimePipelineCreationRequestsEnabled ||
+          !this.isMergeRequestTable ||
+          !this.mergeRequestId ||
+          !this.targetProjectFullPath
+        );
+      },
+      update(data) {
+        if (data.project?.mergeRequest?.id) {
+          this.mergeRequestGlobalId = data.project.mergeRequest.id;
+        }
+        return data.project?.mergeRequest?.pipelineCreationRequests || [];
+      },
+      subscribeToMore: {
+        document: pipelineCreationRequestsUpdatedSubscription,
+        variables() {
+          return {
+            mergeRequestId: this.mergeRequestGlobalId,
+          };
+        },
+        skip() {
+          return (
+            !this.isRealtimePipelineCreationRequestsEnabled ||
+            !this.isMergeRequestTable ||
+            !this.mergeRequestGlobalId
+          );
+        },
+        updateQuery: (previousResult, { subscriptionData }) => {
+          if (!subscriptionData.data?.ciPipelineCreationRequestsUpdated) return previousResult;
 
+          const updated = subscriptionData.data.ciPipelineCreationRequestsUpdated;
+          return {
+            ...previousResult,
+            project: {
+              ...previousResult.project,
+              mergeRequest: {
+                ...previousResult.project.mergeRequest,
+                pipelineCreationRequests: updated.pipelineCreationRequests,
+              },
+            },
+          };
+        },
+      },
+    },
+  },
   data() {
     const store = new PipelineStore();
 
@@ -272,61 +326,6 @@ export default {
       this.isCreatingPipeline = false;
     },
   },
-  apollo: {
-    pipelineCreationRequests: {
-      query: getPipelineCreationRequests,
-      variables() {
-        return {
-          fullPath: this.targetProjectFullPath,
-          mergeRequestIid: String(this.mergeRequestId),
-        };
-      },
-      skip() {
-        return (
-          !this.isRealtimePipelineCreationRequestsEnabled ||
-          !this.isMergeRequestTable ||
-          !this.mergeRequestId ||
-          !this.targetProjectFullPath
-        );
-      },
-      update(data) {
-        if (data.project?.mergeRequest?.id) {
-          this.mergeRequestGlobalId = data.project.mergeRequest.id;
-        }
-        return data.project?.mergeRequest?.pipelineCreationRequests || [];
-      },
-      subscribeToMore: {
-        document: pipelineCreationRequestsUpdatedSubscription,
-        variables() {
-          return {
-            mergeRequestId: this.mergeRequestGlobalId,
-          };
-        },
-        skip() {
-          return (
-            !this.isRealtimePipelineCreationRequestsEnabled ||
-            !this.isMergeRequestTable ||
-            !this.mergeRequestGlobalId
-          );
-        },
-        updateQuery: (previousResult, { subscriptionData }) => {
-          if (!subscriptionData.data?.ciPipelineCreationRequestsUpdated) return previousResult;
-
-          const updated = subscriptionData.data.ciPipelineCreationRequestsUpdated;
-          return {
-            ...previousResult,
-            project: {
-              ...previousResult.project,
-              mergeRequest: {
-                ...previousResult.project.mergeRequest,
-                pipelineCreationRequests: updated.pipelineCreationRequests,
-              },
-            },
-          };
-        },
-      },
-    },
-  },
   pipelineIdKey: PIPELINE_ID_KEY,
   modal: {
     actionPrimary: {
-- 
GitLab


From 3810c7fda278ac0e8bed6117a87b663e7e6cff59 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 3 Nov 2025 13:25:17 +0000
Subject: [PATCH 23/34] Add delay after subscription response

---
 ...t_pipeline_creation_requests.query.graphql |  1 -
 ...tion_requests_updated.subscription.graphql |  1 -
 .../legacy_pipelines_table_wrapper.vue        | 23 ++++++++++---------
 .../legacy_pipelines_table_wrapper_spec.js    | 16 ++++++++-----
 4 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
index 4d706f7339d50a..e6ac3a96abe813 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -3,7 +3,6 @@ query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
     id
     mergeRequest(iid: $mergeRequestIid) {
       id
-      iid
       pipelineCreationRequests {
         status
         pipelineId
diff --git a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
index 8a8f9055b184ed..593cf900fe391c 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
@@ -1,7 +1,6 @@
 subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!) {
   ciPipelineCreationRequestsUpdated(mergeRequestId: $mergeRequestId) {
     id
-    iid
     pipelineCreationRequests {
       status
       pipelineId
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 4abcfd0e399b1a..56c2d5d9fadbaf 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -11,7 +11,8 @@ import {
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import PipelinesTable from '~/ci/common/pipelines_table.vue';
-import { PIPELINE_ID_KEY, PIPELINE_LOADER_DEBOUNCE_IN_MS } from '~/ci/constants';
+import { PIPELINE_ID_KEY } from '~/ci/constants';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import eventHub from '~/ci/event_hub';
 import PipelinesMixin from '~/ci/pipeline_details/mixins/pipelines_mixin';
 import PipelinesService from '~/ci/pipelines_page/services/pipelines_service';
@@ -219,23 +220,24 @@ export default {
     },
   },
   watch: {
-    hasInProgressCreationRequests: {
-      handler(hasInProgress) {
+    pipelineCreationRequests: {
+      handler(newRequests, oldRequests) {
+        const hasInProgress = this.requestLengthByStatus(newRequests, 'IN_PROGRESS') > 0;
+
         if (hasInProgress) {
           this.startDebouncedPipelineLoader();
         }
-      },
-      immediate: true,
-    },
-    pipelineCreationRequests: {
-      handler(newRequests, oldRequests) {
+
         if (this.hasSuccessCountIncreased(oldRequests, newRequests)) {
-          this.onRefreshPipelinesTable();
+          setTimeout(() => {
+            this.onRefreshPipelinesTable();
+          }, 100);
         }
 
         this.showCreationFailedAlert = this.hasFailureCountIncreased(oldRequests, newRequests);
       },
       deep: true,
+      immediate: true,
     },
   },
   created() {
@@ -315,7 +317,7 @@ export default {
 
       this.loaderTimeout = setTimeout(() => {
         this.isCreatingPipeline = true;
-      }, PIPELINE_LOADER_DEBOUNCE_IN_MS);
+      }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
     },
     stopDebouncedPipelineLoader() {
       if (this.loaderTimeout) {
@@ -370,7 +372,6 @@ export default {
     <gl-alert
       v-if="showCreationFailedAlert"
       variant="danger"
-      :dismissible="true"
       @dismiss="showCreationFailedAlert = false"
       >{{ $options.i18n.pipelineCreationFailed }}</gl-alert
     >
diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index a92773958a5da9..ef361e67e4b529 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -21,7 +21,7 @@ import { TOAST_MESSAGE } from '~/ci/pipeline_details/constants';
 import axios from '~/lib/utils/axios_utils';
 import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
 import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
-import { PIPELINE_LOADER_DEBOUNCE_IN_MS } from '~/ci/constants';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 
 Vue.use(VueApollo);
 
@@ -771,8 +771,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
               { status: 'FAILED', pipelineId: null, error: 'Creation failed' },
             ];
 
-            wrapper.vm.$apollo.queries.pipelineCreationRequests.updateQuery = jest.fn();
-            wrapper.vm.pipelineCreationRequests = failedRequests;
+            getPipelineCreationRequestsHandler.mockResolvedValue(
+              generatePipelineCreationRequestsResponse({ requests: failedRequests }),
+            );
+
+            await wrapper.vm.$apollo.queries.pipelineCreationRequests.refetch();
+            await waitForPromises();
 
             await nextTick();
 
@@ -899,7 +903,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
             expect(findSkeletonLoader().exists()).toBe(false);
 
-            jest.advanceTimersByTime(PIPELINE_LOADER_DEBOUNCE_IN_MS);
+            jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
             await nextTick();
 
             expect(findSkeletonLoader().exists()).toBe(true);
@@ -924,7 +928,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
             await waitForPromises();
 
-            jest.advanceTimersByTime(PIPELINE_LOADER_DEBOUNCE_IN_MS);
+            jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
             await nextTick();
 
             expect(findSkeletonLoader().exists()).toBe(true);
@@ -962,7 +966,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
             await waitForPromises();
 
-            jest.advanceTimersByTime(PIPELINE_LOADER_DEBOUNCE_IN_MS);
+            jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
             await nextTick();
 
             expect(findSkeletonLoader().exists()).toBe(true);
-- 
GitLab


From 66bcce22067715510d6e7f22f9995da7074395f5 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Mon, 3 Nov 2025 17:18:25 +0000
Subject: [PATCH 24/34] Change refresh delay to 500ms

---
 .../commit/pipelines/legacy_pipelines_table_wrapper.vue       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 56c2d5d9fadbaf..33124c6498a0d7 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -231,7 +231,7 @@ export default {
         if (this.hasSuccessCountIncreased(oldRequests, newRequests)) {
           setTimeout(() => {
             this.onRefreshPipelinesTable();
-          }, 100);
+          }, 500);
         }
 
         this.showCreationFailedAlert = this.hasFailureCountIncreased(oldRequests, newRequests);
@@ -281,7 +281,9 @@ export default {
      *
      */
     onClickRunPipeline() {
+      // if (this.isRealtimePipelineCreationRequestsEnabled) {
       this.startDebouncedPipelineLoader();
+      // }
       eventHub.$emit('runMergeRequestPipeline', {
         projectId: this.projectId,
         mergeRequestId: this.mergeRequestId,
-- 
GitLab


From 67bda56f65cf5adeeb2d488c137351ad7efca843 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 4 Nov 2025 15:52:46 +0000
Subject: [PATCH 25/34] Small review fixes

---
 .../commit/pipelines/legacy_pipelines_table_wrapper_spec.js    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index ef361e67e4b529..cfaa8c39430f48 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -33,7 +33,6 @@ jest.mock('~/alert');
 
 const generateMockPipelineCreationMergeRequest = (requests) => ({
   id: 'gid://gitlab/MergeRequest/3',
-  iid: '3',
   pipelineCreationRequests: requests,
 });
 
@@ -658,7 +657,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
               data: {
                 project: {
                   id: 'gid://gitlab/Project/5',
-                  mergeRequest: { id: null, iid: '3', pipelineCreationRequests: [] },
+                  mergeRequest: { id: null, pipelineCreationRequests: [] },
                 },
               },
             });
-- 
GitLab


From 53312d9b4acbbcfe0677e669f085c3ec1c6ad40f Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 6 Nov 2025 10:12:59 +0000
Subject: [PATCH 26/34] Fetch failed pipelines immediately after subscription
 response

---
 .../commit/pipelines/legacy_pipelines_table_wrapper.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 33124c6498a0d7..461040dde6bd60 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -228,13 +228,16 @@ export default {
           this.startDebouncedPipelineLoader();
         }
 
-        if (this.hasSuccessCountIncreased(oldRequests, newRequests)) {
+        const hasSucceededRequests = this.hasSuccessCountIncreased(oldRequests, newRequests);
+        const hasFailedRequests = this.hasFailureCountIncreased(oldRequests, newRequests);
+
+        if (hasSucceededRequests || hasFailedRequests) {
           setTimeout(() => {
             this.onRefreshPipelinesTable();
           }, 500);
         }
 
-        this.showCreationFailedAlert = this.hasFailureCountIncreased(oldRequests, newRequests);
+        this.showCreationFailedAlert = hasFailedRequests;
       },
       deep: true,
       immediate: true,
-- 
GitLab


From 7b7453e7e239e379b7b3b40e94bb79e6ab95ecf6 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 11 Nov 2025 09:46:34 +0000
Subject: [PATCH 27/34] Use pipeline returned with pipelineCreationRequest for
 adding new pipelines in the list

---
 ...t_pipeline_creation_requests.query.graphql | 46 +++++++++++++++++++
 ...tion_requests_updated.subscription.graphql | 45 ++++++++++++++++++
 .../legacy_pipelines_table_wrapper.vue        | 45 ++++++++++++++----
 3 files changed, 126 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
index e6ac3a96abe813..ec90480323185e 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -1,12 +1,58 @@
 query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
   project(fullPath: $fullPath) {
     id
+    fullPath
     mergeRequest(iid: $mergeRequestIid) {
       id
+      iid
+      title
+      webPath
       pipelineCreationRequests {
         status
         pipelineId
         error
+        pipeline {
+          id
+          iid
+          name
+          duration
+          finishedAt
+          path
+          configSource
+          stuck
+          mergeRequestEventType
+          failureReason
+          yamlErrors
+          retryable
+          cancelable
+          commit {
+            id
+            title
+            webPath
+            shortId
+            authorGravatar
+            author {
+              id
+              avatarUrl
+              commitEmail
+              name
+              webUrl
+            }
+          }
+          detailedStatus {
+            id
+            hasDetails
+            detailsPath
+            label
+            name
+          }
+          user {
+            id
+            avatar_url: avatarUrl
+            name
+            path: webPath
+          }
+        }
       }
     }
   }
diff --git a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
index 593cf900fe391c..7fd164dd2f22de 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
@@ -1,10 +1,55 @@
 subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!) {
   ciPipelineCreationRequestsUpdated(mergeRequestId: $mergeRequestId) {
     id
+    iid
+    title
+    webPath
     pipelineCreationRequests {
       status
       pipelineId
       error
+      pipeline {
+        id
+        iid
+        name
+        duration
+        finishedAt
+        path
+        configSource
+        stuck
+        mergeRequestEventType
+        failureReason
+        yamlErrors
+        retryable
+        cancelable
+        commit {
+          id
+          title
+          webPath
+          shortId
+          authorGravatar
+          author {
+            id
+            avatarUrl
+            commitEmail
+            name
+            webUrl
+          }
+        }
+        detailedStatus {
+          id
+          hasDetails
+          detailsPath
+          label
+          name
+        }
+        user {
+          id
+          avatar_url: avatarUrl
+          name
+          path: webPath
+        }
+      }
     }
   }
 }
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 461040dde6bd60..714b02d04fab53 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -22,6 +22,8 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__, __ } from '~/locale';
 import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
 import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
+import { formatPipelinesGraphQLDataToREST } from '~/ci/merge_requests/utils';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 export default {
   components: {
@@ -103,23 +105,26 @@ export default {
         );
       },
       update(data) {
-        if (data.project?.mergeRequest?.id) {
-          this.mergeRequestGlobalId = data.project.mergeRequest.id;
+        if (data.project?.mergeRequest) {
+          const { pipelineCreationRequests, ...mergeRequest } = data.project.mergeRequest;
+          this.mergeRequest = mergeRequest;
+
+          return pipelineCreationRequests;
         }
-        return data.project?.mergeRequest?.pipelineCreationRequests || [];
+        return [];
       },
       subscribeToMore: {
         document: pipelineCreationRequestsUpdatedSubscription,
         variables() {
           return {
-            mergeRequestId: this.mergeRequestGlobalId,
+            mergeRequestId: this.mergeRequest.id,
           };
         },
         skip() {
           return (
             !this.isRealtimePipelineCreationRequestsEnabled ||
             !this.isMergeRequestTable ||
-            !this.mergeRequestGlobalId
+            !this.mergeRequest.id
           );
         },
         updateQuery: (previousResult, { subscriptionData }) => {
@@ -148,12 +153,12 @@ export default {
       state: store.state,
       page: getParameterByName('page') || '1',
       requestData: {},
-      mergeRequestGlobalId: null,
       modalId: 'create-pipeline-for-fork-merge-request-modal',
       pipelineCreationRequests: [],
       showCreationFailedAlert: false,
       isCreatingPipeline: false,
       loaderTimeout: null,
+      mergeRequest: {},
     };
   },
 
@@ -218,6 +223,9 @@ export default {
         ? this.hasInProgressCreationRequests
         : this.state.isRunningMergeRequestPipeline;
     },
+    latestPipelineId() {
+      return this.state.pipelines[0].id;
+    },
   },
   watch: {
     pipelineCreationRequests: {
@@ -226,15 +234,32 @@ export default {
 
         if (hasInProgress) {
           this.startDebouncedPipelineLoader();
+        } else {
+          this.stopDebouncedPipelineLoader();
         }
 
         const hasSucceededRequests = this.hasSuccessCountIncreased(oldRequests, newRequests);
         const hasFailedRequests = this.hasFailureCountIncreased(oldRequests, newRequests);
 
-        if (hasSucceededRequests || hasFailedRequests) {
-          setTimeout(() => {
-            this.onRefreshPipelinesTable();
-          }, 500);
+        if (hasSucceededRequests) {
+          const createdPipelines = newRequests
+            .filter(
+              (req) =>
+                req.status === 'SUCCEEDED' &&
+                req.pipeline &&
+                this.latestPipelineId < getIdFromGraphQLId(req.pipeline.id),
+            )
+            .map((req) => req.pipeline);
+
+          const formattedPipelines = formatPipelinesGraphQLDataToREST({
+            fullPath: this.targetProjectFullPath,
+            mergeRequest: {
+              ...this.mergeRequest,
+              pipelines: { nodes: createdPipelines },
+            },
+          });
+
+          this.store.storePipelines([...formattedPipelines, ...this.state.pipelines]);
         }
 
         this.showCreationFailedAlert = hasFailedRequests;
-- 
GitLab


From 24c31e700fdb8b9290b3773eda012be47c9e577a Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 11 Nov 2025 10:50:04 +0000
Subject: [PATCH 28/34] Lefthook fixes

---
 app/assets/javascripts/editor/schema/ci.json | 51 +++++++++++++++-----
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/editor/schema/ci.json b/app/assets/javascripts/editor/schema/ci.json
index 888c3971e3e732..63547488e77ce4 100644
--- a/app/assets/javascripts/editor/schema/ci.json
+++ b/app/assets/javascripts/editor/schema/ci.json
@@ -477,14 +477,19 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": ["string"]
+                            "enum": [
+                              "string"
+                            ]
                           }
                         }
                       },
                       "then": {
                         "properties": {
                           "default": {
-                            "type": ["string", "null"]
+                            "type": [
+                              "string",
+                              "null"
+                            ]
                           }
                         }
                       }
@@ -493,14 +498,19 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": ["number"]
+                            "enum": [
+                              "number"
+                            ]
                           }
                         }
                       },
                       "then": {
                         "properties": {
                           "default": {
-                            "type": ["number", "null"]
+                            "type": [
+                              "number",
+                              "null"
+                            ]
                           }
                         }
                       }
@@ -509,14 +519,19 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": ["boolean"]
+                            "enum": [
+                              "boolean"
+                            ]
                           }
                         }
                       },
                       "then": {
                         "properties": {
                           "default": {
-                            "type": ["boolean", "null"]
+                            "type": [
+                              "boolean",
+                              "null"
+                            ]
                           }
                         }
                       }
@@ -525,7 +540,9 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": ["array"]
+                            "enum": [
+                              "array"
+                            ]
                           }
                         }
                       },
@@ -565,7 +582,9 @@
               "$ref": "#/definitions/baseInput"
             },
             {
-              "required": ["default"]
+              "required": [
+                "default"
+              ]
             },
             {
               "allOf": [
@@ -573,7 +592,9 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": ["string"]
+                        "enum": [
+                          "string"
+                        ]
                       }
                     }
                   },
@@ -589,7 +610,9 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": ["number"]
+                        "enum": [
+                          "number"
+                        ]
                       }
                     }
                   },
@@ -605,7 +628,9 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": ["boolean"]
+                        "enum": [
+                          "boolean"
+                        ]
                       }
                     }
                   },
@@ -621,7 +646,9 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": ["array"]
+                        "enum": [
+                          "array"
+                        ]
                       }
                     }
                   },
-- 
GitLab


From b57a14437b1951d785a7e90d78790544e0f9e11b Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 11 Nov 2025 16:24:11 +0000
Subject: [PATCH 29/34] Fix tests and extract pipeline mock

---
 .../legacy_pipelines_table_wrapper.vue        |  3 +-
 spec/frontend/ci/merge_requests/mock_data.js  | 98 ++++++++++---------
 .../legacy_pipelines_table_wrapper_spec.js    | 63 +++++++++---
 3 files changed, 103 insertions(+), 61 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 714b02d04fab53..49b3a6fbfc1a90 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -224,7 +224,8 @@ export default {
         : this.state.isRunningMergeRequestPipeline;
     },
     latestPipelineId() {
-      return this.state.pipelines[0].id;
+      const latest = this.state.pipelines[0];
+      return latest ? latest.id : 0;
     },
   },
   watch: {
diff --git a/spec/frontend/ci/merge_requests/mock_data.js b/spec/frontend/ci/merge_requests/mock_data.js
index 39c22c7f51cc2c..2c6067dba7a472 100644
--- a/spec/frontend/ci/merge_requests/mock_data.js
+++ b/spec/frontend/ci/merge_requests/mock_data.js
@@ -1,52 +1,60 @@
+export const generateMockPipeline = ({
+  id = '123',
+  mergeRequestEventType = 'DETACHED',
+  status = 'SUCCESS',
+} = {}) => ({
+  id: `gid://gitlab/Ci::Pipeline/${id}`,
+  iid: id,
+  path: `/project/pipelines/${id}`,
+  duration: 1000,
+  name: null,
+  finishedAt: '2024-01-15T10:30:00Z',
+  configSource: 'REPOSITORY_SOURCE',
+  mergeRequestEventType,
+  stuck: false,
+  failureReason: null,
+  yamlErrors: false,
+  latest: true,
+  retryable: true,
+  cancelable: false,
+  commit: {
+    id: 'gid://gitlab/Ci::Commit/1',
+    title:
+      "Merge branch '419724-apollo-mr-pipelines-build-pipeline-table-component-2' into 'master' ",
+    webPath: '/gitlab-org/gitlab/-/commit/a43ea6d3a453f8e603fb3558024c084c45c0c9e4',
+    shortId: 'a43ea6d3',
+    authorGravatar:
+      'https://secure.gravatar.com/avatar/295d89332b1f3e65933ee72a5f1a6081dc048333a42a5dd2bb8e81fd45590b30?s=80&d=identicon',
+    author: {
+      id: '1',
+      avatarUrl: '/uploads/-/system/user/avatar/5327378/avatar.png',
+      commitEmail: 'rando@gitlab.com',
+      name: 'Random User',
+      webUrl: 'https://gitlab.com/random_user',
+    },
+  },
+  detailedStatus: {
+    id: `${status.toLowerCase()}-${id}-${id}`,
+    hasDetails: true,
+    detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}`,
+    label: status.toLowerCase(),
+    name: status,
+  },
+  user: {
+    id: 'gid://gitlab/User/1',
+    avatar_url: '/uploads/-/system/user/avatar/5327378/avatar.png',
+    name: 'Random User',
+    path: '/random_user',
+  },
+});
+
 const createMergeRequestPipelines = ({ mergeRequestEventType = 'MERGE_TRAIN', count = 1 } = {}) => {
   const pipelines = [];
 
   for (let i = 0; i < count; i += 1) {
-    pipelines.push({
-      id: `gid://gitlab/Ci::Pipeline/${i}`,
-      iid: `gid://gitlab/Ci::Pipeline/${i + 10}`,
-      path: `/project/pipelines/${i}`,
-      duration: 1000,
-      name: null,
-      finishedAt: null,
-      configSource: 'REPOSITORY_SOURCE',
-      mergeRequestEventType,
-      stuck: false,
-      failureReason: null,
-      yamlErrors: false,
-      latest: true,
-      retryable: true,
-      cancelable: false,
-      commit: {
-        id: 'gid://gitlab/Ci::Commit/1',
-        title:
-          "Merge branch '419724-apollo-mr-pipelines-build-pipeline-table-component-2' into 'master' ",
-        webPath: '/gitlab-org/gitlab/-/commit/a43ea6d3a453f8e603fb3558024c084c45c0c9e4',
-        shortId: 'a43ea6d3',
-        authorGravatar:
-          'https://secure.gravatar.com/avatar/295d89332b1f3e65933ee72a5f1a6081dc048333a42a5dd2bb8e81fd45590b30?s=80&d=identicon',
-        author: {
-          id: '1',
-          avatarUrl: '/uploads/-/system/user/avatar/5327378/avatar.png',
-          commitEmail: 'rando@gitlab.com',
-          name: 'Random User',
-          webUrl: 'https://gitlab.com/random_user',
-        },
-      },
-      detailedStatus: {
-        id: '1',
-        hasDetails: true,
-        detailsPath: `/gitlab-org/gitlab/-/pipelines/${i}`,
-        label: 'skipped',
-        name: 'SKIPPED',
-      },
-      user: {
-        id: 'gid://gitlab/User/1',
-        avatar_url: '/uploads/-/system/user/avatar/5327378/avatar.png',
-        name: 'Random User',
-        path: '/random_user',
-      },
-    });
+    pipelines.push(
+      generateMockPipeline({ id: String(i), mergeRequestEventType, status: 'SKIPPED' }),
+    );
   }
 
   return {
diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index cfaa8c39430f48..ee9493a8c49a62 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -22,6 +22,7 @@ import axios from '~/lib/utils/axios_utils';
 import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
 import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import { generateMockPipeline } from 'jest/ci/merge_requests/mock_data';
 
 Vue.use(VueApollo);
 
@@ -33,18 +34,27 @@ jest.mock('~/alert');
 
 const generateMockPipelineCreationMergeRequest = (requests) => ({
   id: 'gid://gitlab/MergeRequest/3',
+  iid: '3',
+  title: 'Test MR',
+  webPath: '/test/project/-/merge_requests/3',
   pipelineCreationRequests: requests,
 });
 
 const generatePipelineCreationRequestsResponse = ({
   requests = [
-    { status: 'IN_PROGRESS', pipelineId: null, error: null },
-    { status: 'SUCCEEDED', pipelineId: '123', error: null },
+    { status: 'IN_PROGRESS', pipelineId: null, error: null, pipeline: null },
+    {
+      status: 'SUCCEEDED',
+      pipelineId: '123',
+      error: null,
+      pipeline: generateMockPipeline({ id: '123' }),
+    },
   ],
 } = {}) => ({
   data: {
     project: {
       id: 'gid://gitlab/Project/5',
+      fullPath: 'test/project',
       mergeRequest: generateMockPipelineCreationMergeRequest(requests),
     },
   },
@@ -52,8 +62,13 @@ const generatePipelineCreationRequestsResponse = ({
 
 const generatePipelineCreationSubscriptionUpdateResponse = ({
   requests = [
-    { status: 'IN_PROGRESS', pipelineId: null, error: null },
-    { status: 'SUCCEEDED', pipelineId: '123', error: null },
+    { status: 'IN_PROGRESS', pipelineId: null, error: null, pipeline: null },
+    {
+      status: 'SUCCEEDED',
+      pipelineId: '123',
+      error: null,
+      pipeline: generateMockPipeline({ id: '123' }),
+    },
   ],
 } = {}) => ({
   data: {
@@ -699,7 +714,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
         describe('Pipeline creation failed alert', () => {
           it('shows alert when pipeline creation fails', async () => {
             const failedRequests = [
-              { status: 'FAILED', pipelineId: null, error: 'Creation failed' },
+              { status: 'FAILED', pipelineId: null, pipeline: null, error: 'Creation failed' },
             ];
 
             getPipelineCreationRequestsHandler.mockResolvedValue(
@@ -727,7 +742,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
           it('hides alert when dismissed', async () => {
             const failedRequests = [
-              { status: 'FAILED', pipelineId: null, error: 'Creation failed' },
+              { status: 'FAILED', pipelineId: null, pipeline: null, error: 'Creation failed' },
             ];
 
             getPipelineCreationRequestsHandler.mockResolvedValue(
@@ -767,7 +782,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
             expect(findCreationFailedAlert().exists()).toBe(false);
 
             const failedRequests = [
-              { status: 'FAILED', pipelineId: null, error: 'Creation failed' },
+              { status: 'FAILED', pipelineId: null, pipeline: null, error: 'Creation failed' },
             ];
 
             getPipelineCreationRequestsHandler.mockResolvedValue(
@@ -799,7 +814,9 @@ describe('Pipelines table in Commits and Merge requests', () => {
                 findRunButton: () => findRunPipelineBtn(),
               },
             ])('disables the $buttonType button & enables loading', async ({ findRunButton }) => {
-              const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
+              const inProgressRequests = [
+                { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+              ];
 
               getPipelineCreationRequestsHandler.mockResolvedValue(
                 generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
@@ -854,7 +871,9 @@ describe('Pipelines table in Commits and Merge requests', () => {
             it('when hasInProgressCreationRequests becomes true', async () => {
               getPipelineCreationRequestsHandler.mockResolvedValue(
                 generatePipelineCreationRequestsResponse({
-                  requests: [{ status: 'IN_PROGRESS', pipelineId: null, error: null }],
+                  requests: [
+                    { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+                  ],
                 }),
               );
 
@@ -909,8 +928,17 @@ describe('Pipelines table in Commits and Merge requests', () => {
           });
 
           it('stops showing skeleton loader when pipeline creation completes', async () => {
-            const inProgressRequests = [{ status: 'IN_PROGRESS', pipelineId: null, error: null }];
-            const completedRequests = [{ status: 'SUCCEEDED', pipelineId: '123', error: null }];
+            const inProgressRequests = [
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+            ];
+            const completedRequests = [
+              {
+                status: 'SUCCEEDED',
+                pipelineId: '123',
+                pipeline: generateMockPipeline({ id: '123' }),
+                error: null,
+              },
+            ];
 
             getPipelineCreationRequestsHandler.mockResolvedValue(
               generatePipelineCreationRequestsResponse({ requests: inProgressRequests }),
@@ -946,8 +974,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
           it('continues showing skeleton loader when there are still in-progress requests', async () => {
             const inProgressRequests = [
-              { status: 'IN_PROGRESS', pipelineId: null, error: null },
-              { status: 'IN_PROGRESS', pipelineId: null, error: null },
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
             ];
 
             getPipelineCreationRequestsHandler.mockResolvedValue(
@@ -971,8 +999,13 @@ describe('Pipelines table in Commits and Merge requests', () => {
             expect(findSkeletonLoader().exists()).toBe(true);
 
             const mixedRequests = [
-              { status: 'IN_PROGRESS', pipelineId: null, error: null },
-              { status: 'SUCCEEDED', pipelineId: '123', error: null },
+              { status: 'IN_PROGRESS', pipelineId: null, pipeline: null, error: null },
+              {
+                status: 'SUCCEEDED',
+                pipelineId: '123',
+                pipeline: generateMockPipeline({ id: '123' }),
+                error: null,
+              },
             ];
 
             getPipelineCreationRequestsHandler.mockResolvedValue(
-- 
GitLab


From 85b4cddc23470f4e6ccdba45f2f24b0de3a01005 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Thu, 13 Nov 2025 19:48:33 +0000
Subject: [PATCH 30/34] Append graphql pipeline instead of transforming it

---
 ...t_pipeline_creation_requests.query.graphql | 76 ++++++++++++-----
 ...tion_requests_updated.subscription.graphql | 76 ++++++++++++-----
 .../legacy_pipelines_table_wrapper.vue        | 85 ++++++++++++++-----
 app/assets/javascripts/editor/schema/ci.json  | 51 +++--------
 spec/frontend/ci/merge_requests/mock_data.js  | 62 +++++++++++++-
 .../legacy_pipelines_table_wrapper_spec.js    | 42 +++++++--
 6 files changed, 281 insertions(+), 111 deletions(-)

diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
index ec90480323185e..8abbb66ac0f43e 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -1,3 +1,5 @@
+#import "~/graphql_shared/fragments/ci_icon.fragment.graphql"
+
 query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
   project(fullPath: $fullPath) {
     id
@@ -14,44 +16,72 @@ query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
         pipeline {
           id
           iid
-          name
-          duration
+          detailedStatus {
+            ...CiIcon
+            name
+            label
+            hasDetails
+          }
+          createdAt
           finishedAt
-          path
-          configSource
-          stuck
-          mergeRequestEventType
-          failureReason
-          yamlErrors
-          retryable
-          cancelable
+          duration
+          name
+          ref
+          refPath
+          refText
           commit {
             id
-            title
-            webPath
+            name
+            sha
             shortId
-            authorGravatar
+            title
+            webUrl
             author {
               id
               avatarUrl
-              commitEmail
+              webPath
               name
-              webUrl
             }
           }
-          detailedStatus {
+          user {
             id
-            hasDetails
-            detailsPath
-            label
             name
+            webPath
+            avatarUrl
           }
-          user {
+          source
+          latest
+          yamlErrors
+          failureReason
+          configSource
+          stuck
+          type
+          path
+          retryable
+          cancelable
+          stages {
+            nodes {
+              id
+              name
+              detailedStatus {
+                ...CiIcon
+                tooltip
+              }
+            }
+          }
+          mergeRequest {
             id
-            avatar_url: avatarUrl
-            name
-            path: webPath
+            iid
+            webPath
+            title
+          }
+          mergeRequestEventType
+          project {
+            id
+            fullPath
           }
+          hasManualActions
+          hasScheduledActions
         }
       }
     }
diff --git a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
index 7fd164dd2f22de..704f304197fe66 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
@@ -1,3 +1,5 @@
+#import "~/graphql_shared/fragments/ci_icon.fragment.graphql"
+
 subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!) {
   ciPipelineCreationRequestsUpdated(mergeRequestId: $mergeRequestId) {
     id
@@ -11,44 +13,72 @@ subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!)
       pipeline {
         id
         iid
-        name
-        duration
+        detailedStatus {
+          ...CiIcon
+          name
+          label
+          hasDetails
+        }
+        createdAt
         finishedAt
-        path
-        configSource
-        stuck
-        mergeRequestEventType
-        failureReason
-        yamlErrors
-        retryable
-        cancelable
+        duration
+        name
+        ref
+        refPath
+        refText
         commit {
           id
-          title
-          webPath
+          name
+          sha
           shortId
-          authorGravatar
+          title
+          webUrl
           author {
             id
             avatarUrl
-            commitEmail
+            webPath
             name
-            webUrl
           }
         }
-        detailedStatus {
+        user {
           id
-          hasDetails
-          detailsPath
-          label
           name
+          webPath
+          avatarUrl
         }
-        user {
+        source
+        latest
+        yamlErrors
+        failureReason
+        configSource
+        stuck
+        type
+        path
+        retryable
+        cancelable
+        stages {
+          nodes {
+            id
+            name
+            detailedStatus {
+              ...CiIcon
+              tooltip
+            }
+          }
+        }
+        mergeRequest {
           id
-          avatar_url: avatarUrl
-          name
-          path: webPath
+          iid
+          webPath
+          title
+        }
+        mergeRequestEventType
+        project {
+          id
+          fullPath
         }
+        hasManualActions
+        hasScheduledActions
       }
     }
   }
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 49b3a6fbfc1a90..2908ac81ad0a74 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -22,8 +22,13 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__, __ } from '~/locale';
 import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql';
 import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
-import { formatPipelinesGraphQLDataToREST } from '~/ci/merge_requests/utils';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_CI_PIPELINE } from '~/graphql_shared/constants';
+import { createAlert } from '~/alert';
+import retryPipelineMutation from '~/ci/pipelines_page/graphql/mutations/retry_pipeline.mutation.graphql';
+import cancelPipelineMutation from '~/ci/pipelines_page/graphql/mutations/cancel_pipeline.mutation.graphql';
+import { MR_PIPELINE_TYPE_DETACHED } from '~/ci/merge_requests/constants';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
 
 export default {
   components: {
@@ -209,11 +214,21 @@ export default {
      */
     latestPipelineDetachedFlag() {
       const latest = this.state.pipelines[0];
-      return (
-        latest &&
-        latest.flags &&
-        (latest.flags.detached_merge_request_pipeline || latest.flags.merge_request_pipeline)
-      );
+      if (latest) {
+        if (
+          latest.flags &&
+          (latest.flags.detached_merge_request_pipeline || latest.flags.merge_request_pipeline)
+        ) {
+          return true;
+        }
+        if (
+          latest.mergeRequestEventType &&
+          latest.mergeRequestEventType === MR_PIPELINE_TYPE_DETACHED
+        ) {
+          return true;
+        }
+      }
+      return false;
     },
     hasInProgressCreationRequests() {
       return this.requestLengthByStatus(this.pipelineCreationRequests, 'IN_PROGRESS') > 0;
@@ -250,17 +265,9 @@ export default {
                 req.pipeline &&
                 this.latestPipelineId < getIdFromGraphQLId(req.pipeline.id),
             )
-            .map((req) => req.pipeline);
+            .map((req) => ({ ...req.pipeline, id: getIdFromGraphQLId(req.pipeline.id) }));
 
-          const formattedPipelines = formatPipelinesGraphQLDataToREST({
-            fullPath: this.targetProjectFullPath,
-            mergeRequest: {
-              ...this.mergeRequest,
-              pipelines: { nodes: createdPipelines },
-            },
-          });
-
-          this.store.storePipelines([...formattedPipelines, ...this.state.pipelines]);
+          this.store.storePipelines([...createdPipelines, ...this.state.pipelines]);
         }
 
         this.showCreationFailedAlert = hasFailedRequests;
@@ -358,6 +365,46 @@ export default {
 
       this.isCreatingPipeline = false;
     },
+    async action({ pipeline, mutation, mutationType, defaultErrorMessage }) {
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation,
+          variables: {
+            id: pipeline.id,
+          },
+        });
+
+        const [errorMessage] = data[mutationType]?.errors ?? [];
+
+        if (errorMessage) {
+          createAlert({
+            message: defaultErrorMessage,
+          });
+          this.captureError(errorMessage);
+        }
+      } catch (error) {
+        this.captureError(error);
+      }
+    },
+    retryPipeline(pipeline) {
+      this.action({
+        pipeline: { ...pipeline, id: convertToGraphQLId(TYPENAME_CI_PIPELINE, pipeline.id) },
+        mutation: retryPipelineMutation,
+        mutationType: 'pipelineRetry',
+        defaultErrorMessage: s__('Pipelines|The pipeline could not be retried.'),
+      });
+    },
+    cancelPipeline(pipeline) {
+      this.action({
+        pipeline: { ...pipeline, id: convertToGraphQLId(TYPENAME_CI_PIPELINE, pipeline.id) },
+        mutation: cancelPipelineMutation,
+        mutationType: 'pipelineCancel',
+        defaultErrorMessage: s__('Pipelines|The pipeline could not be canceled.'),
+      });
+    },
+    captureError(exception) {
+      Sentry.captureException(exception);
+    },
   },
   pipelineIdKey: PIPELINE_ID_KEY,
   modal: {
@@ -488,9 +535,9 @@ export default {
         :pipelines="state.pipelines"
         :view-type="viewType"
         class="@lg/panel:-gl-mt-px"
-        @cancel-pipeline="onCancelPipeline"
+        @cancel-pipeline="cancelPipeline"
         @refresh-pipelines-table="onRefreshPipelinesTable"
-        @retry-pipeline="onRetryPipeline"
+        @retry-pipeline="retryPipeline"
       >
         <template #table-header-actions>
           <div v-if="canRenderPipelineButton" class="gl-text-right">
diff --git a/app/assets/javascripts/editor/schema/ci.json b/app/assets/javascripts/editor/schema/ci.json
index 63547488e77ce4..888c3971e3e732 100644
--- a/app/assets/javascripts/editor/schema/ci.json
+++ b/app/assets/javascripts/editor/schema/ci.json
@@ -477,19 +477,14 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": [
-                              "string"
-                            ]
+                            "enum": ["string"]
                           }
                         }
                       },
                       "then": {
                         "properties": {
                           "default": {
-                            "type": [
-                              "string",
-                              "null"
-                            ]
+                            "type": ["string", "null"]
                           }
                         }
                       }
@@ -498,19 +493,14 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": [
-                              "number"
-                            ]
+                            "enum": ["number"]
                           }
                         }
                       },
                       "then": {
                         "properties": {
                           "default": {
-                            "type": [
-                              "number",
-                              "null"
-                            ]
+                            "type": ["number", "null"]
                           }
                         }
                       }
@@ -519,19 +509,14 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": [
-                              "boolean"
-                            ]
+                            "enum": ["boolean"]
                           }
                         }
                       },
                       "then": {
                         "properties": {
                           "default": {
-                            "type": [
-                              "boolean",
-                              "null"
-                            ]
+                            "type": ["boolean", "null"]
                           }
                         }
                       }
@@ -540,9 +525,7 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "enum": [
-                              "array"
-                            ]
+                            "enum": ["array"]
                           }
                         }
                       },
@@ -582,9 +565,7 @@
               "$ref": "#/definitions/baseInput"
             },
             {
-              "required": [
-                "default"
-              ]
+              "required": ["default"]
             },
             {
               "allOf": [
@@ -592,9 +573,7 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": [
-                          "string"
-                        ]
+                        "enum": ["string"]
                       }
                     }
                   },
@@ -610,9 +589,7 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": [
-                          "number"
-                        ]
+                        "enum": ["number"]
                       }
                     }
                   },
@@ -628,9 +605,7 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": [
-                          "boolean"
-                        ]
+                        "enum": ["boolean"]
                       }
                     }
                   },
@@ -646,9 +621,7 @@
                   "if": {
                     "properties": {
                       "type": {
-                        "enum": [
-                          "array"
-                        ]
+                        "enum": ["array"]
                       }
                     }
                   },
diff --git a/spec/frontend/ci/merge_requests/mock_data.js b/spec/frontend/ci/merge_requests/mock_data.js
index 2c6067dba7a472..3bc5a0a6129f63 100644
--- a/spec/frontend/ci/merge_requests/mock_data.js
+++ b/spec/frontend/ci/merge_requests/mock_data.js
@@ -8,6 +8,7 @@ export const generateMockPipeline = ({
   path: `/project/pipelines/${id}`,
   duration: 1000,
   name: null,
+  createdAt: '2024-01-15T10:29:00Z',
   finishedAt: '2024-01-15T10:30:00Z',
   configSource: 'REPOSITORY_SOURCE',
   mergeRequestEventType,
@@ -17,12 +18,22 @@ export const generateMockPipeline = ({
   latest: true,
   retryable: true,
   cancelable: false,
+  ref: 'refs/merge-requests/1/head',
+  refPath: 'refs/heads/root-main-patch-56329',
+  refText: '',
+  source: 'merge_request_event',
+  type: 'merge_request',
+  hasManualActions: true,
+  hasScheduledActions: false,
   commit: {
     id: 'gid://gitlab/Ci::Commit/1',
+    name: "Merge branch '419724-apollo-mr-pipelines-build-pipeline-table-component-2' into 'master' ",
     title:
       "Merge branch '419724-apollo-mr-pipelines-build-pipeline-table-component-2' into 'master' ",
     webPath: '/gitlab-org/gitlab/-/commit/a43ea6d3a453f8e603fb3558024c084c45c0c9e4',
+    webUrl: '/gitlab-org/gitlab/-/commit/a43ea6d3a453f8e603fb3558024c084c45c0c9e4',
     shortId: 'a43ea6d3',
+    sha: 'a43ea6d3fc81257b1caeeaceb21b36349110ad54',
     authorGravatar:
       'https://secure.gravatar.com/avatar/295d89332b1f3e65933ee72a5f1a6081dc048333a42a5dd2bb8e81fd45590b30?s=80&d=identicon',
     author: {
@@ -31,6 +42,7 @@ export const generateMockPipeline = ({
       commitEmail: 'rando@gitlab.com',
       name: 'Random User',
       webUrl: 'https://gitlab.com/random_user',
+      webPath: '/random_user',
     },
   },
   detailedStatus: {
@@ -40,11 +52,59 @@ export const generateMockPipeline = ({
     label: status.toLowerCase(),
     name: status,
   },
+  stages: {
+    nodes: [
+      {
+        id: 'gid://gitlab/Ci::Stage/1949',
+        name: 'build',
+        detailedStatus: {
+          id: 'success-1949-1949',
+          icon: 'status_success',
+          text: 'Passed',
+          detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}#build`,
+          tooltip: 'passed',
+        },
+      },
+      {
+        id: 'gid://gitlab/Ci::Stage/1950',
+        name: 'test',
+        detailedStatus: {
+          id: 'success-1950-1950',
+          icon: 'status_success',
+          text: 'Passed',
+          detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}#test`,
+          tooltip: 'passed',
+        },
+      },
+      {
+        id: 'gid://gitlab/Ci::Stage/1951',
+        name: 'deploy',
+        detailedStatus: {
+          id: 'success-1951-1951',
+          icon: 'status_success',
+          text: 'Passed',
+          detailsPath: `/gitlab-org/gitlab/-/pipelines/${id}#deploy`,
+          tooltip: 'passed',
+        },
+      },
+    ],
+  },
+  mergeRequest: {
+    id: 'gid://gitlab/MergeRequest/1',
+    iid: '1',
+    webPath: '/gitlab-org/gitlab/-/merge_requests/1',
+    title: 'Edit README.md',
+  },
+  project: {
+    id: 'gid://gitlab/Project/1',
+    fullPath: 'gitlab-org/gitlab',
+  },
   user: {
     id: 'gid://gitlab/User/1',
-    avatar_url: '/uploads/-/system/user/avatar/5327378/avatar.png',
+    avatarUrl: '/uploads/-/system/user/avatar/5327378/avatar.png',
     name: 'Random User',
     path: '/random_user',
+    webPath: '/random_user',
   },
 });
 
diff --git a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
index ee9493a8c49a62..aecd410ce06e6e 100644
--- a/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
+++ b/spec/frontend/commit/pipelines/legacy_pipelines_table_wrapper_spec.js
@@ -23,6 +23,8 @@ import getPipelineCreationRequests from '~/ci/merge_requests/graphql/queries/get
 import pipelineCreationRequestsUpdatedSubscription from '~/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { generateMockPipeline } from 'jest/ci/merge_requests/mock_data';
+import retryPipelineMutation from '~/ci/pipelines_page/graphql/mutations/retry_pipeline.mutation.graphql';
+import cancelPipelineMutation from '~/ci/pipelines_page/graphql/mutations/cancel_pipeline.mutation.graphql';
 
 Vue.use(VueApollo);
 
@@ -495,6 +497,14 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
     describe('When cancelling a pipeline', () => {
       it('sends the cancel action', async () => {
+        const cancelPipelineMutationHandler = jest.fn().mockResolvedValue({
+          data: {
+            pipelineCancel: {
+              errors: [],
+            },
+          },
+        });
+
         const cancelablePipeline = {
           ...pipeline,
           cancel_path: '/root/project/-/pipelines/1/cancel',
@@ -504,27 +514,47 @@ describe('Pipelines table in Commits and Merge requests', () => {
           },
         };
 
-        expect(mock.history.post).toHaveLength(0);
+        createComponent({
+          mountFn: shallowMountExtended,
+          handlers: [[cancelPipelineMutation, cancelPipelineMutationHandler]],
+        });
+
+        await waitForPromises();
 
         findPipelinesTable().vm.$emit('cancel-pipeline', cancelablePipeline);
 
         await waitForPromises();
 
-        expect(mock.history.post).toHaveLength(1);
-        expect(mock.history.post[0].url).toContain('cancel.json');
+        expect(cancelPipelineMutationHandler).toHaveBeenCalledWith({
+          id: `gid://gitlab/Ci::Pipeline/${cancelablePipeline.id}`,
+        });
       });
     });
 
     describe('When retrying a pipeline', () => {
       it('sends the retry action', async () => {
-        expect(mock.history.post).toHaveLength(0);
+        const retryPipelineMutationHandler = jest.fn().mockResolvedValue({
+          data: {
+            pipelineRetry: {
+              errors: [],
+            },
+          },
+        });
+
+        createComponent({
+          mountFn: shallowMountExtended,
+          handlers: [[retryPipelineMutation, retryPipelineMutationHandler]],
+        });
+
+        await waitForPromises();
 
         findPipelinesTable().vm.$emit('retry-pipeline', pipeline);
 
         await waitForPromises();
 
-        expect(mock.history.post).toHaveLength(1);
-        expect(mock.history.post[0].url).toContain('retry.json');
+        expect(retryPipelineMutationHandler).toHaveBeenCalledWith({
+          id: `gid://gitlab/Ci::Pipeline/${pipeline.id}`,
+        });
       });
     });
 
-- 
GitLab


From 24854b3e15276cb69a328ab9e9401108610f6f13 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Tue, 18 Nov 2025 11:13:08 +0000
Subject: [PATCH 31/34] Extract pipeline details fragment from pipeline
 creation requests

---
 ...t_pipeline_creation_requests.query.graphql | 71 +-----------------
 ...tion_requests_updated.subscription.graphql | 71 +-----------------
 .../pipeline_details.fragment.graphql         | 72 +++++++++++++++++++
 .../legacy_pipelines_table_wrapper.vue        |  6 +-
 4 files changed, 79 insertions(+), 141 deletions(-)
 create mode 100644 app/assets/javascripts/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql

diff --git a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
index 8abbb66ac0f43e..f01e6357086849 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/queries/get_pipeline_creation_requests.query.graphql
@@ -1,4 +1,4 @@
-#import "~/graphql_shared/fragments/ci_icon.fragment.graphql"
+#import "~/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql"
 
 query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
   project(fullPath: $fullPath) {
@@ -14,74 +14,7 @@ query getPipelineCreationRequests($fullPath: ID!, $mergeRequestIid: String!) {
         pipelineId
         error
         pipeline {
-          id
-          iid
-          detailedStatus {
-            ...CiIcon
-            name
-            label
-            hasDetails
-          }
-          createdAt
-          finishedAt
-          duration
-          name
-          ref
-          refPath
-          refText
-          commit {
-            id
-            name
-            sha
-            shortId
-            title
-            webUrl
-            author {
-              id
-              avatarUrl
-              webPath
-              name
-            }
-          }
-          user {
-            id
-            name
-            webPath
-            avatarUrl
-          }
-          source
-          latest
-          yamlErrors
-          failureReason
-          configSource
-          stuck
-          type
-          path
-          retryable
-          cancelable
-          stages {
-            nodes {
-              id
-              name
-              detailedStatus {
-                ...CiIcon
-                tooltip
-              }
-            }
-          }
-          mergeRequest {
-            id
-            iid
-            webPath
-            title
-          }
-          mergeRequestEventType
-          project {
-            id
-            fullPath
-          }
-          hasManualActions
-          hasScheduledActions
+          ...PipelineDetails
         }
       }
     }
diff --git a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
index 704f304197fe66..8c00412f078179 100644
--- a/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
+++ b/app/assets/javascripts/ci/merge_requests/graphql/subscriptions/pipeline_creation_requests_updated.subscription.graphql
@@ -1,4 +1,4 @@
-#import "~/graphql_shared/fragments/ci_icon.fragment.graphql"
+#import "~/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql"
 
 subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!) {
   ciPipelineCreationRequestsUpdated(mergeRequestId: $mergeRequestId) {
@@ -11,74 +11,7 @@ subscription ciPipelineCreationRequestsUpdated($mergeRequestId: MergeRequestID!)
       pipelineId
       error
       pipeline {
-        id
-        iid
-        detailedStatus {
-          ...CiIcon
-          name
-          label
-          hasDetails
-        }
-        createdAt
-        finishedAt
-        duration
-        name
-        ref
-        refPath
-        refText
-        commit {
-          id
-          name
-          sha
-          shortId
-          title
-          webUrl
-          author {
-            id
-            avatarUrl
-            webPath
-            name
-          }
-        }
-        user {
-          id
-          name
-          webPath
-          avatarUrl
-        }
-        source
-        latest
-        yamlErrors
-        failureReason
-        configSource
-        stuck
-        type
-        path
-        retryable
-        cancelable
-        stages {
-          nodes {
-            id
-            name
-            detailedStatus {
-              ...CiIcon
-              tooltip
-            }
-          }
-        }
-        mergeRequest {
-          id
-          iid
-          webPath
-          title
-        }
-        mergeRequestEventType
-        project {
-          id
-          fullPath
-        }
-        hasManualActions
-        hasScheduledActions
+        ...PipelineDetails
       }
     }
   }
diff --git a/app/assets/javascripts/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql b/app/assets/javascripts/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql
new file mode 100644
index 00000000000000..44bc86c32ee691
--- /dev/null
+++ b/app/assets/javascripts/ci/pipelines_page/graphql/fragments/pipeline_details.fragment.graphql
@@ -0,0 +1,72 @@
+#import "~/graphql_shared/fragments/ci_icon.fragment.graphql"
+
+fragment PipelineDetails on Pipeline {
+  id
+  iid
+  detailedStatus {
+    ...CiIcon
+    name
+    label
+    hasDetails
+  }
+  createdAt
+  finishedAt
+  duration
+  name
+  ref
+  refPath
+  refText
+  commit {
+    id
+    name
+    sha
+    shortId
+    title
+    webUrl
+    author {
+      id
+      avatarUrl
+      webPath
+      name
+    }
+  }
+  user {
+    id
+    name
+    webPath
+    avatarUrl
+  }
+  source
+  latest
+  yamlErrors
+  failureReason
+  configSource
+  stuck
+  type
+  path
+  retryable
+  cancelable
+  stages {
+    nodes {
+      id
+      name
+      detailedStatus {
+        ...CiIcon
+        tooltip
+      }
+    }
+  }
+  mergeRequest {
+    id
+    iid
+    webPath
+    title
+  }
+  mergeRequestEventType
+  project {
+    id
+    fullPath
+  }
+  hasManualActions
+  hasScheduledActions
+}
diff --git a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
index 2908ac81ad0a74..9061c44edeafb0 100644
--- a/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
+++ b/app/assets/javascripts/commit/pipelines/legacy_pipelines_table_wrapper.vue
@@ -317,9 +317,9 @@ export default {
      *
      */
     onClickRunPipeline() {
-      // if (this.isRealtimePipelineCreationRequestsEnabled) {
-      this.startDebouncedPipelineLoader();
-      // }
+      if (this.isRealtimePipelineCreationRequestsEnabled) {
+        this.startDebouncedPipelineLoader();
+      }
       eventHub.$emit('runMergeRequestPipeline', {
         projectId: this.projectId,
         mergeRequestId: this.mergeRequestId,
-- 
GitLab


From c58927a26baf067111bd8df74692c3f696938c5e Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Wed, 19 Nov 2025 12:49:28 +0000
Subject: [PATCH 32/34] Reset backend changes made in !212247

---
 spec/graphql/types/ci/pipeline_creation/request_type_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb b/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb
index 59ae8fea363749..87fb91de1d503a 100644
--- a/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb
+++ b/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb
@@ -6,7 +6,7 @@
   include GraphqlHelpers
 
   it 'has the expected fields' do
-    expect(described_class).to have_graphql_fields(:error, :pipeline_id, :status, :pipeline)
+    expect(described_class).to have_graphql_fields(:error, :pipeline_id, :status)
   end
 
   describe 'pipeline field' do
-- 
GitLab


From 6da85eb1ec6c76dcd155ff8a391fdca85d0db737 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Wed, 19 Nov 2025 15:10:32 +0000
Subject: [PATCH 33/34] Fix `pipelines_table_wrapper_spec` test by updating
 mock property

---
 spec/frontend/ci/merge_requests/mock_data.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/frontend/ci/merge_requests/mock_data.js b/spec/frontend/ci/merge_requests/mock_data.js
index 3bc5a0a6129f63..400749623f82f8 100644
--- a/spec/frontend/ci/merge_requests/mock_data.js
+++ b/spec/frontend/ci/merge_requests/mock_data.js
@@ -101,7 +101,7 @@ export const generateMockPipeline = ({
   },
   user: {
     id: 'gid://gitlab/User/1',
-    avatarUrl: '/uploads/-/system/user/avatar/5327378/avatar.png',
+    avatar_url: '/uploads/-/system/user/avatar/5327378/avatar.png',
     name: 'Random User',
     path: '/random_user',
     webPath: '/random_user',
-- 
GitLab


From 66e43572cf65e26256f79ca73fbe3be3744d12c3 Mon Sep 17 00:00:00 2001
From: Sahil Sharma <sasharma@gitlab.com>
Date: Wed, 19 Nov 2025 15:21:37 +0000
Subject: [PATCH 34/34] Fix `request_type_spec` by adding missing graphql field

---
 spec/graphql/types/ci/pipeline_creation/request_type_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb b/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb
index 87fb91de1d503a..59ae8fea363749 100644
--- a/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb
+++ b/spec/graphql/types/ci/pipeline_creation/request_type_spec.rb
@@ -6,7 +6,7 @@
   include GraphqlHelpers
 
   it 'has the expected fields' do
-    expect(described_class).to have_graphql_fields(:error, :pipeline_id, :status)
+    expect(described_class).to have_graphql_fields(:error, :pipeline_id, :status, :pipeline)
   end
 
   describe 'pipeline field' do
-- 
GitLab