diff options
| -rw-r--r-- | app/assets/javascripts/jobs/components/stages_dropdown.vue | 51 | ||||
| -rw-r--r-- | changelogs/unreleased/nfriend-update-job-detail-view-sidebar.yml | 5 | ||||
| -rw-r--r-- | locale/gitlab.pot | 12 | ||||
| -rw-r--r-- | spec/features/projects/jobs_spec.rb | 109 | ||||
| -rw-r--r-- | spec/javascripts/jobs/components/stages_dropdown_spec.js | 188 |
5 files changed, 316 insertions, 49 deletions
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue index c5076d65ff9..6e92b599b0a 100644 --- a/app/assets/javascripts/jobs/components/stages_dropdown.vue +++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue @@ -1,5 +1,6 @@ <script> import _ from 'underscore'; +import { GlLink } from '@gitlab/ui'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import Icon from '~/vue_shared/components/icon.vue'; @@ -7,6 +8,7 @@ export default { components: { CiIcon, Icon, + GlLink, }, props: { pipeline: { @@ -26,6 +28,12 @@ export default { hasRef() { return !_.isEmpty(this.pipeline.ref); }, + isTriggeredByMergeRequest() { + return Boolean(this.pipeline.merge_request); + }, + isMergeRequestPipeline() { + return Boolean(this.pipeline.flags && this.pipeline.flags.merge_request_pipeline); + }, }, methods: { onStageClick(stage) { @@ -36,16 +44,41 @@ export default { </script> <template> <div class="block-last dropdown"> - <ci-icon :status="pipeline.details.status" class="vertical-align-middle" /> + <div class="js-pipeline-info"> + <ci-icon :status="pipeline.details.status" class="vertical-align-middle" /> - <span class="font-weight-bold">{{ __('Pipeline') }}</span> - <a :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path" - >#{{ pipeline.id }}</a - > - <template v-if="hasRef"> - {{ __('from') }} - <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a> - </template> + <span class="font-weight-bold">{{ s__('Job|Pipeline') }}</span> + <gl-link :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path" + >#{{ pipeline.id }}</gl-link + > + <template v-if="hasRef"> + {{ s__('Job|for') }} + + <template v-if="isTriggeredByMergeRequest"> + <gl-link :href="pipeline.merge_request.path" class="link-commit ref-name js-mr-link" + >!{{ pipeline.merge_request.iid }}</gl-link + > + {{ s__('Job|with') }} + <gl-link + :href="pipeline.merge_request.source_branch_path" + class="link-commit ref-name js-source-branch-link" + >{{ pipeline.merge_request.source_branch }}</gl-link + > + + <template v-if="isMergeRequestPipeline"> + {{ s__('Job|into') }} + <gl-link + :href="pipeline.merge_request.target_branch_path" + class="link-commit ref-name js-target-branch-link" + >{{ pipeline.merge_request.target_branch }}</gl-link + > + </template> + </template> + <gl-link v-else :href="pipeline.ref.path" class="link-commit ref-name">{{ + pipeline.ref.name + }}</gl-link> + </template> + </div> <button type="button" diff --git a/changelogs/unreleased/nfriend-update-job-detail-view-sidebar.yml b/changelogs/unreleased/nfriend-update-job-detail-view-sidebar.yml new file mode 100644 index 00000000000..5364d29710a --- /dev/null +++ b/changelogs/unreleased/nfriend-update-job-detail-view-sidebar.yml @@ -0,0 +1,5 @@ +--- +title: Update job detail sidebar to accommodate post-merge pipeline information +merge_request: 25777 +author: +type: added diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 0dfcf62b36d..c365aea567e 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -4439,6 +4439,9 @@ msgstr "" msgid "Job|Keep" msgstr "" +msgid "Job|Pipeline" +msgstr "" + msgid "Job|Scroll to bottom" msgstr "" @@ -4457,6 +4460,15 @@ msgstr "" msgid "Job|This job is stuck because the project doesn't have any runners online assigned to it." msgstr "" +msgid "Job|for" +msgstr "" + +msgid "Job|into" +msgstr "" + +msgid "Job|with" +msgstr "" + msgid "Jul" msgstr "" diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb index 65ce872363f..224375daf71 100644 --- a/spec/features/projects/jobs_spec.rb +++ b/spec/features/projects/jobs_spec.rb @@ -2,6 +2,9 @@ require 'spec_helper' require 'tempfile' describe 'Jobs', :clean_gitlab_redis_shared_state do + include Gitlab::Routing + include ProjectForksHelper + let(:user) { create(:user) } let(:user_access_level) { :developer } let(:project) { create(:project, :repository) } @@ -121,6 +124,112 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do end end + context 'pipeline info block', :js do + it 'shows pipeline id and source branch' do + visit project_job_path(project, job) + + within '.js-pipeline-info' do + expect(page).to have_content("Pipeline ##{pipeline.id} for #{pipeline.ref}") + end + end + + context 'when pipeline is detached merge request pipeline' do + let(:merge_request) do + create(:merge_request, + :with_detached_merge_request_pipeline, + target_project: target_project, + source_project: source_project) + end + + let(:source_project) { project } + let(:target_project) { project } + let(:pipeline) { merge_request.all_pipelines.last } + let(:job) { create(:ci_build, pipeline: pipeline) } + + it 'shows merge request iid and source branch' do + visit project_job_path(project, job) + + within '.js-pipeline-info' do + expect(page).to have_content("for !#{pipeline.merge_request.iid} " \ + "with #{pipeline.merge_request.source_branch}") + expect(page).to have_link("!#{pipeline.merge_request.iid}", + href: project_merge_request_path(project, merge_request)) + expect(page).to have_link(pipeline.merge_request.source_branch, + href: project_commits_path(project, merge_request.source_branch)) + end + end + + context 'when source project is a forked project' do + let(:source_project) { fork_project(project, user, repository: true) } + let(:target_project) { project } + + it 'shows merge request iid and source branch' do + visit project_job_path(source_project, job) + + within '.js-pipeline-info' do + expect(page).to have_content("for !#{pipeline.merge_request.iid} " \ + "with #{pipeline.merge_request.source_branch}") + expect(page).to have_link("!#{pipeline.merge_request.iid}", + href: project_merge_request_path(project, merge_request)) + expect(page).to have_link(pipeline.merge_request.source_branch, + href: project_commits_path(source_project, merge_request.source_branch)) + end + end + end + end + + context 'when pipeline is merge request pipeline' do + let(:merge_request) do + create(:merge_request, + :with_merge_request_pipeline, + target_project: target_project, + source_project: source_project) + end + + let(:source_project) { project } + let(:target_project) { project } + let(:pipeline) { merge_request.all_pipelines.last } + let(:job) { create(:ci_build, pipeline: pipeline) } + + it 'shows merge request iid and source branch' do + visit project_job_path(project, job) + + within '.js-pipeline-info' do + expect(page).to have_content("for !#{pipeline.merge_request.iid} " \ + "with #{pipeline.merge_request.source_branch} " \ + "into #{pipeline.merge_request.target_branch}") + expect(page).to have_link("!#{pipeline.merge_request.iid}", + href: project_merge_request_path(project, merge_request)) + expect(page).to have_link(pipeline.merge_request.source_branch, + href: project_commits_path(project, merge_request.source_branch)) + expect(page).to have_link(pipeline.merge_request.target_branch, + href: project_commits_path(project, merge_request.target_branch)) + end + end + + context 'when source project is a forked project' do + let(:source_project) { fork_project(project, user, repository: true) } + let(:target_project) { project } + + it 'shows merge request iid and source branch' do + visit project_job_path(source_project, job) + + within '.js-pipeline-info' do + expect(page).to have_content("for !#{pipeline.merge_request.iid} " \ + "with #{pipeline.merge_request.source_branch} " \ + "into #{pipeline.merge_request.target_branch}") + expect(page).to have_link("!#{pipeline.merge_request.iid}", + href: project_merge_request_path(project, merge_request)) + expect(page).to have_link(pipeline.merge_request.source_branch, + href: project_commits_path(source_project, merge_request.source_branch)) + expect(page).to have_link(pipeline.merge_request.target_branch, + href: project_commits_path(project, merge_request.target_branch)) + end + end + end + end + end + context 'sidebar', :js do let(:job) { create(:ci_build, :success, :trace_live, pipeline: pipeline, name: '<img src=x onerror=alert(document.domain)>') } diff --git a/spec/javascripts/jobs/components/stages_dropdown_spec.js b/spec/javascripts/jobs/components/stages_dropdown_spec.js index 9c731ae2f68..eccb4e13d67 100644 --- a/spec/javascripts/jobs/components/stages_dropdown_spec.js +++ b/spec/javascripts/jobs/components/stages_dropdown_spec.js @@ -1,59 +1,167 @@ import Vue from 'vue'; import component from '~/jobs/components/stages_dropdown.vue'; +import { trimText } from 'spec/helpers/vue_component_helper'; import mountComponent from '../../helpers/vue_mount_component_helper'; describe('Stages Dropdown', () => { const Component = Vue.extend(component); let vm; - beforeEach(() => { - vm = mountComponent(Component, { - pipeline: { - id: 28029444, - details: { - status: { - details_path: '/gitlab-org/gitlab-ce/pipelines/28029444', - group: 'success', - has_details: true, - icon: 'status_success', - label: 'passed', - text: 'passed', - tooltip: 'passed', - }, - }, - path: 'pipeline/28029444', + const mockPipelineData = { + id: 28029444, + details: { + status: { + details_path: '/gitlab-org/gitlab-ce/pipelines/28029444', + group: 'success', + has_details: true, + icon: 'status_success', + label: 'passed', + text: 'passed', + tooltip: 'passed', }, - stages: [ - { - name: 'build', - }, - { - name: 'test', - }, - ], - selectedStage: 'deploy', + }, + path: 'pipeline/28029444', + flags: { + merge_request_pipeline: true, + detached_merge_request_pipeline: false, + }, + merge_request: { + iid: 1234, + path: '/root/detached-merge-request-pipelines/merge_requests/1', + title: 'Update README.md', + source_branch: 'feature-1234', + source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1234', + target_branch: 'master', + target_branch_path: '/root/detached-merge-request-pipelines/branches/master', + }, + ref: { + name: 'test-branch', + }, + }; + + describe('without a merge request pipeline', () => { + let pipeline; + + beforeEach(() => { + pipeline = JSON.parse(JSON.stringify(mockPipelineData)); + delete pipeline.merge_request; + delete pipeline.flags.merge_request_pipeline; + delete pipeline.flags.detached_merge_request_pipeline; + + vm = mountComponent(Component, { + pipeline, + stages: [{ name: 'build' }, { name: 'test' }], + selectedStage: 'deploy', + }); }); - }); - afterEach(() => { - vm.$destroy(); - }); + afterEach(() => { + vm.$destroy(); + }); - it('renders pipeline status', () => { - expect(vm.$el.querySelector('.js-ci-status-icon-success')).not.toBeNull(); - }); + it('renders pipeline status', () => { + expect(vm.$el.querySelector('.js-ci-status-icon-success')).not.toBeNull(); + }); + + it('renders pipeline link', () => { + expect(vm.$el.querySelector('.js-pipeline-path').getAttribute('href')).toEqual( + 'pipeline/28029444', + ); + }); + + it('renders dropdown with stages', () => { + expect(vm.$el.querySelector('.dropdown .js-stage-item').textContent).toContain('build'); + }); + + it('rendes selected stage', () => { + expect(vm.$el.querySelector('.dropdown .js-selected-stage').textContent).toContain('deploy'); + }); - it('renders pipeline link', () => { - expect(vm.$el.querySelector('.js-pipeline-path').getAttribute('href')).toEqual( - 'pipeline/28029444', - ); + it(`renders the pipeline info text like "Pipeline #123 for source_branch"`, () => { + const expected = `Pipeline #${pipeline.id} for ${pipeline.ref.name}`; + const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText); + + expect(actual).toBe(expected); + }); }); - it('renders dropdown with stages', () => { - expect(vm.$el.querySelector('.dropdown .js-stage-item').textContent).toContain('build'); + describe('with an "attached" merge request pipeline', () => { + let pipeline; + + beforeEach(() => { + pipeline = JSON.parse(JSON.stringify(mockPipelineData)); + pipeline.flags.merge_request_pipeline = true; + pipeline.flags.detached_merge_request_pipeline = false; + + vm = mountComponent(Component, { + pipeline, + stages: [], + selectedStage: 'deploy', + }); + }); + + it(`renders the pipeline info text like "Pipeline #123 for !456 with source_branch into target_branch"`, () => { + const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${ + pipeline.merge_request.source_branch + } into ${pipeline.merge_request.target_branch}`; + const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText); + + expect(actual).toBe(expected); + }); + + it(`renders the correct merge request link`, () => { + const actual = vm.$el.querySelector('.js-mr-link').href; + + expect(actual).toContain(pipeline.merge_request.path); + }); + + it(`renders the correct source branch link`, () => { + const actual = vm.$el.querySelector('.js-source-branch-link').href; + + expect(actual).toContain(pipeline.merge_request.source_branch_path); + }); + + it(`renders the correct target branch link`, () => { + const actual = vm.$el.querySelector('.js-target-branch-link').href; + + expect(actual).toContain(pipeline.merge_request.target_branch_path); + }); }); - it('rendes selected stage', () => { - expect(vm.$el.querySelector('.dropdown .js-selected-stage').textContent).toContain('deploy'); + describe('with a detached merge request pipeline', () => { + let pipeline; + + beforeEach(() => { + pipeline = JSON.parse(JSON.stringify(mockPipelineData)); + pipeline.flags.merge_request_pipeline = false; + pipeline.flags.detached_merge_request_pipeline = true; + + vm = mountComponent(Component, { + pipeline, + stages: [], + selectedStage: 'deploy', + }); + }); + + it(`renders the pipeline info like "Pipeline #123 for !456 with source_branch"`, () => { + const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${ + pipeline.merge_request.source_branch + }`; + const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText); + + expect(actual).toBe(expected); + }); + + it(`renders the correct merge request link`, () => { + const actual = vm.$el.querySelector('.js-mr-link').href; + + expect(actual).toContain(pipeline.merge_request.path); + }); + + it(`renders the correct source branch link`, () => { + const actual = vm.$el.querySelector('.js-source-branch-link').href; + + expect(actual).toContain(pipeline.merge_request.source_branch_path); + }); }); }); |