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

10 files changed, 94 insertions, 18 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);
+          }
         });
       },
     },
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index 14a1e11a6ea..6de125e7e80 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -38,9 +38,14 @@ class Projects::CommitController < Projects::ApplicationController
       format.json do
         Gitlab::PollingInterval.set_header(response, interval: 10_000)
 
-        render json: PipelineSerializer
-          .new(project: @project, current_user: @current_user)
-          .represent(@pipelines)
+        render json: {
+          pipelines: PipelineSerializer
+            .new(project: @project, current_user: @current_user)
+            .represent(@pipelines),
+          count: {
+            all: @pipelines.count
+          }
+        }
       end
     end
   end
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index a573b392591..70c41da4de5 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -112,9 +112,14 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
 
     Gitlab::PollingInterval.set_header(response, interval: 10_000)
 
-    render json: PipelineSerializer
-      .new(project: @project, current_user: @current_user)
-      .represent(@pipelines)
+    render json: {
+      pipelines: PipelineSerializer
+        .new(project: @project, current_user: @current_user)
+        .represent(@pipelines),
+      count: {
+        all: @pipelines.count
+      }
+    }
   end
 
   def edit
diff --git a/app/views/projects/commit/_ci_menu.html.haml b/app/views/projects/commit/_ci_menu.html.haml
index f3f11b5b405..7338468967f 100644
--- a/app/views/projects/commit/_ci_menu.html.haml
+++ b/app/views/projects/commit/_ci_menu.html.haml
@@ -7,4 +7,4 @@
     = nav_link(path: 'commit#pipelines') do
       = link_to pipelines_project_commit_path(@project, @commit.id) do
         Pipelines
-        %span.badge= @commit.pipelines.size
+        %span.badge.js-pipelines-mr-count= @commit.pipelines.size
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 13012151349..2efc1d68190 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -47,7 +47,7 @@
                 %li.pipelines-tab
                   = link_to pipelines_project_merge_request_path(@project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
                     Pipelines
-                    %span.badge= @pipelines.size
+                    %span.badge.js-pipelines-mr-count= @pipelines.size
               %li.diffs-tab
                 = link_to diffs_project_merge_request_path(@project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
                   Changes
diff --git a/changelogs/unreleased/34075-pipelines-count-mt.yml b/changelogs/unreleased/34075-pipelines-count-mt.yml
new file mode 100644
index 00000000000..3846e7b06a4
--- /dev/null
+++ b/changelogs/unreleased/34075-pipelines-count-mt.yml
@@ -0,0 +1,5 @@
+---
+title: Update Pipeline's badge count in Merge Request and Commits view to match real-time
+  content
+merge_request:
+author:
diff --git a/spec/controllers/projects/commit_controller_spec.rb b/spec/controllers/projects/commit_controller_spec.rb
index eb61a0c080c..df53863482d 100644
--- a/spec/controllers/projects/commit_controller_spec.rb
+++ b/spec/controllers/projects/commit_controller_spec.rb
@@ -343,7 +343,8 @@ describe Projects::CommitController do
             get_pipelines(id: commit.id, format: :json)
 
             expect(response).to be_ok
-            expect(JSON.parse(response.body)).not_to be_empty
+            expect(JSON.parse(response.body)['pipelines']).not_to be_empty
+            expect(JSON.parse(response.body)['count']['all']).to eq 1
           end
         end
       end
diff --git a/spec/controllers/projects/merge_requests_controller_spec.rb b/spec/controllers/projects/merge_requests_controller_spec.rb
index 6f9ce60cf75..c193babead0 100644
--- a/spec/controllers/projects/merge_requests_controller_spec.rb
+++ b/spec/controllers/projects/merge_requests_controller_spec.rb
@@ -481,7 +481,8 @@ describe Projects::MergeRequestsController do
     end
 
     it 'responds with serialized pipelines' do
-      expect(json_response).not_to be_empty
+      expect(json_response['pipelines']).not_to be_empty
+      expect(json_response['count']['all']).to eq 1
     end
   end
 
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index 694f94efcff..a34cadec0ab 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -85,6 +85,41 @@ describe('Pipelines table in Commits and Merge requests', () => {
         }, 0);
       });
     });
+
+    describe('pipeline badge counts', () => {
+      const pipelinesResponse = (request, next) => {
+        next(request.respondWith(JSON.stringify([pipeline]), {
+          status: 200,
+        }));
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(pipelinesResponse);
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(Vue.http.interceptors, pipelinesResponse);
+        this.component.$destroy();
+      });
+
+      it('should receive update-pipelines-count event', (done) => {
+        const element = document.createElement('div');
+        document.body.appendChild(element);
+
+        element.addEventListener('update-pipelines-count', (event) => {
+          expect(event.detail.pipelines).toEqual([pipeline]);
+          done();
+        });
+
+        this.component = new PipelinesTable({
+          propsData: {
+            endpoint: 'endpoint',
+            helpPagePath: 'foo',
+          },
+        }).$mount();
+        element.appendChild(this.component.$el);
+      });
+    });
   });
 
   describe('unsuccessfull request', () => {