Make MR pipeline widget text more descriptive (CE)
This change updates the text of the pipeline widget that appears on the merge request page. The text has been made more consistent between different types of pipelines; this makes the front-end implementation simpler and more maintainable. In addition, the type of pipeline is (i.e. regular pipeline, merge request pipeline, detached pipeline) included in the text, making this type more obvious to the end user. Some information has been removed from the widget as part of this change; however, any information that was removed already appears elsewhere on the merge request page.
This commit is contained in:
parent
1ba9f029e8
commit
11f1305ec7
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
/* eslint-disable vue/require-default-prop */
|
||||
import { GlTooltipDirective, GlLink } from '@gitlab/ui';
|
||||
import { sprintf, __ } from '~/locale';
|
||||
import { sprintf, s__ } from '~/locale';
|
||||
import PipelineStage from '~/pipelines/components/stage.vue';
|
||||
import CiIcon from '~/vue_shared/components/ci_icon.vue';
|
||||
import Icon from '~/vue_shared/components/icon.vue';
|
||||
|
@ -73,8 +73,8 @@ export default {
|
|||
},
|
||||
errorText() {
|
||||
return sprintf(
|
||||
__(
|
||||
'Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}',
|
||||
s__(
|
||||
'Pipeline|Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}',
|
||||
),
|
||||
{
|
||||
linkStart: `<a href="${this.troubleshootingDocsPath}">`,
|
||||
|
@ -89,6 +89,9 @@ export default {
|
|||
isMergeRequestPipeline() {
|
||||
return Boolean(this.pipeline.flags && this.pipeline.flags.merge_request_pipeline);
|
||||
},
|
||||
showSourceBranch() {
|
||||
return Boolean(this.pipeline.ref.branch);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -109,7 +112,7 @@ export default {
|
|||
<div class="ci-widget-content">
|
||||
<div class="media-body">
|
||||
<div class="font-weight-bold js-pipeline-info-container">
|
||||
{{ s__('Pipeline|Pipeline') }}
|
||||
{{ pipeline.details.name }}
|
||||
<gl-link :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number"
|
||||
>#{{ pipeline.id }}</gl-link
|
||||
>
|
||||
|
@ -121,48 +124,13 @@ export default {
|
|||
class="commit-sha js-commit-link font-weight-normal"
|
||||
>{{ pipeline.commit.short_id }}</gl-link
|
||||
>
|
||||
</template>
|
||||
<template v-if="showSourceBranch">
|
||||
{{ s__('Pipeline|on') }}
|
||||
<template v-if="isTriggeredByMergeRequest">
|
||||
<gl-link
|
||||
v-gl-tooltip
|
||||
:href="pipeline.merge_request.path"
|
||||
:title="pipeline.merge_request.title"
|
||||
class="font-weight-normal"
|
||||
>!{{ pipeline.merge_request.iid }}</gl-link
|
||||
>
|
||||
{{ s__('Pipeline|with') }}
|
||||
<tooltip-on-truncate
|
||||
:title="pipeline.merge_request.source_branch"
|
||||
truncate-target="child"
|
||||
class="label-branch label-truncate"
|
||||
>
|
||||
<gl-link
|
||||
:href="pipeline.merge_request.source_branch_path"
|
||||
class="font-weight-normal"
|
||||
>{{ pipeline.merge_request.source_branch }}</gl-link
|
||||
>
|
||||
</tooltip-on-truncate>
|
||||
|
||||
<template v-if="isMergeRequestPipeline">
|
||||
{{ s__('Pipeline|into') }}
|
||||
<tooltip-on-truncate
|
||||
:title="pipeline.merge_request.target_branch"
|
||||
truncate-target="child"
|
||||
class="label-branch label-truncate"
|
||||
>
|
||||
<gl-link
|
||||
:href="pipeline.merge_request.target_branch_path"
|
||||
class="font-weight-normal"
|
||||
>{{ pipeline.merge_request.target_branch }}</gl-link
|
||||
>
|
||||
</tooltip-on-truncate>
|
||||
</template>
|
||||
</template>
|
||||
<tooltip-on-truncate
|
||||
v-else
|
||||
:title="sourceBranch"
|
||||
truncate-target="child"
|
||||
class="label-branch label-truncate"
|
||||
class="label-branch label-truncate font-weight-normal"
|
||||
v-html="sourceBranchLink"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -835,12 +835,12 @@ module Ci
|
|||
return unless merge_request_event?
|
||||
|
||||
strong_memoize(:merge_request_event_type) do
|
||||
if detached_merge_request_pipeline?
|
||||
:detached
|
||||
if merge_train_pipeline?
|
||||
:merge_train
|
||||
elsif merge_request_pipeline?
|
||||
:merged_result
|
||||
elsif merge_train_pipeline?
|
||||
:merge_train
|
||||
elsif detached_merge_request_pipeline?
|
||||
:detached
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Make MR pipeline widget text more descriptive
|
||||
merge_request: 32025
|
||||
author:
|
||||
type: changed
|
|
@ -3443,9 +3443,6 @@ msgstr ""
|
|||
msgid "Could not remove the trigger."
|
||||
msgstr ""
|
||||
|
||||
msgid "Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}"
|
||||
msgstr ""
|
||||
|
||||
msgid "Could not revoke impersonation token %{token_name}."
|
||||
msgstr ""
|
||||
|
||||
|
@ -5439,7 +5436,6 @@ msgstr ""
|
|||
msgid "Go to file (MRs only)"
|
||||
msgstr ""
|
||||
|
||||
|
||||
msgid "Go to file permalink (while viewing a file)"
|
||||
msgstr ""
|
||||
|
||||
|
@ -8234,6 +8230,9 @@ msgstr ""
|
|||
msgid "Pipeline|Commit"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|Coverage"
|
||||
msgstr ""
|
||||
|
||||
|
@ -8300,18 +8299,12 @@ msgstr ""
|
|||
msgid "Pipeline|for"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|into"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|on"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|success"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|with"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|with stage"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
@ -189,26 +189,20 @@ describe 'Merge request > User sees merge widget', :js do
|
|||
visit project_merge_request_path(project, merge_request)
|
||||
end
|
||||
|
||||
it 'shows head pipeline information' do
|
||||
within '.ci-widget-content' do
|
||||
expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
|
||||
"for #{pipeline.short_sha} " \
|
||||
"on #{merge_request.to_reference} " \
|
||||
"with #{merge_request.source_branch}")
|
||||
shared_examples 'pipeline widget' do
|
||||
it 'shows head pipeline information' do
|
||||
within '.ci-widget-content' do
|
||||
expect(page).to have_content("Detached merge request pipeline ##{pipeline.id} pending for #{pipeline.short_sha}")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
include_examples 'pipeline widget'
|
||||
|
||||
context 'when source project is a forked project' do
|
||||
let(:source_project) { fork_project(project, user, repository: true) }
|
||||
|
||||
it 'shows head pipeline information' do
|
||||
within '.ci-widget-content' do
|
||||
expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
|
||||
"for #{pipeline.short_sha} " \
|
||||
"on #{merge_request.to_reference} " \
|
||||
"with #{merge_request.source_branch}")
|
||||
end
|
||||
end
|
||||
include_examples 'pipeline widget'
|
||||
end
|
||||
end
|
||||
|
||||
|
@ -234,29 +228,21 @@ describe 'Merge request > User sees merge widget', :js do
|
|||
visit project_merge_request_path(project, merge_request)
|
||||
end
|
||||
|
||||
it 'shows head pipeline information' do
|
||||
within '.ci-widget-content' do
|
||||
expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
|
||||
"for #{pipeline.short_sha} " \
|
||||
"on #{merge_request.to_reference} " \
|
||||
"with #{merge_request.source_branch} " \
|
||||
"into #{merge_request.target_branch}")
|
||||
shared_examples 'pipeline widget' do
|
||||
it 'shows head pipeline information' do
|
||||
within '.ci-widget-content' do
|
||||
expect(page).to have_content("Merged result pipeline ##{pipeline.id} pending for #{pipeline.short_sha}")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
include_examples 'pipeline widget'
|
||||
|
||||
context 'when source project is a forked project' do
|
||||
let(:source_project) { fork_project(project, user, repository: true) }
|
||||
let(:merge_sha) { source_project.commit.sha }
|
||||
|
||||
it 'shows head pipeline information' do
|
||||
within '.ci-widget-content' do
|
||||
expect(page).to have_content("Pipeline ##{pipeline.id} pending " \
|
||||
"for #{pipeline.short_sha} " \
|
||||
"on #{merge_request.to_reference} " \
|
||||
"with #{merge_request.source_branch} " \
|
||||
"into #{merge_request.target_branch}")
|
||||
end
|
||||
end
|
||||
include_examples 'pipeline widget'
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
@ -69,7 +69,6 @@ describe('MRWidgetPipeline', () => {
|
|||
vm = mountComponent(Component, {
|
||||
pipeline: mockData.pipeline,
|
||||
hasCi: true,
|
||||
ciStatus: null,
|
||||
troubleshootingDocsPath: 'help',
|
||||
});
|
||||
|
||||
|
@ -208,71 +207,66 @@ describe('MRWidgetPipeline', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('without pipeline.merge_request', () => {
|
||||
it('should render info that includes the commit and branch details', () => {
|
||||
const mockCopy = JSON.parse(JSON.stringify(mockData));
|
||||
delete mockCopy.pipeline.merge_request;
|
||||
const { pipeline } = mockCopy;
|
||||
describe('for each type of pipeline', () => {
|
||||
let pipeline;
|
||||
|
||||
vm = mountComponent(Component, {
|
||||
pipeline,
|
||||
hasCi: true,
|
||||
ciStatus: 'success',
|
||||
troubleshootingDocsPath: 'help',
|
||||
sourceBranchLink: mockCopy.source_branch_link,
|
||||
});
|
||||
beforeEach(() => {
|
||||
({ pipeline } = JSON.parse(JSON.stringify(mockData)));
|
||||
|
||||
const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockCopy.source_branch_link}`;
|
||||
|
||||
const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
|
||||
|
||||
expect(actual).toBe(expected);
|
||||
pipeline.details.name = 'Pipeline';
|
||||
pipeline.merge_request_event_type = undefined;
|
||||
pipeline.ref.tag = false;
|
||||
pipeline.ref.branch = false;
|
||||
});
|
||||
});
|
||||
|
||||
describe('with pipeline.merge_request and flags.merge_request_pipeline', () => {
|
||||
it('should render info that includes the commit, MR, source branch, and target branch details', () => {
|
||||
const mockCopy = JSON.parse(JSON.stringify(mockData));
|
||||
const { pipeline } = mockCopy;
|
||||
pipeline.flags.merge_request_pipeline = true;
|
||||
pipeline.flags.detached_merge_request_pipeline = false;
|
||||
|
||||
const factory = () => {
|
||||
vm = mountComponent(Component, {
|
||||
pipeline,
|
||||
hasCi: true,
|
||||
ciStatus: 'success',
|
||||
troubleshootingDocsPath: 'help',
|
||||
sourceBranchLink: mockCopy.source_branch_link,
|
||||
sourceBranchLink: mockData.source_branch_link,
|
||||
});
|
||||
};
|
||||
|
||||
const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch} into ${pipeline.merge_request.target_branch}`;
|
||||
describe('for a branch pipeline', () => {
|
||||
it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
|
||||
pipeline.ref.branch = true;
|
||||
|
||||
const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
|
||||
factory();
|
||||
|
||||
expect(actual).toBe(expected);
|
||||
const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockData.source_branch_link}`;
|
||||
const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
|
||||
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('with pipeline.merge_request and flags.detached_merge_request_pipeline', () => {
|
||||
it('should render info that includes the commit, MR, and source branch details', () => {
|
||||
const mockCopy = JSON.parse(JSON.stringify(mockData));
|
||||
const { pipeline } = mockCopy;
|
||||
pipeline.flags.merge_request_pipeline = false;
|
||||
pipeline.flags.detached_merge_request_pipeline = true;
|
||||
describe('for a tag pipeline', () => {
|
||||
it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
|
||||
pipeline.ref.tag = true;
|
||||
|
||||
vm = mountComponent(Component, {
|
||||
pipeline,
|
||||
hasCi: true,
|
||||
ciStatus: 'success',
|
||||
troubleshootingDocsPath: 'help',
|
||||
sourceBranchLink: mockCopy.source_branch_link,
|
||||
factory();
|
||||
|
||||
const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
|
||||
const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
|
||||
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch}`;
|
||||
describe('for a detached merge request pipeline', () => {
|
||||
it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => {
|
||||
pipeline.details.name = 'Detached merge request pipeline';
|
||||
pipeline.merge_request_event_type = 'detached';
|
||||
|
||||
const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
|
||||
factory();
|
||||
|
||||
expect(actual).toBe(expected);
|
||||
const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
|
||||
const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
|
||||
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -259,6 +259,8 @@ export const mockStore = {
|
|||
tooltip: 'passed',
|
||||
},
|
||||
},
|
||||
flags: {},
|
||||
ref: {},
|
||||
},
|
||||
mergePipeline: {
|
||||
id: 1,
|
||||
|
@ -276,6 +278,8 @@ export const mockStore = {
|
|||
tooltip: 'passed',
|
||||
},
|
||||
},
|
||||
flags: {},
|
||||
ref: {},
|
||||
},
|
||||
targetBranch: 'target-branch',
|
||||
sourceBranch: 'source-branch',
|
||||
|
|
Loading…
Reference in New Issue