Skip to content

G
gitlab-ce
Commit 3a087a00 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch '33095-mr-widget-ui' into 'master' 

Merge Request widget Improvements

Closes #33095

See merge request !12601
parents 03b816f3 bce029a2
Hide whitespace changes
Inline Side-by-side
Showing with 904 additions and 898 deletions
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js
View file @ 3a087a00
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
name: 'MRWidgetAuthor', name: 'MRWidgetAuthor',
props: { props: {
...@@ -5,11 +7,14 @@ export default { ...@@ -5,11 +7,14 @@ export default {
showAuthorName: { type: Boolean, required: false, default: true }, showAuthorName: { type: Boolean, required: false, default: true },
showAuthorTooltip: { type: Boolean, required: false, default: false }, showAuthorTooltip: { type: Boolean, required: false, default: false },
}, },
directives: {
tooltip,
},
template: ` template: `
<a <a
:href="author.webUrl || author.web_url" :href="author.webUrl || author.web_url"
class="author-link" class="author-link inline"
:class="{ 'has-tooltip': showAuthorTooltip }" :v-tooltip="showAuthorTooltip"
:title="author.name"> :title="author.name">
<img <img
:src="author.avatarUrl || author.avatar_url" :src="author.avatarUrl || author.avatar_url"
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
View file @ 3a087a00
/* global Flash */ /* global Flash */
import '~/lib/utils/datetime_utility'; import '~/lib/utils/datetime_utility';
import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
import MemoryUsage from './mr_widget_memory_usage'; import MemoryUsage from './mr_widget_memory_usage';
import StatusIcon from './mr_widget_status_icon';
import MRWidgetService from '../services/mr_widget_service'; import MRWidgetService from '../services/mr_widget_service';
export default { export default {
...@@ -13,11 +13,7 @@ export default { ...@@ -13,11 +13,7 @@ export default {
}, },
components: { components: {
'mr-widget-memory-usage': MemoryUsage, 'mr-widget-memory-usage': MemoryUsage,
}, 'status-icon': StatusIcon,
computed: {
svg() {
return statusIconEntityMap.icon_status_success;
},
}, },
methods: { methods: {
formatDate(date) { formatDate(date) {
...@@ -51,51 +47,51 @@ export default { ...@@ -51,51 +47,51 @@ export default {
}, },
}, },
template: ` template: `
<div class="mr-widget-heading"> <div class="mr-widget-heading deploy-heading">
<div v-for="deployment in mr.deployments"> <div v-for="deployment in mr.deployments">
<div class="ci-widget"> <div class="ci-widget media">
<div class="ci-status-icon ci-status-icon-success"> <div class="ci-status-icon ci-status-icon-success">
<span class="js-icon-link icon-link"> <span class="js-icon-link icon-link">
<span class="ci-status-icon" <status-icon status="success" />
v-html="svg"
aria-hidden="true"></span>
</span> </span>
</div> </div>
<span> <div class="media-body space-children">
<span <span>
v-if="hasDeploymentMeta(deployment)"> <span
Deployed to v-if="hasDeploymentMeta(deployment)">
</span> Deployed to
<a </span>
v-if="hasDeploymentMeta(deployment)" <a
:href="deployment.url" v-if="hasDeploymentMeta(deployment)"
target="_blank" :href="deployment.url"
rel="noopener noreferrer nofollow" target="_blank"
class="js-deploy-meta"> rel="noopener noreferrer nofollow"
{{deployment.name}} class="js-deploy-meta inline">
</a> {{deployment.name}}
<span </a>
v-if="hasExternalUrls(deployment)"> <span
on v-if="hasExternalUrls(deployment)">
</span> on
<a </span>
v-if="hasExternalUrls(deployment)" <a
:href="deployment.external_url" v-if="hasExternalUrls(deployment)"
target="_blank" :href="deployment.external_url"
rel="noopener noreferrer nofollow" target="_blank"
class="js-deploy-url"> rel="noopener noreferrer nofollow"
<i class="js-deploy-url inline">
class="fa fa-external-link" <i
aria-hidden="true" /> class="fa fa-external-link"
{{deployment.external_url_formatted}} aria-hidden="true" />
</a> {{deployment.external_url_formatted}}
<span </a>
v-if="hasDeploymentTime(deployment)" <span
:data-title="deployment.deployed_at_formatted" v-if="hasDeploymentTime(deployment)"
class="js-deploy-time" :data-title="deployment.deployed_at_formatted"
data-toggle="tooltip" class="js-deploy-time"
data-placement="top"> data-toggle="tooltip"
{{formatDate(deployment.deployed_at)}} data-placement="top">
{{formatDate(deployment.deployed_at)}}
</span>
</span> </span>
<button <button
type="button" type="button"
...@@ -104,13 +100,13 @@ export default { ...@@ -104,13 +100,13 @@ export default {
class="btn btn-default btn-xs"> class="btn btn-default btn-xs">
Stop environment Stop environment
</button> </button>
</span> <mr-widget-memory-usage
v-if="deployment.metrics_url"
:metrics-url="deployment.metrics_url"
:metrics-monitoring-url="deployment.metrics_monitoring_url"
/>
</div>
</div> </div>
<mr-widget-memory-usage
v-if="deployment.metrics_url"
:metrics-url="deployment.metrics_url"
:metrics-monitoring-url="deployment.metrics_monitoring_url"
/>
</div> </div>
</div> </div>
`, `,
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
View file @ 3a087a00
import tooltip from '../../vue_shared/directives/tooltip';
import '../../lib/utils/text_utility'; import '../../lib/utils/text_utility';
export default { export default {
...@@ -5,6 +6,9 @@ export default { ...@@ -5,6 +6,9 @@ export default {
props: { props: {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
}, },
directives: {
tooltip,
},
computed: { computed: {
shouldShowCommitsBehindText() { shouldShowCommitsBehindText() {
return this.mr.divergedCommitsCount > 0; return this.mr.divergedCommitsCount > 0;
...@@ -29,18 +33,51 @@ export default { ...@@ -29,18 +33,51 @@ export default {
}, },
template: ` template: `
<div class="mr-source-target"> <div class="mr-source-target">
<div <div class="normal">
v-if="mr.isOpen" <strong>
class="pull-right"> Request to merge
<span
class="label-branch"
:class="{'label-truncated': isBranchTitleLong(mr.sourceBranch)}"
:title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
data-placement="bottom"
:v-tooltip="isBranchTitleLong(mr.sourceBranch)"
v-html="mr.sourceBranchLink"></span>
<button
v-tooltip
class="btn btn-transparent btn-clipboard"
data-title="Copy branch name to clipboard"
:data-clipboard-text="branchNameClipboardData">
<i
aria-hidden="true"
class="fa fa-clipboard"></i>
</button>
into
<span
class="label-branch"
:v-tooltip="isBranchTitleLong(mr.sourceBranch)"
:class="{'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch)}"
:title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
data-placement="bottom">
<a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
</span>
</strong>
<span
v-if="shouldShowCommitsBehindText"
class="diverged-commits-count">
(<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
</span>
</div>
<div v-if="mr.isOpen">
<a <a
href="#modal_merge_info" href="#modal_merge_info"
data-toggle="modal" data-toggle="modal"
class="btn inline btn-grouped btn-sm"> class="btn btn-small inline">
Check out branch Check out branch
</a> </a>
<span class="dropdown inline prepend-left-5"> <span class="dropdown inline prepend-left-10">
<a <a
class="btn btn-sm dropdown-toggle" class="btn btn-xs dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
aria-label="Download as" aria-label="Download as"
role="button"> role="button">
...@@ -69,38 +106,6 @@ export default { ...@@ -69,38 +106,6 @@ export default {
</ul> </ul>
</span> </span>
</div> </div>
<div class="normal">
<strong>
Request to merge
<span
class="label-branch"
:class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
:title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
data-placement="bottom"
v-html="mr.sourceBranchLink"></span>
<button
class="btn btn-transparent btn-clipboard has-tooltip"
data-title="Copy branch name to clipboard"
:data-clipboard-text="branchNameClipboardData">
<i
aria-hidden="true"
class="fa fa-clipboard"></i>
</button>
into
<span
class="label-branch"
:class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
:title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
data-placement="bottom">
<a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
</span>
</strong>
<span
v-if="shouldShowCommitsBehindText"
class="diverged-commits-count">
(<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
</span>
</div>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
View file @ 3a087a00
...@@ -120,13 +120,12 @@ export default { ...@@ -120,13 +120,12 @@ export default {
}, },
template: ` template: `
<div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage"> <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
<div class="legend"></div>
<p <p
v-if="shouldShowLoading" v-if="shouldShowLoading"
class="usage-info js-usage-info usage-info-loading"> class="usage-info js-usage-info usage-info-loading">
<i <i
class="fa fa-spinner fa-spin usage-info-load-spinner" class="fa fa-spinner fa-spin usage-info-load-spinner"
aria-hidden="true" />Loading deployment statistics. aria-hidden="true" />Loading deployment statistics
</p> </p>
<p <p
v-if="shouldShowMemoryGraph" v-if="shouldShowMemoryGraph"
...@@ -136,12 +135,12 @@ export default { ...@@ -136,12 +135,12 @@ export default {
<p <p
v-if="shouldShowLoadFailure" v-if="shouldShowLoadFailure"
class="usage-info js-usage-info usage-info-failed"> class="usage-info js-usage-info usage-info-failed">
Failed to load deployment statistics. Failed to load deployment statistics
</p> </p>
<p <p
v-if="shouldShowMetricsUnavailable" v-if="shouldShowMetricsUnavailable"
class="usage-info js-usage-info usage-info-unavailable"> class="usage-info js-usage-info usage-info-unavailable">
Deployment statistics are not available currently. Deployment statistics are not available currently
</p> </p>
<mr-memory-graph <mr-memory-graph
v-if="shouldShowMemoryGraph" v-if="shouldShowMemoryGraph"
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
View file @ 3a087a00
...@@ -16,7 +16,7 @@ export default { ...@@ -16,7 +16,7 @@ export default {
<a <a
data-toggle="modal" data-toggle="modal"
href="#modal_merge_info"> href="#modal_merge_info">
command line. command line
</a> </a>
</section> </section>
`, `,
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
View file @ 3a087a00
...@@ -29,58 +29,55 @@ export default { ...@@ -29,58 +29,55 @@ export default {
}, },
template: ` template: `
<div class="mr-widget-heading"> <div class="mr-widget-heading">
<div class="ci-widget"> <div class="ci-widget media">
<template v-if="hasCIError"> <template v-if="hasCIError">
<div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error"> <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
<span class="js-icon-link icon-link"> <span
<span v-html="svg"
v-html="svg" aria-hidden="true"></span>
aria-hidden="true"></span> </div>
</span> <div class="media-body">
Could not connect to the CI server. Please check your settings and try again
</div> </div>
<span>Could not connect to the CI server. Please check your settings and try again.</span>
</template> </template>
<template v-else> <template v-else>
<div> <div class="ci-status-icon append-right-10">
<a <a
class="icon-link" class="icon-link"
:href="this.status.details_path"> :href="this.status.details_path">
<ci-icon :status="status" /> <ci-icon :status="status" />
</a> </a>
</div> </div>
<span> <div class="media-body">
Pipeline <span>
<a Pipeline
:href="mr.pipeline.path" <a
class="pipeline-id">#{{mr.pipeline.id}}</a> :href="mr.pipeline.path"
{{mr.pipeline.details.status.label}} class="pipeline-id">#{{mr.pipeline.id}}</a>
</span> </span>
<span <span class="mr-widget-pipeline-graph">
v-if="mr.pipeline.details.stages.length > 0"> <span class="stage-cell">
with {{stageText}} <div
</span> v-if="mr.pipeline.details.stages.length > 0"
<div class="mr-widget-pipeline-graph"> v-for="stage in mr.pipeline.details.stages"
<div class="stage-cell"> class="stage-container dropdown js-mini-pipeline-graph">
<div <pipeline-stage :stage="stage" />
v-if="mr.pipeline.details.stages.length > 0" </div>
v-for="stage in mr.pipeline.details.stages" </span>
class="stage-container dropdown js-mini-pipeline-graph"> </span>
<pipeline-stage :stage="stage" /> <span>
</div> {{mr.pipeline.details.status.label}} for
</div> <a
:href="mr.pipeline.commit.commit_path"
class="commit-sha js-commit-link">
{{mr.pipeline.commit.short_id}}</a>.
</span>
<span
v-if="mr.pipeline.coverage"
class="js-mr-coverage">
Coverage {{mr.pipeline.coverage}}%
</span>
</div> </div>
<span>
for
<a
:href="mr.pipeline.commit.commit_path"
class="commit-sha js-commit-link">
{{mr.pipeline.commit.short_id}}</a>.
</span>
<span
v-if="mr.pipeline.coverage"
class="js-mr-coverage">
Coverage {{mr.pipeline.coverage}}%.
</span>
</template> </template>
</div> </div>
</div> </div>
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
View file @ 3a087a00
...@@ -2,37 +2,32 @@ export default { ...@@ -2,37 +2,32 @@ export default {
name: 'MRWidgetRelatedLinks', name: 'MRWidgetRelatedLinks',
props: { props: {
relatedLinks: { type: Object, required: true }, relatedLinks: { type: Object, required: true },
state: { type: String, required: false },
}, },
computed: { computed: {
hasLinks() { hasLinks() {
const { closing, mentioned, assignToMe } = this.relatedLinks; const { closing, mentioned, assignToMe } = this.relatedLinks;
return closing || mentioned || assignToMe; return closing || mentioned || assignToMe;
}, },
}, closesText() {
methods: { if (this.state === 'merged') {
hasMultipleIssues(text) { return 'Closed';
return !text ? false : text.match(/<\/a> and <a/); }
}, if (this.state === 'closed') {
issueLabel(field) { return 'Did not close';
return this.hasMultipleIssues(this.relatedLinks[field]) ? 'issues' : 'issue'; }
}, return 'Closes';
verbLabel(field) {
return this.hasMultipleIssues(this.relatedLinks[field]) ? 'are' : 'is';
}, },
}, },
template: ` template: `
<section <section
v-if="hasLinks" v-if="hasLinks"
class="mr-info-list mr-links"> class="mr-info-list mr-links">
<div class="legend"></div>
<p v-if="relatedLinks.closing"> <p v-if="relatedLinks.closing">
Closes {{issueLabel('closing')}} {{closesText}} <span v-html="relatedLinks.closing"></span>
<span v-html="relatedLinks.closing"></span>.
</p> </p>
<p v-if="relatedLinks.mentioned"> <p v-if="relatedLinks.mentioned">
<span class="capitalize">{{issueLabel('mentioned')}}</span> Mentions <span v-html="relatedLinks.mentioned"></span>
<span v-html="relatedLinks.mentioned"></span>
{{verbLabel('mentioned')}} mentioned but will not be closed.
</p> </p>
<p v-if="relatedLinks.assignToMe"> <p v-if="relatedLinks.assignToMe">
<span v-html="relatedLinks.assignToMe"></span> <span v-html="relatedLinks.assignToMe"></span>
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js 0 → 100644
View file @ 3a087a00
import ciIcon from '../../vue_shared/components/ci_icon.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
props: {
status: { type: String, required: true },
showDisabledButton: { type: Boolean, required: false },
},
components: {
ciIcon,
loadingIcon,
},
computed: {
statusObj() {
return {
group: this.status,
icon: `icon_status_${this.status}`,
};
},
},
template: `
<div class="space-children flex-container-block append-right-10">
<div v-if="status === 'loading'" class="mr-widget-icon">
<loading-icon />
</div>
<ci-icon v-else :status="statusObj" />
<button
v-if="showDisabledButton"
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
</div>
`,
};
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetArchived', name: 'MRWidgetArchived',
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <div class="space-children">
type="button" <status-icon status="failed" />
class="btn btn-success btn-small" <button
disabled="true"> type="button"
Merge class="btn btn-success btn-small"
</button> disabled="true">
<span class="bold"> Merge
This project is archived, write access has been disabled. </button>
</span> </div>
<div class="media-body">
<span class="bold">
This project is archived, write access has been disabled
</span>
</div>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
View file @ 3a087a00
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetAutoMergeFailed', name: 'MRWidgetAutoMergeFailed',
...@@ -10,6 +11,9 @@ export default { ...@@ -10,6 +11,9 @@ export default {
isRefreshing: false, isRefreshing: false,
}; };
}, },
components: {
statusIcon,
},
methods: { methods: {
refreshWidget() { refreshWidget() {
this.isRefreshing = true; this.isRefreshing = true;
...@@ -19,18 +23,16 @@ export default { ...@@ -19,18 +23,16 @@ export default {
}, },
}, },
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" />
class="btn btn-success btn-small" <div class="media-body space-children">
disabled="true" <span class="bold">
type="button"> <template v-if="mr.mergeError">{{mr.mergeError}}.</template>
Merge This merge request failed to be merged automatically
</button> </span>
<span class="bold danger">
This merge request failed to be merged automatically.
<button <button
@click="refreshWidget" @click="refreshWidget"
:class="{ disabled: isRefreshing }" :disabled="isRefreshing"
type="button" type="button"
class="btn btn-xs btn-default"> class="btn btn-xs btn-default">
<i <i
...@@ -39,9 +41,6 @@ export default { ...@@ -39,9 +41,6 @@ export default {
aria-hidden="true" /> aria-hidden="true" />
Refresh Refresh
</button> </button>
</span>
<div class="merge-error-text danger bold">
{{mr.mergeError}}
</div> </div>
</div> </div>
`, `,
......
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetChecking', name: 'MRWidgetChecking',
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="loading" showDisabledButton />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold">
disabled="true"> Checking ability to merge automatically
Merge </span>
</button> </div>
<span class="bold">
Checking ability to merge automatically.
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
</span>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
View file @ 3a087a00
import mrWidgetAuthorTime from '../../components/mr_widget_author_time'; import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetClosed', name: 'MRWidgetClosed',
...@@ -7,24 +8,28 @@ export default { ...@@ -7,24 +8,28 @@ export default {
}, },
components: { components: {
'mr-widget-author-and-time': mrWidgetAuthorTime, 'mr-widget-author-and-time': mrWidgetAuthorTime,
statusIcon,
}, },
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<mr-widget-author-and-time <status-icon status="failed" />
actionText="Closed by" <div class="media-body">
:author="mr.closedBy" <mr-widget-author-and-time
:dateTitle="mr.updatedAt" actionText="Closed by"
:dateReadable="mr.closedAt" :author="mr.closedBy"
/> :dateTitle="mr.updatedAt"
<section> :dateReadable="mr.closedAt"
<p> />
The changes were not merged into <section class="mr-info-list">
<a <p>
:href="mr.targetBranchPath" The changes were not merged into
class="label-branch"> <a
{{mr.targetBranch}}</a>. :href="mr.targetBranchPath"
</p> class="label-branch">
</section> {{mr.targetBranch}}</a>
</p>
</section>
</div>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetConflicts', name: 'MRWidgetConflicts',
props: { props: {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
}, },
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" showDisabledButton />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold">
disabled="true"> There are merge conflicts<span v-if="!mr.canMerge">.</span>
Merge <span v-if="!mr.canMerge">
</button> Resolve these conflicts or ask someone with write access to this repository to merge it locally
<span class="bold"> </span>
There are merge conflicts.
<span v-if="!mr.canMerge">
Resolve these conflicts or ask someone with write access to this repository to merge it locally.
</span> </span>
</span>
<div
v-if="mr.canMerge"
class="btn-group">
<a <a
v-if="mr.conflictResolutionPath" v-if="mr.canMerge && mr.conflictResolutionPath"
:href="mr.conflictResolutionPath" :href="mr.conflictResolutionPath"
class="btn btn-default btn-xs js-resolve-conflicts-button"> class="btn btn-default btn-xs js-resolve-conflicts-button">
Resolve conflicts Resolve conflicts
......
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
...@@ -38,39 +39,40 @@ export default { ...@@ -38,39 +39,40 @@ export default {
} }
}, },
}, },
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <template v-if="isRefreshing">
class="btn btn-success btn-small" <status-icon status="loading" />
disabled="true" <span class="media-body bold js-refresh-label">
type="button"> Refreshing now
Merge
</button>
<span
v-if="!isRefreshing"
class="bold danger">
<span
class="has-error-message"
v-if="mr.mergeError">
{{mr.mergeError}}
</span>
<span v-else>Merge failed.</span>
<span
:class="{ 'has-custom-error': mr.mergeError }">
Refreshing in {{timerText}} to show the updated status...
</span> </span>
<button </template>
@click="refresh" <template v-else>
class="btn btn-default btn-xs js-refresh-button" <status-icon status="failed" showDisabledButton />
type="button"> <div class="media-body space-children">
Refresh now <span class="bold">
</button> <span
</span> class="has-error-message"
<span v-if="mr.mergeError">
v-if="isRefreshing" {{mr.mergeError}}.
class="bold js-refresh-label"> </span>
Refreshing now... <span v-else>Merge failed.</span>
</span> <span
:class="{ 'has-custom-error': mr.mergeError }">
Refreshing in {{timerText}} to show the updated status...
</span>
</span>
<button
@click="refresh"
class="btn btn-default btn-xs js-refresh-button"
type="button">
Refresh now
</button>
</div>
</template>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetLocked', name: 'MRWidgetLocked',
props: { props: {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
}, },
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body mr-state-locked"> <div class="mr-widget-body mr-state-locked media">
<span class="state-label">Locked</span> <status-icon status="loading" />
This merge request is in the process of being merged, during which time it is locked and cannot be closed. <div class="media-body">
<i <h4>
class="fa fa-spinner fa-spin" This merge request is in the process of being merged, during which time it is locked and cannot be closed
aria-hidden="true" /> </h4>
<section class="mr-info-list mr-links"> <section class="mr-info-list">
<div class="legend"></div> <p>
<p> The changes will be merged into
The changes will be merged into <span class="label-branch">
<span class="label-branch"> <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
<a :href="mr.targetBranchPath">{{mr.targetBranch}}</a> </span>
</span>. </p>
</p> </section>
</section> </div>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
View file @ 3a087a00
/* global Flash */ /* global Flash */
import statusIcon from '../mr_widget_status_icon';
import MRWidgetAuthor from '../../components/mr_widget_author'; import MRWidgetAuthor from '../../components/mr_widget_author';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
...@@ -11,6 +11,7 @@ export default { ...@@ -11,6 +11,7 @@ export default {
}, },
components: { components: {
'mr-widget-author': MRWidgetAuthor, 'mr-widget-author': MRWidgetAuthor,
statusIcon,
}, },
data() { data() {
return { return {
...@@ -61,56 +62,56 @@ export default { ...@@ -61,56 +62,56 @@ export default {
}, },
}, },
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<h4> <status-icon status="success" />
Set by <div class="media-body">
<mr-widget-author :author="mr.setToMWPSBy" /> <h4>
to be merged automatically when the pipeline succeeds. Set by
<a <mr-widget-author :author="mr.setToMWPSBy" />
v-if="mr.canCancelAutomaticMerge" to be merged automatically when the pipeline succeeds
@click.prevent="cancelAutomaticMerge"
:disabled="isCancellingAutoMerge"
role="button"
href="#"
class="btn btn-xs btn-default js-cancel-auto-merge">
<i
v-if="isCancellingAutoMerge"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Cancel automatic merge
</a>
</h4>
<section class="mr-info-list">
<div class="legend"></div>
<p>The changes will be merged into
<a
:href="mr.targetBranchPath"
class="label-branch">
{{mr.targetBranch}}
</a>.
</p>
<p v-if="mr.shouldRemoveSourceBranch">
The source branch will be removed.
</p>
<p
v-else
class="with-button">
The source branch will not be removed.
<a <a
v-if="canRemoveSourceBranch" v-if="mr.canCancelAutomaticMerge"
:disabled="isRemovingSourceBranch" @click.prevent="cancelAutomaticMerge"
@click.prevent="removeSourceBranch" :disabled="isCancellingAutoMerge"
role="button" role="button"
class="btn btn-xs btn-default js-remove-source-branch" href="#"
href="#"> class="btn btn-xs btn-default js-cancel-auto-merge">
<i <i
v-if="isRemovingSourceBranch" v-if="isCancellingAutoMerge"
class="fa fa-spinner fa-spin" class="fa fa-spinner fa-spin"
aria-hidden="true" /> aria-hidden="true" />
Remove source branch Cancel automatic merge
</a> </a>
</p> </h4>
</section> <section class="mr-info-list">
<p>The changes will be merged into
<a
:href="mr.targetBranchPath"
class="label-branch">
{{mr.targetBranch}}
</a>
</p>
<p v-if="mr.shouldRemoveSourceBranch">
The source branch will be removed
</p>
<p v-else>
The source branch will not be removed
<a
v-if="canRemoveSourceBranch"
:disabled="isRemovingSourceBranch"
@click.prevent="removeSourceBranch"
role="button"
class="btn btn-xs btn-default js-remove-source-branch"
href="#">
<i
v-if="isRemovingSourceBranch"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Remove source branch
</a>
</p>
</section>
</div>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
View file @ 3a087a00
/* global Flash */ /* global Flash */
import mrWidgetAuthorTime from '../../components/mr_widget_author_time'; import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
import tooltip from '../../../vue_shared/directives/tooltip';
import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
import statusIcon from '../mr_widget_status_icon';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
...@@ -9,14 +12,19 @@ export default { ...@@ -9,14 +12,19 @@ export default {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
service: { type: Object, required: true }, service: { type: Object, required: true },
}, },
components: {
'mr-widget-author-and-time': mrWidgetAuthorTime,
},
data() { data() {
return { return {
isMakingRequest: false, isMakingRequest: false,
}; };
}, },
directives: {
tooltip,
},
components: {
'mr-widget-author-and-time': mrWidgetAuthorTime,
loadingIcon,
statusIcon,
},
computed: { computed: {
shouldShowRemoveSourceBranch() { shouldShowRemoveSourceBranch() {
const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr; const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
...@@ -55,75 +63,77 @@ export default { ...@@ -55,75 +63,77 @@ export default {
}, },
}, },
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<mr-widget-author-and-time <status-icon status="success" />
actionText="Merged by" <div class="media-body">
:author="mr.mergedBy" <div class="space-children">
:dateTitle="mr.updatedAt" <mr-widget-author-and-time
:dateReadable="mr.mergedAt" /> actionText="Merged by"
<section class="mr-info-list"> :author="mr.mergedBy"
<div class="legend"></div> :dateTitle="mr.updatedAt"
<p> :dateReadable="mr.mergedAt" />
The changes were merged into <a
<span class="label-branch"> v-if="mr.canRevertInCurrentMR"
<a :href="mr.targetBranchPath">{{mr.targetBranch}}</a> v-tooltip
</span> class="btn btn-close btn-xs"
</p> href="#modal-revert-commit"
<p v-if="mr.sourceBranchRemoved">The source branch has been removed.</p> data-toggle="modal"
<p v-if="shouldShowRemoveSourceBranch"> data-container="body"
You can remove source branch now. title="Revert this merge request in a new merge request">
<button Revert
@click="removeSourceBranch" </a>
:class="{ disabled: isMakingRequest }" <a
type="button" v-else-if="mr.revertInForkPath"
class="btn btn-xs btn-default js-remove-branch-button"> v-tooltip
Remove Source Branch class="btn btn-close btn-xs"
</button> data-method="post"
</p> :href="mr.revertInForkPath"
<p v-if="shouldShowSourceBranchRemoving"> title="Revert this merge request in a new merge request">
<i Revert
class="fa fa-spinner fa-spin" </a>
aria-hidden="true" /> <a
The source branch is being removed. v-if="mr.canCherryPickInCurrentMR"
</p> v-tooltip
</section> class="btn btn-default btn-xs"
<div href="#modal-cherry-pick-commit"
v-if="shouldShowMergedButtons" data-toggle="modal"
class="merged-buttons clearfix"> data-container="body"
<a title="Cherry-pick this merge request in a new merge request">
v-if="mr.canRevertInCurrentMR" Cherry-pick
class="btn btn-close btn-sm has-tooltip" </a>
href="#modal-revert-commit" <a
data-toggle="modal" v-else-if="mr.cherryPickInForkPath"
data-container="body" v-tooltip
title="Revert this merge request in a new merge request"> class="btn btn-default btn-xs"
Revert data-method="post"
</a> :href="mr.cherryPickInForkPath"
<a title="Cherry-pick this merge request in a new merge request">
v-else-if="mr.revertInForkPath" Cherry-pick
class="btn btn-close btn-sm has-tooltip" </a>
data-method="post" </div>
:href="mr.revertInForkPath" <section class="mr-info-list">
title="Revert this merge request in a new merge request"> <p>
Revert The changes were merged into
</a> <span class="label-branch">
<a <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
v-if="mr.canCherryPickInCurrentMR" </span>
class="btn btn-default btn-sm has-tooltip" </p>
href="#modal-cherry-pick-commit" <p v-if="mr.sourceBranchRemoved">The source branch has been removed</p>
data-toggle="modal" <p v-if="shouldShowRemoveSourceBranch" class="space-children">
data-container="body" <span>You can remove source branch now</span>
title="Cherry-pick this merge request in a new merge request"> <button
Cherry-pick @click="removeSourceBranch"
</a> :disabled="isMakingRequest"
<a type="button"
v-else-if="mr.cherryPickInForkPath" class="btn btn-xs btn-default js-remove-branch-button">
class="btn btn-default btn-sm has-tooltip" Remove Source Branch
data-method="post" </button>
:href="mr.cherryPickInForkPath" </p>
title="Cherry-pick this merge request in a new merge request"> <p v-if="shouldShowSourceBranchRemoving">
Cherry-pick <loading-icon inline />
</a> <span>The source branch is being removed</span>
</p>
</section>
</div> </div>
</div> </div>
`, `,
......
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
import tooltip from '../../../vue_shared/directives/tooltip';
import mrWidgetMergeHelp from '../../components/mr_widget_merge_help'; import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
export default { export default {
...@@ -5,30 +7,37 @@ export default { ...@@ -5,30 +7,37 @@ export default {
props: { props: {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
}, },
directives: {
tooltip,
},
components: { components: {
'mr-widget-merge-help': mrWidgetMergeHelp, 'mr-widget-merge-help': mrWidgetMergeHelp,
statusIcon,
}, },
computed: { computed: {
missingBranchName() { missingBranchName() {
return this.mr.sourceBranchRemoved ? 'source' : 'target'; return this.mr.sourceBranchRemoved ? 'source' : 'target';
}, },
message() {
return `If the ${this.missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line`;
},
}, },
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" showDisabledButton />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold js-branch-text">
disabled="true"> <span class="capitalize">
Merge {{missingBranchName}}
</button> </span> branch does not exist.
<span class="bold js-branch-text"> Please restore it or use a different {{missingBranchName}} branch
<span class="capitalize"> <i
{{missingBranchName}} v-tooltip
</span> branch does not exist. class="fa fa-question-circle"
Please restore the {{missingBranchName}} branch or use a different {{missingBranchName}} branch. :title="message"
</span> :aria-label="message"></i>
<mr-widget-merge-help </span>
:missing-branch="missingBranchName" /> </div>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetNotAllowed', name: 'MRWidgetNotAllowed',
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="success" showDisabledButton />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold">
disabled="true"> Ready to be merged automatically.
Merge Ask someone with write access to this repository to merge this request
</button> </span>
<span class="bold"> </div>
Ready to be merged automatically.
Ask someone with write access to this repository to merge this request.
</span>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
View file @ 3a087a00
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
return { emptyStateSVG }; return { emptyStateSVG };
}, },
template: ` template: `
<div class="mr-widget-body empty-state"> <div class="mr-widget-body mr-widget-empty-state">
<div class="row"> <div class="row">
<div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center"> <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
<span v-html="emptyStateSVG"></span> <span v-html="emptyStateSVG"></span>
...@@ -29,12 +29,14 @@ export default { ...@@ -29,12 +29,14 @@ export default {
Currently there are no changes in this merge request's source branch. Currently there are no changes in this merge request's source branch.
Please push new commits or use a different branch. Please push new commits or use a different branch.
</p> </p>
<a <div>
v-if="mr.newBlobPath" <a
:href="mr.newBlobPath" v-if="mr.newBlobPath"
class="btn btn-inverted btn-save"> :href="mr.newBlobPath"
Create file class="btn btn-inverted btn-save">
</a> Create file
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
......
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetPipelineBlocked', name: 'MRWidgetPipelineBlocked',
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" showDisabledButton />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold">
disabled="true"> Pipeline blocked. The pipeline for this merge request requires a manual action to proceed
Merge </span>
</button> </div>
<span class="bold">
Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.
</span>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetPipelineBlocked', name: 'MRWidgetPipelineBlocked',
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" showDisabledButton />
class="btn btn-success btn-small" <div class="media-body space-children">
disabled="true" <span class="bold">
type="button"> The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure
Merge </span>
</button> </div>
<span class="bold">
The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.
</span>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
View file @ 3a087a00
/* global Flash */ /* global Flash */
import successSvg from 'icons/_icon_status_success.svg'; import successSvg from 'icons/_icon_status_success.svg';
import warningSvg from 'icons/_icon_status_warning.svg'; import warningSvg from 'icons/_icon_status_warning.svg';
import simplePoll from '~/lib/utils/simple_poll'; import simplePoll from '~/lib/utils/simple_poll';
import statusIcon from '../mr_widget_status_icon';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
...@@ -25,6 +25,9 @@ export default { ...@@ -25,6 +25,9 @@ export default {
warningSvg, warningSvg,
}; };
}, },
components: {
statusIcon,
},
computed: { computed: {
commitMessageLinkTitle() { commitMessageLinkTitle() {
const withDesc = 'Include description in commit message'; const withDesc = 'Include description in commit message';
...@@ -196,84 +199,98 @@ export default { ...@@ -196,84 +199,98 @@ export default {
}, },
}, },
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<span class="btn-group"> <status-icon status="success" />
<button <div class="media-body">
@click="handleMergeButtonClick()" <div class="media space-children">
:disabled="isMergeButtonDisabled" <span class="btn-group">
:class="mergeButtonClass" <button
type="button"> @click="handleMergeButtonClick()"
<i :disabled="isMergeButtonDisabled"
v-if="isMakingRequest" :class="mergeButtonClass"
class="fa fa-spinner fa-spin" type="button">
aria-hidden="true" /> <i
{{mergeButtonText}} v-if="isMakingRequest"
</button> class="fa fa-spinner fa-spin"
<button aria-hidden="true" />
v-if="shouldShowMergeOptionsDropdown" {{mergeButtonText}}
:disabled="isMergeButtonDisabled" </button>
type="button" <button
class="btn btn-small btn-info dropdown-toggle" v-if="shouldShowMergeOptionsDropdown"
data-toggle="dropdown"> :disabled="isMergeButtonDisabled"
<i type="button"
class="fa fa-caret-down" class="btn btn-small btn-info dropdown-toggle js-merge-moment"
aria-hidden="true" /> data-toggle="dropdown"
<span class="sr-only"> aria-label="Select merge moment">
Select merge moment <i
class="fa fa-chevron-down"
aria-hidden="true" />
</button>
<ul
v-if="shouldShowMergeOptionsDropdown"
class="dropdown-menu dropdown-menu-right"
role="menu">
<li>
<a
@click.prevent="handleMergeButtonClick(true)"
class="merge_when_pipeline_succeeds"
href="#">
<span class="media">
<span
v-html="successSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
</span>
</a>
</li>
<li>
<a
@click.prevent="handleMergeButtonClick(false, true)"
class="accept-merge-request"
href="#">
<span class="media">
<span
v-html="warningSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="media-body merge-opt-title">Merge immediately</span>
</span>
</a>
</li>
</ul>
</span> </span>
</button> <div class="media-body space-children">
<ul <template v-if="isMergeAllowed()">
v-if="shouldShowMergeOptionsDropdown" <label>
class="dropdown-menu dropdown-menu-right" <input
role="menu"> id="remove-source-branch-input"
<li> v-model="removeSourceBranch"
<a :disabled="isRemoveSourceBranchButtonDisabled"
@click.prevent="handleMergeButtonClick(true)" type="checkbox"/> Remove source branch
class="merge_when_pipeline_succeeds" </label>
href="#">
<span
v-html="successSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="merge-opt-title">Merge when pipeline succeeds</span>
</a>
</li>
<li>
<a
@click.prevent="handleMergeButtonClick(false, true)"
class="accept-merge-request"
href="#">
<span
v-html="warningSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="merge-opt-title">Merge immediately</span>
</a>
</li>
</ul>
</span>
<template v-if="isMergeAllowed()">
<label class="spacing">
<input
id="remove-source-branch-input"
v-model="removeSourceBranch"
:disabled="isRemoveSourceBranchButtonDisabled"
type="checkbox"/> Remove source branch
</label>
<!-- Placeholder for EE extension of this component --> <!-- Placeholder for EE extension of this component -->
<squash-before-merge <squash-before-merge
v-if="shouldShowSquashBeforeMerge" v-if="shouldShowSquashBeforeMerge"
:mr="mr" :mr="mr"
:is-merge-button-disabled="isMergeButtonDisabled" /> :is-merge-button-disabled="isMergeButtonDisabled" />
<button <button
@click="toggleCommitMessageEditor" @click="toggleCommitMessageEditor"
:disabled="isMergeButtonDisabled" :disabled="isMergeButtonDisabled"
class="btn btn-default btn-xs" class="btn btn-default btn-xs"
type="button"> type="button">
Modify commit message Modify commit message
</button> </button>
</template>
<template v-else>
<span class="bold">
The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure
</span>
</template>
</div>
</div>
<div <div
v-if="showCommitMessageEditor" v-if="showCommitMessageEditor"
class="prepend-top-default commit-message-editor"> class="prepend-top-default commit-message-editor">
...@@ -293,7 +310,7 @@ export default { ...@@ -293,7 +310,7 @@ export default {
rows="14" rows="14"
name="Commit message"></textarea> name="Commit message"></textarea>
</div> </div>
<p class="hint">Try to keep the first line under 52 characters and the others under 72.</p> <p class="hint">Try to keep the first line under 52 characters and the others under 72</p>
<div class="hint"> <div class="hint">
<a <a
@click.prevent="updateCommitMessage" @click.prevent="updateCommitMessage"
...@@ -302,12 +319,7 @@ export default { ...@@ -302,12 +319,7 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</template> </div>
<template v-else>
<span class="bold">
The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.
</span>
</template>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetSHAMismatch', name: 'MRWidgetSHAMismatch',
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" showDisabledButton />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold">
disabled="true"> The source branch HEAD has recently changed. Please reload the page and review the changes before merging
Merge </span>
</button> </div>
<span class="bold">
The source branch HEAD has recently changed. Please reload the page and review the changes before merging.
</span>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
View file @ 3a087a00
import statusIcon from '../mr_widget_status_icon';
export default { export default {
name: 'MRWidgetUnresolvedDiscussions', name: 'MRWidgetUnresolvedDiscussions',
props: { props: {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
}, },
components: {
statusIcon,
},
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" showDisabledButton />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold">
disabled="true"> There are unresolved discussions. Please resolve these discussions
Merge </span>
</button> <a
<span class="bold"> v-if="mr.createIssueToResolveDiscussionsPath"
There are unresolved discussions. Please resolve these discussions :href="mr.createIssueToResolveDiscussionsPath"
<span v-if="mr.canCreateIssue">or</span> class="btn btn-default btn-xs js-create-issue">
<span v-else>.</span> Create an issue to resolve them later
</span> </a>
<a </div>
v-if="mr.createIssueToResolveDiscussionsPath"
:href="mr.createIssueToResolveDiscussionsPath"
class="btn btn-default btn-xs js-create-issue">
Create an issue to resolve them later
</a>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
View file @ 3a087a00
/* global Flash */ /* global Flash */
import statusIcon from '../mr_widget_status_icon';
import tooltip from '../../../vue_shared/directives/tooltip';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
...@@ -7,11 +9,17 @@ export default { ...@@ -7,11 +9,17 @@ export default {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
service: { type: Object, required: true }, service: { type: Object, required: true },
}, },
directives: {
tooltip,
},
data() { data() {
return { return {
isMakingRequest: false, isMakingRequest: false,
}; };
}, },
components: {
statusIcon,
},
methods: { methods: {
removeWIP() { removeWIP() {
this.isMakingRequest = true; this.isMakingRequest = true;
...@@ -29,20 +37,20 @@ export default { ...@@ -29,20 +37,20 @@ export default {
}, },
}, },
template: ` template: `
<div class="mr-widget-body"> <div class="mr-widget-body media">
<button <status-icon status="failed" :showDisabledButton="Boolean(mr.removeWIPPath)" />
type="button" <div class="media-body space-children">
class="btn btn-success btn-small" <span class="bold">
disabled="true"> This is a Work in Progress
Merge</button> <i
<span class="bold"> v-tooltip
This merge request is currently Work In Progress and therefore unable to merge class="fa fa-question-circle"
</span> title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged"
<template v-if="mr.removeWIPPath"> aria-label="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged">
<i </i>
class="fa fa-question-circle has-tooltip" </span>
title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged." />
<button <button
v-if="mr.removeWIPPath"
@click="removeWIP" @click="removeWIP"
:disabled="isMakingRequest" :disabled="isMakingRequest"
type="button" type="button"
...@@ -53,7 +61,7 @@ export default { ...@@ -53,7 +61,7 @@ export default {
aria-hidden="true" /> aria-hidden="true" />
Resolve WIP status Resolve WIP status
</button> </button>
</template> </div>
</div> </div>
`, `,
}; };
app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
View file @ 3a087a00
...@@ -35,8 +35,14 @@ import { ...@@ -35,8 +35,14 @@ import {
export default { export default {
el: '#js-vue-mr-widget', el: '#js-vue-mr-widget',
name: 'MRWidget', name: 'MRWidget',
props: {
mrData: {
type: Object,
required: false,
},
},
data() { data() {
const store = new MRWidgetStore(gl.mrWidgetData); const store = new MRWidgetStore(this.mrData || window.gl.mrWidgetData);
const service = this.createService(store); const service = this.createService(store);
return { return {
mr: store, mr: store,
...@@ -234,14 +240,21 @@ export default { ...@@ -234,14 +240,21 @@ export default {
v-if="shouldRenderDeployments" v-if="shouldRenderDeployments"
:mr="mr" :mr="mr"
:service="service" /> :service="service" />
<component <div class="mr-widget-section">
:is="componentName" <component
:mr="mr" :is="componentName"
:service="service" /> :mr="mr"
<mr-widget-related-links :service="service" />
v-if="shouldRenderRelatedLinks" <mr-widget-related-links
:related-links="mr.relatedLinks" /> v-if="shouldRenderRelatedLinks"
<mr-widget-merge-help v-if="shouldRenderMergeHelp" /> :state="mr.state"
:related-links="mr.relatedLinks" />
</div>
<div
class="mr-widget-footer"
v-if="shouldRenderMergeHelp">
<mr-widget-merge-help />
</div>
</div> </div>
`, `,
}; };
app/assets/stylesheets/framework.scss
View file @ 3a087a00
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
@import "framework/lists"; @import "framework/lists";
@import "framework/logo"; @import "framework/logo";
@import "framework/markdown_area"; @import "framework/markdown_area";
@import "framework/media_object";
@import "framework/mobile"; @import "framework/mobile";
@import "framework/modal"; @import "framework/modal";
@import "framework/nav"; @import "framework/nav";
......
app/assets/stylesheets/framework/media_object.scss 0 → 100644
View file @ 3a087a00
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}
app/assets/stylesheets/framework/variables.scss
View file @ 3a087a00
...@@ -206,7 +206,6 @@ $general-hover-transition-curve: linear; ...@@ -206,7 +206,6 @@ $general-hover-transition-curve: linear;
$highlight-changes-color: rgb(235, 255, 232); $highlight-changes-color: rgb(235, 255, 232);
$performance-bar-height: 35px; $performance-bar-height: 35px;
/* /*
* Common component specific colors * Common component specific colors
*/ */
...@@ -315,6 +314,12 @@ $btn-white-active: #848484; ...@@ -315,6 +314,12 @@ $btn-white-active: #848484;
$badge-bg: rgba(0, 0, 0, 0.07); $badge-bg: rgba(0, 0, 0, 0.07);
$badge-color: $gl-text-color-secondary; $badge-color: $gl-text-color-secondary;
/*
* Status icons
*/
$status-icon-size: 22px;
$status-icon-margin: $gl-btn-padding;
/* /*
* Award emoji * Award emoji
*/ */
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ 3a087a00
...@@ -2,10 +2,35 @@ ...@@ -2,10 +2,35 @@
* MR -> show: Automerge widget * MR -> show: Automerge widget
* *
*/ */
.space-children {
@include clearfix;
> * {
float: left;
}
> *:not(:last-child) {
margin-right: 10px;
}
}
.mr-state-widget { .mr-state-widget {
color: $gl-text-color; color: $gl-text-color;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 2px; border-radius: 2px;
line-height: 28px;
.mr-widget-heading,
.mr-widget-section,
.mr-widget-footer {
padding: $gl-padding;
border-top: solid 1px $border-color;
}
.mr-widget-footer {
padding: 0;
}
form { form {
margin-bottom: 0; margin-bottom: 0;
...@@ -15,15 +40,35 @@ ...@@ -15,15 +40,35 @@
} }
} }
label {
margin-bottom: 0;
}
.btn {
font-size: $gl-font-size;
&[disabled] {
opacity: 0.3;
}
&.btn-xs {
line-height: 1;
padding: 5px 10px;
margin-top: 1px;
}
&.dropdown-toggle {
.fa {
color: inherit;
}
}
}
.accept-merge-holder { .accept-merge-holder {
.accept-action { .accept-action {
display: inline-block; display: inline-block;
float: left; float: left;
.btn-success.dropdown-toggle .fa {
color: inherit;
}
.accept-merge-request { .accept-merge-request {
&.ci-pending, &.ci-pending,
&.ci-running { &.ci-running {
...@@ -84,77 +129,64 @@ ...@@ -84,77 +129,64 @@
.ci-widget { .ci-widget {
color: $gl-text-color; color: $gl-text-color;
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
align-items: center;
padding: $gl-padding-top $gl-padding 0;
svg {
position: relative;
top: 1px;
overflow: visible;
}
> span {
padding-right: 4px;
}
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
flex-wrap: wrap; flex-wrap: wrap;
} }
}
.icon-link > .ci-status-icon > svg { .mr-widget-icon {
width: 22px; font-size: 22px;
height: 22px; margin-right: $status-icon-margin;
margin-right: 8px; }
}
.ci-error { .ci-status-icon svg {
margin-right: $btn-side-margin; width: $status-icon-size;
} height: $status-icon-size;
margin: 3px 0;
position: relative;
overflow: visible;
display: block;
} }
.mr-widget-body, .mr-widget-body {
.mr-widget-footer { @include clearfix;
margin: 16px;
&.media > *:first-child {
margin-right: 10px;
}
} }
.mr-widget-pipeline-graph { .mr-widget-pipeline-graph {
flex-shrink: 0; padding: 0 4px;
.dropdown-menu { .dropdown-menu {
margin-top: 11px;
z-index: 300; z-index: 300;
} }
.ci-action-icon-wrapper { .ci-action-icon-wrapper {
line-height: 16px; line-height: 16px;
} }
}
@media (max-width: $screen-xs-max) { .mini-pipeline-graph-dropdown-toggle {
order: 1; vertical-align: top;
margin-top: $gl-padding-top; }
border-radius: 3px;
background-color: $white-light;
border: 1px solid $gray-darker;
width: 100%;
text-align: center;
.dropdown-menu { .mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
margin-left: -97.5px; display: flex;
} align-items: center;
.arrow-up::before, .ci-status-text,
.arrow-up::after, { .ci-status-icon {
margin-left: 97.5px; top: 0;
} margin-right: 10px;
} }
} }
.normal { .normal {
color: $gl-text-color; line-height: 28px;
font-size: 15px;
} }
.capitalize { .capitalize {
...@@ -165,9 +197,8 @@ ...@@ -165,9 +197,8 @@
@extend .ref-name; @extend .ref-name;
color: $gl-text-color; color: $gl-text-color;
font-weight: bold; font-weight: 600;
overflow: hidden; overflow: hidden;
margin: 0 3px;
word-break: break-all; word-break: break-all;
&.label-truncated { &.label-truncated {
...@@ -189,52 +220,19 @@ ...@@ -189,52 +220,19 @@
} }
} }
.js-deployment-link {
display: inline-block;
}
.mr-widget-help { .mr-widget-help {
margin: $gl-padding; padding: 10px 16px 10px 48px;
color: $ci-skipped-color; font-style: italic;
}
.mr-info-list {
&.mr-links {
margin-left: 28px;
}
&.mr-memory-usage {
margin: 5px 0 10px 25px;
}
}
.mr-widget-heading {
.btn-default.btn-xs {
margin-left: 5px;
}
}
.mr-widget-body {
.btn {
font-size: 15px;
}
.btn-group .btn {
padding: 5px 10px;
&.dropdown-toggle {
padding: 5px 7px;
}
}
} }
.mr-widget-body { .mr-widget-body {
h4 { h4 {
font-weight: bold; float: left;
font-size: 15px; font-weight: 600;
margin: 5px 0; font-size: 14px;
color: $gl-text-color; line-height: inherit;
margin-top: 0;
margin-bottom: 0;
&.has-conflicts .fa-exclamation-triangle { &.has-conflicts .fa-exclamation-triangle {
color: $gl-warning; color: $gl-warning;
...@@ -255,18 +253,16 @@ ...@@ -255,18 +253,16 @@
} }
.spacing { .spacing {
margin: 0 $gl-padding; margin: 0 0 0 10px;
} }
.bold { .bold {
font-weight: bold; font-weight: 600;
font-size: 15px;
color: $gl-gray-light; color: $gl-gray-light;
} }
.state-label { .state-label {
font-size: 16px; font-weight: 600;
font-weight: bold;
padding-right: 10px; padding-right: 10px;
} }
...@@ -274,16 +270,6 @@ ...@@ -274,16 +270,6 @@
color: $gl-danger; color: $gl-danger;
} }
.mr-widget-help {
margin: $gl-padding 0;
}
.with-button {
position: relative;
top: 6px;
margin-bottom: 24px;
}
.spacing, .spacing,
.bold { .bold {
vertical-align: middle; vertical-align: middle;
...@@ -294,15 +280,8 @@ ...@@ -294,15 +280,8 @@
padding: 5px; padding: 5px;
} }
.merge-opt-icon, .merge-opt-icon {
.merge-opt-title { line-height: 1.5;
display: inline-block;
float: left;
}
.merge-opt-icon svg {
height: 15px;
width: 15px;
} }
.merge-opt-title { .merge-opt-title {
...@@ -316,34 +295,15 @@ ...@@ -316,34 +295,15 @@
} }
} }
.has-error-message + .has-custom-error {
margin-left: 0;
}
.has-custom-error { .has-custom-error {
display: inline-block; display: inline-block;
margin-left: 70px;
}
.merge-error-text {
margin-left: 70px;
} }
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
h4 {
font-size: 14px;
}
p { p {
font-size: 13px; font-size: 13px;
} }
.btn,
.btn-group,
.accept-action {
margin-bottom: 4px;
}
.btn-grouped { .btn-grouped {
float: none; float: none;
margin-right: 0; margin-right: 0;
...@@ -367,19 +327,16 @@ ...@@ -367,19 +327,16 @@
} }
} }
&.mr-state-locked .mr-info-list { &.mr-widget-empty-state {
margin-top: 10px; line-height: 20px;
margin-left: 12px;
}
&.empty-state {
.artwork { .artwork {
margin-bottom: $gl-padding; margin-bottom: $gl-padding;
} }
.text { .text {
span { span {
font-weight: bold; font-weight: 600;
} }
p { p {
...@@ -389,10 +346,6 @@ ...@@ -389,10 +346,6 @@
} }
} }
.mr-widget-footer {
border-top: 1px solid $gray-darker;
}
.ci-coverage { .ci-coverage {
float: right; float: right;
} }
...@@ -497,8 +450,6 @@ ...@@ -497,8 +450,6 @@
} }
.btn-clipboard { .btn-clipboard {
@extend .pull-right;
margin-right: 20px; margin-right: 20px;
margin-top: 5px; margin-top: 5px;
position: absolute; position: absolute;
...@@ -506,56 +457,29 @@ ...@@ -506,56 +457,29 @@
} }
} }
.mr-links {
padding-left: $status-icon-size + $status-icon-margin;
}
.mr-info-list { .mr-info-list {
clear: left;
position: relative; position: relative;
margin: 10px 0 $gl-padding 12px; padding-top: 4px;
p { p {
margin: 6px 0; margin: 0;
position: relative; position: relative;
padding-left: 15px; padding: 4px 0;
&::before {
content: '';
position: absolute;
border-top: 2px solid $border-color;
height: 1px;
top: 9px;
width: 8px;
left: 0;
}
&:last-child { &:last-child {
margin-bottom: 0; padding-bottom: 0;
} }
} }
.legend {
height: 100%;
width: 2px;
background: $border-color;
position: absolute;
top: -9px;
}
} }
.mr-info-list.mr-memory-usage { .mr-info-list.mr-memory-usage {
.legend {
height: 65%;
top: 0;
@media (max-width: $screen-xs-max) {
height: 20px;
}
}
p { p {
float: left; float: left;
padding-left: 21px;
&::before {
top: 13px;
}
} }
.memory-graph-container { .memory-graph-container {
...@@ -565,12 +489,13 @@ ...@@ -565,12 +489,13 @@
} }
.mr-source-target { .mr-source-target {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background-color: $gray-light; background-color: $gray-light;
border-radius: 3px 3px 0 0; border-radius: $border-radius-default $border-radius-default 0 0;
border-bottom: 1px solid $border-color; padding: $gl-padding / 2 $gl-padding;
padding: 0 $gl-padding;
margin-bottom: 6px;
line-height: 44px;
.dropdown-toggle .fa { .dropdown-toggle .fa {
color: $gl-text-color; color: $gl-text-color;
...@@ -679,14 +604,8 @@ ...@@ -679,14 +604,8 @@
} }
.merged-buttons { .merged-buttons {
margin-top: 20px;
.btn { .btn {
float: left; float: left;
&:not(:last-child) {
margin-right: 10px;
}
} }
} }
...@@ -803,20 +722,8 @@ ...@@ -803,20 +722,8 @@
} }
.mr-memory-usage { .mr-memory-usage {
p.usage-info-loading,
p.usage-info-unavailable,
p.usage-info-failed {
margin-bottom: 5px;
}
p.usage-info-loading .usage-info-load-spinner { p.usage-info-loading .usage-info-load-spinner {
margin-right: 10px; margin-right: 10px;
font-size: 16px; font-size: 16px;
} }
@media (max-width: $screen-md-min) {
.mr-info-list.mr-memory-usage .legend {
height: 80%;
}
}
} }
app/assets/stylesheets/pages/pipelines.scss
View file @ 3a087a00
...@@ -220,7 +220,11 @@ ...@@ -220,7 +220,11 @@
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
height: 22px; height: 22px;
margin: 3px 6px 3px 0; margin: 3px 0;
+ .stage-container {
margin-left: 6px;
}
// Hack to show a button tooltip inline // Hack to show a button tooltip inline
button.has-tooltip + .tooltip { button.has-tooltip + .tooltip {
......
changelogs/unreleased/33095-mr-widget-ui.yml 0 → 100644
View file @ 3a087a00
---
title: clean up merge request widget UI
merge_request:
author:
spec/features/merge_requests/closes_issues_spec.rb
View file @ 3a087a00
...@@ -26,17 +26,11 @@ feature 'Merge Request closing issues message', js: true do ...@@ -26,17 +26,11 @@ feature 'Merge Request closing issues message', js: true do
wait_for_requests wait_for_requests
end end
context 'not closing or mentioning any issue' do
it 'does not display closing issue message' do
expect(page).not_to have_css('.mr-widget-footer')
end
end
context 'closing issues but not mentioning any other issue' do context 'closing issues but not mentioning any other issue' do
let(:merge_request_description) { "Description\n\nclosing #{issue_1.to_reference}, #{issue_2.to_reference}" } let(:merge_request_description) { "Description\n\nclosing #{issue_1.to_reference}, #{issue_2.to_reference}" }
it 'does not display closing issue message' do it 'does not display closing issue message' do
expect(page).to have_content("Closes issues #{issue_1.to_reference} and #{issue_2.to_reference}") expect(page).to have_content("Closes #{issue_1.to_reference} and #{issue_2.to_reference}")
end end
end end
...@@ -44,7 +38,7 @@ feature 'Merge Request closing issues message', js: true do ...@@ -44,7 +38,7 @@ feature 'Merge Request closing issues message', js: true do
let(:merge_request_description) { "Description\n\nRefers to #{issue_1.to_reference} and #{issue_2.to_reference}" } let(:merge_request_description) { "Description\n\nRefers to #{issue_1.to_reference} and #{issue_2.to_reference}" }
it 'does not display closing issue message' do it 'does not display closing issue message' do
expect(page).to have_content("Issues #{issue_1.to_reference} and #{issue_2.to_reference} are mentioned but will not be closed.") expect(page).to have_content("Mentions #{issue_1.to_reference} and #{issue_2.to_reference}")
end end
end end
...@@ -52,8 +46,8 @@ feature 'Merge Request closing issues message', js: true do ...@@ -52,8 +46,8 @@ feature 'Merge Request closing issues message', js: true do
let(:merge_request_title) { "closes #{issue_1.to_reference}\n\n refers to #{issue_2.to_reference}" } let(:merge_request_title) { "closes #{issue_1.to_reference}\n\n refers to #{issue_2.to_reference}" }
it 'does not display closing issue message' do it 'does not display closing issue message' do
expect(page).to have_content("Closes issue #{issue_1.to_reference}.") expect(page).to have_content("Closes #{issue_1.to_reference}")
expect(page).to have_content("Issue #{issue_2.to_reference} is mentioned but will not be closed.") expect(page).to have_content("Mentions #{issue_2.to_reference}")
end end
end end
...@@ -61,7 +55,7 @@ feature 'Merge Request closing issues message', js: true do ...@@ -61,7 +55,7 @@ feature 'Merge Request closing issues message', js: true do
let(:merge_request_title) { "closing #{issue_1.to_reference}, #{issue_2.to_reference}" } let(:merge_request_title) { "closing #{issue_1.to_reference}, #{issue_2.to_reference}" }
it 'does not display closing issue message' do it 'does not display closing issue message' do
expect(page).to have_content("Closes issues #{issue_1.to_reference} and #{issue_2.to_reference}") expect(page).to have_content("Closes #{issue_1.to_reference} and #{issue_2.to_reference}")
end end
end end
...@@ -69,7 +63,7 @@ feature 'Merge Request closing issues message', js: true do ...@@ -69,7 +63,7 @@ feature 'Merge Request closing issues message', js: true do
let(:merge_request_title) { "Refers to #{issue_1.to_reference} and #{issue_2.to_reference}" } let(:merge_request_title) { "Refers to #{issue_1.to_reference} and #{issue_2.to_reference}" }
it 'does not display closing issue message' do it 'does not display closing issue message' do
expect(page).to have_content("Issues #{issue_1.to_reference} and #{issue_2.to_reference} are mentioned but will not be closed.") expect(page).to have_content("Mentions #{issue_1.to_reference} and #{issue_2.to_reference}")
end end
end end
...@@ -77,8 +71,8 @@ feature 'Merge Request closing issues message', js: true do ...@@ -77,8 +71,8 @@ feature 'Merge Request closing issues message', js: true do
let(:merge_request_title) { "closes #{issue_1.to_reference}\n\n refers to #{issue_2.to_reference}" } let(:merge_request_title) { "closes #{issue_1.to_reference}\n\n refers to #{issue_2.to_reference}" }
it 'does not display closing issue message' do it 'does not display closing issue message' do
expect(page).to have_content("Closes issue #{issue_1.to_reference}. Issue #{issue_2.to_reference} is mentioned but will not be closed.") expect(page).to have_content("Closes #{issue_1.to_reference}")
expect(page).to have_content("Issue #{issue_2.to_reference} is mentioned but will not be closed.") expect(page).to have_content("Mentions #{issue_2.to_reference}")
end end
end end
end end
spec/features/merge_requests/merge_when_pipeline_succeeds_spec.rb
View file @ 3a087a00
...@@ -41,8 +41,8 @@ feature 'Merge When Pipeline Succeeds', :js do ...@@ -41,8 +41,8 @@ feature 'Merge When Pipeline Succeeds', :js do
it 'activates the Merge when pipeline succeeds feature' do it 'activates the Merge when pipeline succeeds feature' do
click_button "Merge when pipeline succeeds" click_button "Merge when pipeline succeeds"
expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds." expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds"
expect(page).to have_content "The source branch will not be removed." expect(page).to have_content "The source branch will not be removed"
expect(page).to have_selector ".js-cancel-auto-merge" expect(page).to have_selector ".js-cancel-auto-merge"
visit_merge_request(merge_request) # Needed to refresh the page visit_merge_request(merge_request) # Needed to refresh the page
expect(page).to have_content /enabled an automatic merge when the pipeline for \h{8} succeeds/i expect(page).to have_content /enabled an automatic merge when the pipeline for \h{8} succeeds/i
...@@ -97,11 +97,11 @@ feature 'Merge When Pipeline Succeeds', :js do ...@@ -97,11 +97,11 @@ feature 'Merge When Pipeline Succeeds', :js do
describe 'enabling Merge when pipeline succeeds via dropdown' do describe 'enabling Merge when pipeline succeeds via dropdown' do
it 'activates the Merge when pipeline succeeds feature' do it 'activates the Merge when pipeline succeeds feature' do
click_button 'Select merge moment' find('.js-merge-moment').click
click_link 'Merge when pipeline succeeds' click_link 'Merge when pipeline succeeds'
expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds." expect(page).to have_content "Set by #{user.name} to be merged automatically when the pipeline succeeds"
expect(page).to have_content "The source branch will not be removed." expect(page).to have_content "The source branch will not be removed"
expect(page).to have_link "Cancel automatic merge" expect(page).to have_link "Cancel automatic merge"
end end
end end
......
spec/features/merge_requests/only_allow_merge_if_build_succeeds_spec.rb
View file @ 3a087a00
...@@ -43,7 +43,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t ...@@ -43,7 +43,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
wait_for_requests wait_for_requests
expect(page).to have_button 'Merge when pipeline succeeds' expect(page).to have_button 'Merge when pipeline succeeds'
expect(page).not_to have_button 'Select merge moment' expect(page).not_to have_button '.js-merge-moment'
end end
end end
...@@ -56,7 +56,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t ...@@ -56,7 +56,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
wait_for_requests wait_for_requests
expect(page).to have_css('button[disabled="disabled"]', text: 'Merge') expect(page).to have_css('button[disabled="disabled"]', text: 'Merge')
expect(page).to have_content('Please retry the job or push a new commit to fix the failure.') expect(page).to have_content('Please retry the job or push a new commit to fix the failure')
end end
end end
...@@ -69,7 +69,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t ...@@ -69,7 +69,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
wait_for_requests wait_for_requests
expect(page).not_to have_button 'Merge' expect(page).not_to have_button 'Merge'
expect(page).to have_content('Please retry the job or push a new commit to fix the failure.') expect(page).to have_content('Please retry the job or push a new commit to fix the failure')
end end
end end
...@@ -113,7 +113,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t ...@@ -113,7 +113,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
expect(page).to have_button 'Merge when pipeline succeeds' expect(page).to have_button 'Merge when pipeline succeeds'
click_button 'Select merge moment' page.find('.js-merge-moment').click
expect(page).to have_content 'Merge immediately' expect(page).to have_content 'Merge immediately'
end end
end end
......
spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
View file @ 3a087a00
import Vue from 'vue'; import Vue from 'vue';
import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment'; import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service'; import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
const deploymentMockData = [ const deploymentMockData = [
{ {
...@@ -43,15 +42,6 @@ describe('MRWidgetDeployment', () => { ...@@ -43,15 +42,6 @@ describe('MRWidgetDeployment', () => {
}); });
}); });
describe('computed', () => {
describe('svg', () => {
it('should have the proper SVG icon', () => {
const vm = createComponent(deploymentMockData);
expect(vm.svg).toEqual(statusIconEntityMap.icon_status_success);
});
});
});
describe('methods', () => { describe('methods', () => {
let vm = createComponent(); let vm = createComponent();
const deployment = deploymentMockData[0]; const deployment = deploymentMockData[0];
......
spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
View file @ 3a087a00
...@@ -52,10 +52,10 @@ const createComponent = () => { ...@@ -52,10 +52,10 @@ const createComponent = () => {
}; };
const messages = { const messages = {
loadingMetrics: 'Loading deployment statistics.', loadingMetrics: 'Loading deployment statistics',
hasMetrics: 'Memory usage unchanged from 0MB to 0MB', hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
loadFailed: 'Failed to load deployment statistics.', loadFailed: 'Failed to load deployment statistics',
metricsUnavailable: 'Deployment statistics are not available currently.', metricsUnavailable: 'Deployment statistics are not available currently',
}; };
describe('MemoryUsage', () => { describe('MemoryUsage', () => {
......
spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
View file @ 3a087a00
...@@ -81,13 +81,12 @@ describe('MRWidgetPipeline', () => { ...@@ -81,13 +81,12 @@ describe('MRWidgetPipeline', () => {
expect(el.querySelectorAll('.ci-status-icon.ci-status-icon-success').length).toEqual(1); expect(el.querySelectorAll('.ci-status-icon.ci-status-icon-success').length).toEqual(1);
expect(el.querySelector('.pipeline-id').textContent).toContain(`#${pipeline.id}`); expect(el.querySelector('.pipeline-id').textContent).toContain(`#${pipeline.id}`);
expect(el.innerText).toContain('passed'); expect(el.innerText).toContain('passed');
expect(el.innerText).toContain('with stages');
expect(el.querySelector('.pipeline-id').getAttribute('href')).toEqual(pipeline.path); expect(el.querySelector('.pipeline-id').getAttribute('href')).toEqual(pipeline.path);
expect(el.querySelectorAll('.stage-container').length).toEqual(2); expect(el.querySelectorAll('.stage-container').length).toEqual(2);
expect(el.querySelector('.js-ci-error')).toEqual(null); expect(el.querySelector('.js-ci-error')).toEqual(null);
expect(el.querySelector('.js-commit-link').getAttribute('href')).toEqual(pipeline.commit.commit_path); expect(el.querySelector('.js-commit-link').getAttribute('href')).toEqual(pipeline.commit.commit_path);
expect(el.querySelector('.js-commit-link').textContent).toContain(pipeline.commit.short_id); expect(el.querySelector('.js-commit-link').textContent).toContain(pipeline.commit.short_id);
expect(el.querySelector('.js-mr-coverage').textContent).toContain(`Coverage ${pipeline.coverage}%.`); expect(el.querySelector('.js-mr-coverage').textContent).toContain(`Coverage ${pipeline.coverage}%`);
}); });
it('should list single stage', (done) => { it('should list single stage', (done) => {
...@@ -95,7 +94,6 @@ describe('MRWidgetPipeline', () => { ...@@ -95,7 +94,6 @@ describe('MRWidgetPipeline', () => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelectorAll('.stage-container button').length).toEqual(1); expect(el.querySelectorAll('.stage-container button').length).toEqual(1);
expect(el.innerText).toContain('with stage');
done(); done();
}); });
}); });
......
spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js
View file @ 3a087a00
...@@ -22,15 +22,16 @@ describe('MRWidgetRelatedLinks', () => { ...@@ -22,15 +22,16 @@ describe('MRWidgetRelatedLinks', () => {
}); });
describe('computed', () => { describe('computed', () => {
const data = {
relatedLinks: {
closing: '/foo',
mentioned: '/foo',
assignToMe: '/foo',
},
};
describe('hasLinks', () => { describe('hasLinks', () => {
it('should return correct value when we have links reference', () => { it('should return correct value when we have links reference', () => {
const data = {
relatedLinks: {
closing: '/foo',
mentioned: '/foo',
assignToMe: '/foo',
},
};
const vm = createComponent(data); const vm = createComponent(data);
expect(vm.hasLinks).toBeTruthy(); expect(vm.hasLinks).toBeTruthy();
...@@ -44,44 +45,24 @@ describe('MRWidgetRelatedLinks', () => { ...@@ -44,44 +45,24 @@ describe('MRWidgetRelatedLinks', () => {
expect(vm.hasLinks).toBeFalsy(); expect(vm.hasLinks).toBeFalsy();
}); });
}); });
});
describe('methods', () => {
const data = {
relatedLinks: {
closing: '<a href="#">#23</a> and <a>#42</a>',
mentioned: '<a href="#">#7</a>',
},
};
const vm = createComponent(data);
describe('hasMultipleIssues', () => {
it('should return true if the given text has multiple issues', () => {
expect(vm.hasMultipleIssues(data.relatedLinks.closing)).toBeTruthy();
});
it('should return false if the given text has one issue', () => {
expect(vm.hasMultipleIssues(data.relatedLinks.mentioned)).toBeFalsy();
});
});
describe('issueLabel', () => { describe('closesText', () => {
it('should return true if the given text has multiple issues', () => { it('returns correct text for open merge request', () => {
expect(vm.issueLabel('closing')).toEqual('issues'); data.state = 'open';
}); const vm = createComponent(data);
expect(vm.closesText).toEqual('Closes');
it('should return false if the given text has one issue', () => {
expect(vm.issueLabel('mentioned')).toEqual('issue');
}); });
});
describe('verbLabel', () => { it('returns correct text for closed merge request', () => {
it('should return true if the given text has multiple issues', () => { data.state = 'closed';
expect(vm.verbLabel('closing')).toEqual('are'); const vm = createComponent(data);
expect(vm.closesText).toEqual('Did not close');
}); });
it('should return false if the given text has one issue', () => { it('returns correct tense for merged request', () => {
expect(vm.verbLabel('mentioned')).toEqual('is'); data.state = 'merged';
const vm = createComponent(data);
expect(vm.closesText).toEqual('Closed');
}); });
}); });
}); });
...@@ -95,8 +76,8 @@ describe('MRWidgetRelatedLinks', () => { ...@@ -95,8 +76,8 @@ describe('MRWidgetRelatedLinks', () => {
}); });
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim(); const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
expect(content).toContain('Closes issues #23 and #42'); expect(content).toContain('Closes #23 and #42');
expect(content).not.toContain('mentioned'); expect(content).not.toContain('Mentions');
}); });
it('should have only have mentioned issues text', () => { it('should have only have mentioned issues text', () => {
...@@ -106,8 +87,7 @@ describe('MRWidgetRelatedLinks', () => { ...@@ -106,8 +87,7 @@ describe('MRWidgetRelatedLinks', () => {
}, },
}); });
expect(vm.$el.innerText).toContain('issue #7'); expect(vm.$el.innerText).toContain('Mentions #7');
expect(vm.$el.innerText).toContain('is mentioned but will not be closed.');
expect(vm.$el.innerText).not.toContain('Closes'); expect(vm.$el.innerText).not.toContain('Closes');
}); });
...@@ -120,9 +100,8 @@ describe('MRWidgetRelatedLinks', () => { ...@@ -120,9 +100,8 @@ describe('MRWidgetRelatedLinks', () => {
}); });
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim(); const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
expect(content).toContain('Closes issue #7.'); expect(content).toContain('Closes #7');
expect(content).toContain('issues #23 and #42'); expect(content).toContain('Mentions #23 and #42');
expect(content).toContain('are mentioned but will not be closed.');
}); });
it('should have assing issues link', () => { it('should have assing issues link', () => {
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js
View file @ 3a087a00
...@@ -12,7 +12,7 @@ describe('MRWidgetArchived', () => { ...@@ -12,7 +12,7 @@ describe('MRWidgetArchived', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy(); expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy(); expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
expect(el.querySelector('button').disabled).toBeTruthy(); expect(el.querySelector('button').disabled).toBeTruthy();
expect(el.innerText).toContain('This project is archived, write access has been disabled.'); expect(el.innerText).toContain('This project is archived, write access has been disabled');
}); });
}); });
}); });
spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js
View file @ 3a087a00
...@@ -24,8 +24,8 @@ describe('MRWidgetAutoMergeFailed', () => { ...@@ -24,8 +24,8 @@ describe('MRWidgetAutoMergeFailed', () => {
it('should have correct elements', () => { it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy(); expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeFalsy();
expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically.'); expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically');
expect(vm.$el.innerText).toContain(mergeError); expect(vm.$el.innerText).toContain(mergeError);
}); });
}); });
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js
View file @ 3a087a00
...@@ -12,7 +12,7 @@ describe('MRWidgetChecking', () => { ...@@ -12,7 +12,7 @@ describe('MRWidgetChecking', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy(); expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy(); expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
expect(el.querySelector('button').disabled).toBeTruthy(); expect(el.querySelector('button').disabled).toBeTruthy();
expect(el.innerText).toContain('Checking ability to merge automatically.'); expect(el.innerText).toContain('Checking ability to merge automatically');
expect(el.querySelector('i')).toBeDefined(); expect(el.querySelector('i')).toBeDefined();
}); });
}); });
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
View file @ 3a087a00
...@@ -29,15 +29,16 @@ describe('MRWidgetConflicts', () => { ...@@ -29,15 +29,16 @@ describe('MRWidgetConflicts', () => {
describe('template', () => { describe('template', () => {
it('should have correct elements', () => { it('should have correct elements', () => {
const el = createComponent().$el; const el = createComponent().$el;
const resolveButton = el.querySelectorAll('.btn-group .btn')[0]; const resolveButton = el.querySelector('.js-resolve-conflicts-button');
const mergeLocallyButton = el.querySelectorAll('.btn-group .btn')[1]; const mergeButton = el.querySelector('.mr-widget-body .btn');
const mergeLocallyButton = el.querySelector('.js-merge-locally-button');
expect(el.textContent).toContain('There are merge conflicts.'); expect(el.textContent).toContain('There are merge conflicts');
expect(el.textContent).not.toContain('ask someone with write access'); expect(el.textContent).not.toContain('ask someone with write access');
expect(el.querySelector('.btn-success').disabled).toBeTruthy(); expect(el.querySelector('.btn-success').disabled).toBeTruthy();
expect(el.querySelectorAll('.btn-group .btn').length).toBe(2);
expect(resolveButton.textContent).toContain('Resolve conflicts'); expect(resolveButton.textContent).toContain('Resolve conflicts');
expect(resolveButton.getAttribute('href')).toEqual(path); expect(resolveButton.getAttribute('href')).toEqual(path);
expect(mergeButton.textContent).toContain('Merge');
expect(mergeLocallyButton.textContent).toContain('Merge locally'); expect(mergeLocallyButton.textContent).toContain('Merge locally');
}); });
...@@ -59,8 +60,8 @@ describe('MRWidgetConflicts', () => { ...@@ -59,8 +60,8 @@ describe('MRWidgetConflicts', () => {
it('should not have action buttons', (done) => { it('should not have action buttons', (done) => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$el.querySelectorAll('.btn').length).toBe(1); expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
expect(vm.$el.querySelector('a.js-resolve-conflicts-button')).toEqual(null); expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toEqual(null);
expect(vm.$el.querySelector('a.js-merge-locally-button')).toEqual(null); expect(vm.$el.querySelector('.js-merge-locally-button')).toEqual(null);
done(); done();
}); });
}); });
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
View file @ 3a087a00
...@@ -94,7 +94,7 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -94,7 +94,7 @@ describe('MRWidgetFailedToMerge', () => {
expect(el.querySelector('button').innerText).toContain('Merge'); expect(el.querySelector('button').innerText).toContain('Merge');
expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now'); expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now');
expect(el.querySelector('.js-refresh-label')).toEqual(null); expect(el.querySelector('.js-refresh-label')).toEqual(null);
expect(el.innerText).not.toContain('Refreshing now...'); expect(el.innerText).not.toContain('Refreshing now');
setTimeout(() => { setTimeout(() => {
expect(el.innerText).toContain('Refreshing in 9 seconds'); expect(el.innerText).toContain('Refreshing in 9 seconds');
done(); done();
...@@ -115,7 +115,7 @@ describe('MRWidgetFailedToMerge', () => { ...@@ -115,7 +115,7 @@ describe('MRWidgetFailedToMerge', () => {
vm.refresh(); vm.refresh();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.innerText).not.toContain('Merge failed. Refreshing'); expect(el.innerText).not.toContain('Merge failed. Refreshing');
expect(el.innerText).toContain('Refreshing now...'); expect(el.innerText).toContain('Refreshing now');
}); });
}); });
}); });
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
View file @ 3a087a00
...@@ -162,10 +162,10 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -162,10 +162,10 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
it('should have correct elements', () => { it('should have correct elements', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy(); expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds.'); expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds');
expect(el.innerText).toContain('The changes will be merged into'); expect(el.innerText).toContain('The changes will be merged into');
expect(el.innerText).toContain(targetBranch); expect(el.innerText).toContain(targetBranch);
expect(el.innerText).toContain('The source branch will not be removed.'); expect(el.innerText).toContain('The source branch will not be removed');
expect(el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge'); expect(el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge');
expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy(); expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch'); expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
...@@ -186,8 +186,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => { ...@@ -186,8 +186,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
Vue.nextTick(() => { Vue.nextTick(() => {
const normalizedText = el.innerText.replace(/\s+/g, ' '); const normalizedText = el.innerText.replace(/\s+/g, ' ');
expect(normalizedText).toContain('The source branch will be removed.'); expect(normalizedText).toContain('The source branch will be removed');
expect(normalizedText).not.toContain('The source branch will not be removed.'); expect(normalizedText).not.toContain('The source branch will not be removed');
done(); done();
}); });
}); });
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
View file @ 3a087a00
...@@ -142,19 +142,19 @@ describe('MRWidgetMerged', () => { ...@@ -142,19 +142,19 @@ describe('MRWidgetMerged', () => {
expect(el.querySelector('.js-mr-widget-author')).toBeDefined(); expect(el.querySelector('.js-mr-widget-author')).toBeDefined();
expect(el.innerText).toContain('The changes were merged into'); expect(el.innerText).toContain('The changes were merged into');
expect(el.innerText).toContain(targetBranch); expect(el.innerText).toContain(targetBranch);
expect(el.innerText).toContain('The source branch has been removed.'); expect(el.innerText).toContain('The source branch has been removed');
expect(el.innerText).toContain('Revert'); expect(el.innerText).toContain('Revert');
expect(el.innerText).toContain('Cherry-pick'); expect(el.innerText).toContain('Cherry-pick');
expect(el.innerText).not.toContain('You can remove source branch now.'); expect(el.innerText).not.toContain('You can remove source branch now');
expect(el.innerText).not.toContain('The source branch is being removed.'); expect(el.innerText).not.toContain('The source branch is being removed');
}); });
it('should not show source branch removed text', (done) => { it('should not show source branch removed text', (done) => {
vm.mr.sourceBranchRemoved = false; vm.mr.sourceBranchRemoved = false;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.innerText).toContain('You can remove source branch now.'); expect(el.innerText).toContain('You can remove source branch now');
expect(el.innerText).not.toContain('The source branch has been removed.'); expect(el.innerText).not.toContain('The source branch has been removed');
done(); done();
}); });
}); });
...@@ -164,9 +164,9 @@ describe('MRWidgetMerged', () => { ...@@ -164,9 +164,9 @@ describe('MRWidgetMerged', () => {
vm.mr.sourceBranchRemoved = false; vm.mr.sourceBranchRemoved = false;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.innerText).toContain('The source branch is being removed.'); expect(el.innerText).toContain('The source branch is being removed');
expect(el.innerText).not.toContain('You can remove source branch now.'); expect(el.innerText).not.toContain('You can remove source branch now');
expect(el.innerText).not.toContain('The source branch has been removed.'); expect(el.innerText).not.toContain('The source branch has been removed');
done(); done();
}); });
}); });
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
View file @ 3a087a00
...@@ -49,7 +49,7 @@ describe('MRWidgetMissingBranch', () => { ...@@ -49,7 +49,7 @@ describe('MRWidgetMissingBranch', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy(); expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy(); expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(content).toContain('source branch does not exist.'); expect(content).toContain('source branch does not exist.');
expect(content).toContain('Please restore the source branch or use a different source branch.'); expect(content).toContain('Please restore it or use a different source branch');
}); });
}); });
}); });
spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js
View file @ 3a087a00
...@@ -11,7 +11,7 @@ describe('MRWidgetNotAllowed', () => { ...@@ -11,7 +11,7 @@ describe('MRWidgetNotAllowed', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy(); expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(vm.$el.innerText).toContain('Ready to be merged automatically.'); expect(vm.$el.innerText).toContain('Ready to be merged automatically.');
expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request.'); expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request');
}); });
}); });
}); });
spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js
View file @ 3a087a00
...@@ -10,7 +10,7 @@ describe('MRWidgetPipelineBlocked', () => { ...@@ -10,7 +10,7 @@ describe('MRWidgetPipelineBlocked', () => {
it('should have correct elements', () => { it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy(); expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.'); expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed');
}); });
}); });
}); });
spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js
View file @ 3a087a00
...@@ -10,7 +10,7 @@ describe('MRWidgetPipelineFailed', () => { ...@@ -10,7 +10,7 @@ describe('MRWidgetPipelineFailed', () => {
it('should have correct elements', () => { it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy(); expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.'); expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure');
}); });
}); });
}); });
spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
View file @ 3a087a00
...@@ -72,7 +72,7 @@ describe('MRWidgetReadyToMerge', () => { ...@@ -72,7 +72,7 @@ describe('MRWidgetReadyToMerge', () => {
const withDesc = 'Include description in commit message'; const withDesc = 'Include description in commit message';
const withoutDesc = "Don't include description in commit message"; const withoutDesc = "Don't include description in commit message";
it('should return message wit description', () => { it('should return message with description', () => {
expect(vm.commitMessageLinkTitle).toEqual(withDesc); expect(vm.commitMessageLinkTitle).toEqual(withDesc);
}); });
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
View file @ 3a087a00
...@@ -10,7 +10,7 @@ describe('MRWidgetSHAMismatch', () => { ...@@ -10,7 +10,7 @@ describe('MRWidgetSHAMismatch', () => {
it('should have correct elements', () => { it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy(); expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging.'); expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging');
}); });
}); });
}); });
spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js
View file @ 3a087a00
...@@ -78,7 +78,7 @@ describe('MRWidgetWIP', () => { ...@@ -78,7 +78,7 @@ describe('MRWidgetWIP', () => {
it('should have correct elements', () => { it('should have correct elements', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy(); expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.innerText).toContain('This merge request is currently Work In Progress and therefore unable to merge'); expect(el.innerText).toContain('This is a Work in Progress');
expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy(); expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(el.querySelector('button').innerText).toContain('Merge'); expect(el.querySelector('button').innerText).toContain('Merge');
expect(el.querySelector('.js-remove-wip').innerText).toContain('Resolve WIP status'); expect(el.querySelector('.js-remove-wip').innerText).toContain('Resolve WIP status');
......
spec/javascripts/vue_mr_widget/mock_data.js
View file @ 3a087a00
...@@ -30,6 +30,7 @@ export default { ...@@ -30,6 +30,7 @@ export default {
"merge_user_id": null, "merge_user_id": null,
"merge_when_pipeline_succeeds": false, "merge_when_pipeline_succeeds": false,
"source_branch": "daaaa", "source_branch": "daaaa",
"source_branch_link": "daaaa",
"source_project_id": 19, "source_project_id": 19,
"target_branch": "master", "target_branch": "master",
"target_project_id": 19, "target_project_id": 19,
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7