Commit 706d99ae authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

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

parent 0618ad12
...@@ -18,13 +18,26 @@ window.gl.CommitPipelinesTable = CommitPipelinesTable; ...@@ -18,13 +18,26 @@ window.gl.CommitPipelinesTable = CommitPipelinesTable;
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view'); const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) { if (pipelineTableViewEl) {
const table = new CommitPipelinesTable({ // Update MR and Commits tabs
propsData: { pipelineTableViewEl.addEventListener('update-pipelines-count', (event) => {
endpoint: pipelineTableViewEl.dataset.endpoint, if (event.detail.pipelines &&
helpPagePath: pipelineTableViewEl.dataset.helpPagePath, event.detail.pipelines.count &&
}, event.detail.pipelines.count.all) {
}).$mount(); const badge = document.querySelector('.js-pipelines-mr-count');
pipelineTableViewEl.appendChild(table.$el);
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);
}
} }
}); });
...@@ -55,6 +55,17 @@ ...@@ -55,6 +55,17 @@
// depending of the endpoint the response can either bring a `pipelines` key or not. // depending of the endpoint the response can either bring a `pipelines` key or not.
const pipelines = response.pipelines || response; const pipelines = response.pipelines || response;
this.setCommonData(pipelines); 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);
}
}); });
}, },
}, },
......
...@@ -38,9 +38,14 @@ class Projects::CommitController < Projects::ApplicationController ...@@ -38,9 +38,14 @@ class Projects::CommitController < Projects::ApplicationController
format.json do format.json do
Gitlab::PollingInterval.set_header(response, interval: 10_000) Gitlab::PollingInterval.set_header(response, interval: 10_000)
render json: PipelineSerializer render json: {
.new(project: @project, current_user: @current_user) pipelines: PipelineSerializer
.represent(@pipelines) .new(project: @project, current_user: @current_user)
.represent(@pipelines),
count: {
all: @pipelines.count
}
}
end end
end end
end end
......
...@@ -112,9 +112,14 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo ...@@ -112,9 +112,14 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
Gitlab::PollingInterval.set_header(response, interval: 10_000) Gitlab::PollingInterval.set_header(response, interval: 10_000)
render json: PipelineSerializer render json: {
.new(project: @project, current_user: @current_user) pipelines: PipelineSerializer
.represent(@pipelines) .new(project: @project, current_user: @current_user)
.represent(@pipelines),
count: {
all: @pipelines.count
}
}
end end
def edit def edit
......
...@@ -7,4 +7,4 @@ ...@@ -7,4 +7,4 @@
= nav_link(path: 'commit#pipelines') do = nav_link(path: 'commit#pipelines') do
= link_to pipelines_project_commit_path(@project, @commit.id) do = link_to pipelines_project_commit_path(@project, @commit.id) do
Pipelines Pipelines
%span.badge= @commit.pipelines.size %span.badge.js-pipelines-mr-count= @commit.pipelines.size
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
%li.pipelines-tab %li.pipelines-tab
= link_to pipelines_project_merge_request_path(@project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do = link_to pipelines_project_merge_request_path(@project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
Pipelines Pipelines
%span.badge= @pipelines.size %span.badge.js-pipelines-mr-count= @pipelines.size
%li.diffs-tab %li.diffs-tab
= link_to diffs_project_merge_request_path(@project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do = link_to diffs_project_merge_request_path(@project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
Changes Changes
......
---
title: Update Pipeline's badge count in Merge Request and Commits view to match real-time
content
merge_request:
author:
...@@ -343,7 +343,8 @@ describe Projects::CommitController do ...@@ -343,7 +343,8 @@ describe Projects::CommitController do
get_pipelines(id: commit.id, format: :json) get_pipelines(id: commit.id, format: :json)
expect(response).to be_ok 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 end
end end
......
...@@ -481,7 +481,8 @@ describe Projects::MergeRequestsController do ...@@ -481,7 +481,8 @@ describe Projects::MergeRequestsController do
end end
it 'responds with serialized pipelines' do 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
end end
......
...@@ -85,6 +85,41 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -85,6 +85,41 @@ describe('Pipelines table in Commits and Merge requests', () => {
}, 0); }, 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', () => { describe('unsuccessfull request', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment