Update Pipeline's badge count in Merge Request and Commits view to match real-time content

2 files changed, 32 insertions, 8 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index 2c38440a2af..687f09882a7 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -18,13 +18,26 @@ window.gl.CommitPipelinesTable = CommitPipelinesTable;
 document.addEventListener('DOMContentLoaded', () => {
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
 
-  if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
-    const table = new CommitPipelinesTable({
-      propsData: {
-        endpoint: pipelineTableViewEl.dataset.endpoint,
-        helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
-      },
-    }).$mount();
-    pipelineTableViewEl.appendChild(table.$el);
+  if (pipelineTableViewEl) {
+      // Update MR and Commits tabs
+    pipelineTableViewEl.addEventListener('update-pipelines-count', (event) => {
+      if (event.detail.pipelines &&
+        event.detail.pipelines.count &&
+        event.detail.pipelines.count.all) {
+        const badge = document.querySelector('.js-pipelines-mr-count');
+
+        badge.textContent = event.detail.pipelines.count.all;
+      }
+    });
+
+    if (pipelineTableViewEl.dataset.disableInitialization === undefined) {
+      const table = new CommitPipelinesTable({
+        propsData: {
+          endpoint: pipelineTableViewEl.dataset.endpoint,
+          helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+        },
+      }).$mount();
+      pipelineTableViewEl.appendChild(table.$el);
+    }
   }
 });
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 6d31b78b36d..dd751ec97a8 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -55,6 +55,17 @@
           // depending of the endpoint the response can either bring a `pipelines` key or not.
           const pipelines = response.pipelines || response;
           this.setCommonData(pipelines);
+
+          const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
+            detail: {
+              pipelines: response,
+            },
+          });
+
+          // notifiy to update the count in tabs
+          if (this.$el.parentElement) {
+            this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
+          }
         });
       },
     },