diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-07-14 15:52:54 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-07-14 15:52:54 +0000 |
commit | 706d99aed8985d0a278107295f5f1d26f0b42383 (patch) | |
tree | 251eddb4221ee6e7ac0bd960b109981d5c5975f1 | |
parent | 0618ad12e2b50dd01ec1c5ce440345cb64e26133 (diff) | |
download | gitlab-ce-706d99aed8985d0a278107295f5f1d26f0b42383.tar.gz |
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', () => { |