Add real-time pipeline status updates to MR Pipelines page using GraphQL subscription

Summary

As part of the MR Pipelines migration to GraphQL (&14144) • Sahil Sharma • 18.7, we need to implement the ci_pipeline_statuses_updated subscription to provide real-time pipeline status updates to users without requiring page refreshes or polling.

Background

The ci_pipeline_statuses_updated subscription was created in Add pipeline statuses subscription (!210777 - merged) • Payton Burdette • 18.6 and successfully implemented for the Build > Pipelines page in Move pipelines page to GraphQL - Part 8 (!211323 - merged) • Payton Burdette • 18.6. This subscription provides real-time updates when pipeline statuses change, offering a better user experience by immediately reflecting pipeline state changes in the UI.

The MR Pipelines page should leverage this same subscription to provide users with instant feedback when:

  • Pipeline statuses change (pending → running → success/failed)
  • New pipelines are created for the merge request
  • Pipelines are retried or canceled

What needs to be done

Implement the ci_pipeline_statuses_updated subscription on the MR Pipelines page to:

  1. Subscribe to pipeline updates - Connect to the subscription when the MR Pipelines page loads
  2. Handle status changes - Update pipeline statuses in real-time as they change (running, success, failed, etc.)
  3. Merge new pipelines - Add newly created pipelines to the list automatically
  4. Update existing pipelines - Reflect changes to existing pipelines without full page refresh
Edited by Sahil Sharma