Commit 4dd5bd4c authored by Phil Hughes's avatar Phil Hughes

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

33095 mr widget ui ee

See merge request !2389
parents 9567a1ee a5331438
......@@ -8,8 +8,8 @@ export default {
template: `
<a
:href="author.webUrl || author.web_url"
class="author-link"
:class="{ 'has-tooltip': showAuthorTooltip }"
class="author-link inline"
:v-tooltip="showAuthorTooltip"
:title="author.name">
<img
:src="author.avatarUrl || author.avatar_url"
......
/* global Flash */
import '~/lib/utils/datetime_utility';
import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
import MemoryUsage from './mr_widget_memory_usage';
import StatusIcon from './mr_widget_status_icon';
import MRWidgetService from '../services/mr_widget_service';
export default {
......@@ -13,11 +13,7 @@ export default {
},
components: {
'mr-widget-memory-usage': MemoryUsage,
},
computed: {
svg() {
return statusIconEntityMap.icon_status_success;
},
'status-icon': StatusIcon,
},
methods: {
formatDate(date) {
......@@ -51,51 +47,51 @@ export default {
},
},
template: `
<div class="mr-widget-heading">
<div class="mr-widget-heading deploy-heading">
<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">
<span class="js-icon-link icon-link">
<span class="ci-status-icon"
v-html="svg"
aria-hidden="true"></span>
<status-icon status="success" />
</span>
</div>
<span>
<span
v-if="hasDeploymentMeta(deployment)">
Deployed to
</span>
<a
v-if="hasDeploymentMeta(deployment)"
:href="deployment.url"
target="_blank"
rel="noopener noreferrer nofollow"
class="js-deploy-meta">
{{deployment.name}}
</a>
<span
v-if="hasExternalUrls(deployment)">
on
</span>
<a
v-if="hasExternalUrls(deployment)"
:href="deployment.external_url"
target="_blank"
rel="noopener noreferrer nofollow"
class="js-deploy-url">
<i
class="fa fa-external-link"
aria-hidden="true" />
{{deployment.external_url_formatted}}
</a>
<span
v-if="hasDeploymentTime(deployment)"
:data-title="deployment.deployed_at_formatted"
class="js-deploy-time"
data-toggle="tooltip"
data-placement="top">
{{formatDate(deployment.deployed_at)}}
<div class="media-body space-children">
<span>
<span
v-if="hasDeploymentMeta(deployment)">
Deployed to
</span>
<a
v-if="hasDeploymentMeta(deployment)"
:href="deployment.url"
target="_blank"
rel="noopener noreferrer nofollow"
class="js-deploy-meta inline">
{{deployment.name}}
</a>
<span
v-if="hasExternalUrls(deployment)">
on
</span>
<a
v-if="hasExternalUrls(deployment)"
:href="deployment.external_url"
target="_blank"
rel="noopener noreferrer nofollow"
class="js-deploy-url inline">
<i
class="fa fa-external-link"
aria-hidden="true" />
{{deployment.external_url_formatted}}
</a>
<span
v-if="hasDeploymentTime(deployment)"
:data-title="deployment.deployed_at_formatted"
class="js-deploy-time"
data-toggle="tooltip"
data-placement="top">
{{formatDate(deployment.deployed_at)}}
</span>
</span>
<button
type="button"
......@@ -104,13 +100,13 @@ export default {
class="btn btn-default btn-xs">
Stop environment
</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>
<mr-widget-memory-usage
v-if="deployment.metrics_url"
:metrics-url="deployment.metrics_url"
:metrics-monitoring-url="deployment.metrics_monitoring_url"
/>
</div>
</div>
`,
......
......@@ -35,12 +35,12 @@ export default {
<a
href="#modal_merge_info"
data-toggle="modal"
class="btn inline btn-grouped btn-sm">
class="btn inline btn-grouped">
Check out branch
</a>
<span class="dropdown inline prepend-left-5">
<span class="dropdown inline prepend-left-10">
<a
class="btn btn-sm dropdown-toggle"
class="btn dropdown-toggle"
data-toggle="dropdown"
aria-label="Download as"
role="button">
......
......@@ -120,13 +120,12 @@ export default {
},
template: `
<div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
<div class="legend"></div>
<p
v-if="shouldShowLoading"
class="usage-info js-usage-info usage-info-loading">
<i
class="fa fa-spinner fa-spin usage-info-load-spinner"
aria-hidden="true" />Loading deployment statistics.
aria-hidden="true" />Loading deployment statistics
</p>
<p
v-if="shouldShowMemoryGraph"
......@@ -136,12 +135,12 @@ export default {
<p
v-if="shouldShowLoadFailure"
class="usage-info js-usage-info usage-info-failed">
Failed to load deployment statistics.
Failed to load deployment statistics
</p>
<p
v-if="shouldShowMetricsUnavailable"
class="usage-info js-usage-info usage-info-unavailable">
Deployment statistics are not available currently.
Deployment statistics are not available currently
</p>
<mr-memory-graph
v-if="shouldShowMemoryGraph"
......
......@@ -16,7 +16,7 @@ export default {
<a
data-toggle="modal"
href="#modal_merge_info">
command line.
command line
</a>
</section>
`,
......
......@@ -44,71 +44,68 @@ export default {
},
template: `
<div class="mr-widget-heading">
<div class="ci-widget">
<div class="ci-widget media">
<template v-if="hasCIError">
<div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error">
<span class="js-icon-link icon-link">
<span
v-html="svg"
aria-hidden="true"></span>
</span>
<div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
<span
v-html="svg"
aria-hidden="true"></span>
</div>
<div class="media-body">
Could not connect to the CI server. Please check your settings and try again
</div>
<span>Could not connect to the CI server. Please check your settings and try again.</span>
</template>
<template v-else>
<div>
<div class="ci-status-icon append-right-10">
<a
class="icon-link"
:href="this.status.details_path">
<ci-icon :status="status" />
</a>
</div>
<span>
Pipeline
<a
:href="mr.pipeline.path"
class="pipeline-id">#{{mr.pipeline.id}}</a>
{{mr.pipeline.details.status.label}}
</span>
<span
v-if="mr.pipeline.details.stages.length > 0">
with {{stageText}}
</span>
<div class="mr-widget-pipeline-graph">
<div class="stage-cell">
<linked-pipelines-mini-list
v-if="triggeredBy.length"
:triggered-by="triggeredBy"
/>
<div class="media-body">
<span>
Pipeline
<a
:href="mr.pipeline.path"
class="pipeline-id">#{{mr.pipeline.id}}</a>
</span>
<span class="mr-widget-pipeline-graph">
<span class="stage-cell">
<linked-pipelines-mini-list
v-if="triggeredBy.length"
:triggered-by="triggeredBy"
/>
<div
v-if="mr.pipeline.details.stages.length > 0"
v-for="(stage, index) in mr.pipeline.details.stages"
class="stage-container dropdown js-mini-pipeline-graph"
:class="{
'has-downstream': index === mr.pipeline.details.stages.length - 1 && triggered.length
}">
<pipeline-stage :stage="stage" />
</div>
<div
v-if="mr.pipeline.details.stages.length > 0"
v-for="(stage, index) in mr.pipeline.details.stages"
class="stage-container dropdown js-mini-pipeline-graph"
:class="{
'has-downstream': index === mr.pipeline.details.stages.length - 1 && triggered.length
}">
<pipeline-stage :stage="stage" />
</div>
<linked-pipelines-mini-list
v-if="triggered.length"
:triggered="triggered"
/>
</div>
<linked-pipelines-mini-list
v-if="triggered.length"
:triggered="triggered"
/>
</span>
</span>
<span>
{{mr.pipeline.details.status.label}} 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>
</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>
</div>
</div>
......
......@@ -2,6 +2,7 @@ export default {
name: 'MRWidgetRelatedLinks',
props: {
relatedLinks: { type: Object, required: true },
state: { type: String },
},
computed: {
hasLinks() {
......@@ -10,29 +11,25 @@ export default {
},
},
methods: {
hasMultipleIssues(text) {
return !text ? false : text.match(/<\/a> and <a/);
},
issueLabel(field) {
return this.hasMultipleIssues(this.relatedLinks[field]) ? 'issues' : 'issue';
},
verbLabel(field) {
return this.hasMultipleIssues(this.relatedLinks[field]) ? 'are' : 'is';
closesText(state) {
if (state === 'merged') {
return 'Closed';
}
if (state === 'closed') {
return 'Did not close';
}
return 'Closes';
},
},
template: `
<section
v-if="hasLinks"
class="mr-info-list mr-links">
<div class="legend"></div>
<p v-if="relatedLinks.closing">
Closes {{issueLabel('closing')}}
<span v-html="relatedLinks.closing"></span>.
{{closesText(state)}} <span v-html="relatedLinks.closing"></span>
</p>
<p v-if="relatedLinks.mentioned">
<span class="capitalize">{{issueLabel('mentioned')}}</span>
<span v-html="relatedLinks.mentioned"></span>
{{verbLabel('mentioned')}} mentioned but will not be closed.
Mentions <span v-html="relatedLinks.mentioned"></span>
</p>
<p v-if="relatedLinks.assignToMe">
<span v-html="relatedLinks.assignToMe"></span>
......
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>
`,
};
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetArchived',
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
This project is archived, write access has been disabled.
</span>
<div class="mr-widget-body media">
<div class="space-children">
<status-icon status="failed" />
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
</div>
<div class="media-body">
<span class="bold">
This project is archived, write access has been disabled
</span>
</div>
</div>
`,
};
import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetAutoMergeFailed',
......@@ -10,6 +11,9 @@ export default {
isRefreshing: false,
};
},
components: {
statusIcon,
},
methods: {
refreshWidget() {
this.isRefreshing = true;
......@@ -19,18 +23,16 @@ export default {
},
},
template: `
<div class="mr-widget-body">
<button
class="btn btn-success btn-small"
disabled="true"
type="button">
Merge
</button>
<span class="bold danger">
This merge request failed to be merged automatically.
<div class="mr-widget-body media">
<status-icon status="failed" />
<div class="media-body space-children">
<span class="bold">
<template v-if="mr.mergeError">{{mr.mergeError}}.</template>
This merge request failed to be merged automatically
</span>
<button
@click="refreshWidget"
:class="{ disabled: isRefreshing }"
:disabled="isRefreshing"
type="button"
class="btn btn-xs btn-default">
<i
......@@ -39,9 +41,6 @@ export default {
aria-hidden="true" />
Refresh
</button>
</span>
<div class="merge-error-text danger bold">
{{mr.mergeError}}
</div>
</div>
`,
......
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetChecking',
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
Checking ability to merge automatically.
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
</span>
<div class="mr-widget-body media">
<status-icon status="loading" showDisabledButton />
<div class="media-body space-children">
<span class="bold">
Checking ability to merge automatically
</span>
</div>
</div>
`,
};
import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetClosed',
......@@ -7,24 +8,28 @@ export default {
},
components: {
'mr-widget-author-and-time': mrWidgetAuthorTime,
statusIcon,
},
template: `
<div class="mr-widget-body">
<mr-widget-author-and-time
actionText="Closed by"
:author="mr.closedBy"
:dateTitle="mr.updatedAt"
:dateReadable="mr.closedAt"
/>
<section>
<p>
The changes were not merged into
<a
:href="mr.targetBranchPath"
class="label-branch">
{{mr.targetBranch}}</a>.
</p>
</section>
<div class="mr-widget-body media">
<status-icon status="failed" />
<div class="media-body">
<mr-widget-author-and-time
actionText="Closed by"
:author="mr.closedBy"
:dateTitle="mr.updatedAt"
:dateReadable="mr.closedAt"
/>
<section class="mr-info-list">
<p>
The changes were not merged into
<a
:href="mr.targetBranchPath"
class="label-branch">
{{mr.targetBranch}}</a>
</p>
</section>
</div>
</div>
`,
};
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetConflicts',
props: {
mr: { type: Object, required: true },
},
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
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.
<div class="mr-widget-body media">
<status-icon status="failed" showDisabledButton />
<div class="media-body space-children">
<span class="bold">
There are merge conflicts<span v-if="!mr.canMerge">.</span>
<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
v-if="mr.conflictResolutionPath"
v-if="mr.canMerge && mr.conflictResolutionPath"
:href="mr.conflictResolutionPath"
class="btn btn-default btn-xs js-resolve-conflicts-button">
Resolve conflicts
......
import statusIcon from '../mr_widget_status_icon';
import eventHub from '../../event_hub';
export default {
......@@ -38,39 +39,40 @@ export default {
}
},
},
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
class="btn btn-success btn-small"
disabled="true"
type="button">
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...
<div class="mr-widget-body media">
<template v-if="isRefreshing">
<status-icon status="loading" />
<span class="media-body bold js-refresh-label">
Refreshing now
</span>
<button
@click="refresh"
class="btn btn-default btn-xs js-refresh-button"
type="button">
Refresh now
</button>
</span>
<span
v-if="isRefreshing"
class="bold js-refresh-label">
Refreshing now...
</span>
</template>
<template v-else>
<status-icon status="failed" showDisabledButton />
<div class="media-body space-children">
<span class="bold">
<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
@click="refresh"
class="btn btn-default btn-xs js-refresh-button"
type="button">
Refresh now
</button>
</div>
</template>
</div>
`,
};
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetLocked',
props: {
mr: { type: Object, required: true },
},
components: {
statusIcon,
},
template: `
<div class="mr-widget-body mr-state-locked">
<span class="state-label">Locked</span>
This merge request is in the process of being merged, during which time it is locked and cannot be closed.
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
<section class="mr-info-list mr-links">
<div class="legend"></div>
<p>
The changes will be merged into
<span class="label-branch">
<a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
</span>.
</p>
</section>
<div class="mr-widget-body mr-state-locked media">
<status-icon status="loading" />
<div class="media-body">
<h4>
This merge request is in the process of being merged, during which time it is locked and cannot be closed
</h4>
<section class="mr-info-list">
<p>
The changes will be merged into
<span class="label-branch">
<a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
</span>
</p>
</section>
</div>
</div>
`,
};
/* global Flash */
import statusIcon from '../mr_widget_status_icon';
import MRWidgetAuthor from '../../components/mr_widget_author';
import eventHub from '../../event_hub';
......@@ -11,6 +11,7 @@ export default {
},
components: {
'mr-widget-author': MRWidgetAuthor,
statusIcon,
},
data() {
return {
......@@ -61,56 +62,56 @@ export default {
},
},
template: `
<div class="mr-widget-body">
<h4>
Set by
<mr-widget-author :author="mr.setToMWPSBy" />
to be merged automatically when the pipeline succeeds.
<a
v-if="mr.canCancelAutomaticMerge"
@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.
<div class="mr-widget-body media">
<status-icon status="success" />
<div class="media-body">
<h4>
Set by
<mr-widget-author :author="mr.setToMWPSBy" />
to be merged automatically when the pipeline succeeds
<a
v-if="canRemoveSourceBranch"
:disabled="isRemovingSourceBranch"
@click.prevent="removeSourceBranch"
v-if="mr.canCancelAutomaticMerge"
@click.prevent="cancelAutomaticMerge"
:disabled="isCancellingAutoMerge"
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
v-if="isRemovingSourceBranch"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Remove source branch
v-if="isCancellingAutoMerge"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Cancel automatic merge
</a>
</p>
</section>
</h4>
<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>
`,
};
/* global Flash */
import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
import statusIcon from '../mr_widget_status_icon';
import eventHub from '../../event_hub';
export default {
......@@ -11,6 +12,7 @@ export default {
},
components: {
'mr-widget-author-and-time': mrWidgetAuthorTime,
statusIcon,
},
data() {
return {
......@@ -55,75 +57,73 @@ export default {
},
},
template: `
<div class="mr-widget-body">
<mr-widget-author-and-time
actionText="Merged by"
:author="mr.mergedBy"
:dateTitle="mr.updatedAt"
:dateReadable="mr.mergedAt" />
<section class="mr-info-list">
<div class="legend"></div>
<p>
The changes were merged into
<span class="label-branch">
<a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
</span>
</p>
<p v-if="mr.sourceBranchRemoved">The source branch has been removed.</p>
<p v-if="shouldShowRemoveSourceBranch">
You can remove source branch now.
<button
@click="removeSourceBranch"
:class="{ disabled: isMakingRequest }"
type="button"
class="btn btn-xs btn-default js-remove-branch-button">
Remove Source Branch
</button>
</p>
<p v-if="shouldShowSourceBranchRemoving">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
The source branch is being removed.
</p>
</section>
<div
v-if="shouldShowMergedButtons"
class="merged-buttons clearfix">
<a
v-if="mr.canRevertInCurrentMR"
class="btn btn-close btn-sm has-tooltip"
href="#modal-revert-commit"
data-toggle="modal"
data-container="body"
title="Revert this merge request in a new merge request">
Revert
</a>
<a
v-else-if="mr.revertInForkPath"
class="btn btn-close btn-sm has-tooltip"
data-method="post"
:href="mr.revertInForkPath"
title="Revert this merge request in a new merge request">
Revert
</a>
<a
v-if="mr.canCherryPickInCurrentMR"
class="btn btn-default btn-sm has-tooltip"
href="#modal-cherry-pick-commit"
data-toggle="modal"
data-container="body"
title="Cherry-pick this merge request in a new merge request">
Cherry-pick
</a>
<a
v-else-if="mr.cherryPickInForkPath"
class="btn btn-default btn-sm has-tooltip"
data-method="post"
:href="mr.cherryPickInForkPath"
title="Cherry-pick this merge request in a new merge request">
Cherry-pick
</a>
<div class="mr-widget-body media">
<status-icon status="success" />
<div class="media-body">
<div class="space-children">
<mr-widget-author-and-time
actionText="Merged by"
:author="mr.mergedBy"
:dateTitle="mr.updatedAt"
:dateReadable="mr.mergedAt" />
<a
v-if="mr.canRevertInCurrentMR"
class="btn btn-close btn-xs has-tooltip"
href="#modal-revert-commit"
data-toggle="modal"
data-container="body"
title="Revert this merge request in a new merge request">
Revert
</a>
<a
v-else-if="mr.revertInForkPath"
class="btn btn-close btn-xs has-tooltip"
data-method="post"
:href="mr.revertInForkPath"
title="Revert this merge request in a new merge request">
Revert
</a>
<a
v-if="mr.canCherryPickInCurrentMR"
class="btn btn-default btn-xs has-tooltip"
href="#modal-cherry-pick-commit"
data-toggle="modal"
data-container="body"
title="Cherry-pick this merge request in a new merge request">
Cherry-pick
</a>
<a
v-else-if="mr.cherryPickInForkPath"
class="btn btn-default btn-xs has-tooltip"
data-method="post"
:href="mr.cherryPickInForkPath"
title="Cherry-pick this merge request in a new merge request">
Cherry-pick
</a>
</div>
<section class="mr-info-list">
<p>
The changes were merged into
<span class="label-branch">
<a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
</span>
</p>
<p v-if="mr.sourceBranchRemoved">The source branch has been removed</p>
<p v-if="shouldShowRemoveSourceBranch" class="space-children">
<span>You can remove source branch now</span>
<button
@click="removeSourceBranch"
:class="{ disabled: isMakingRequest }"
type="button"
class="btn btn-xs btn-default js-remove-branch-button">
Remove Source Branch
</button>
</p>
<p v-if="shouldShowSourceBranchRemoving">
<status-icon status="loading" />
<span>The source branch is being removed</span>
</p>
</section>
</div>
</div>
`,
......
import statusIcon from '../mr_widget_status_icon';
import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
export default {
......@@ -7,28 +8,30 @@ export default {
},
components: {
'mr-widget-merge-help': mrWidgetMergeHelp,
statusIcon,
},
computed: {
missingBranchName() {
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: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold js-branch-text">
<span class="capitalize">
{{missingBranchName}}
</span> branch does not exist.
Please restore the {{missingBranchName}} branch or use a different {{missingBranchName}} branch.
</span>
<mr-widget-merge-help
:missing-branch="missingBranchName" />
<div class="mr-widget-body media">
<status-icon status="failed" showDisabledButton />
<div class="media-body space-children">
<span class="bold js-branch-text">
<span class="capitalize">
{{missingBranchName}}
</span> branch does not exist.
Please restore it or use a different {{missingBranchName}} branch
<i
class="fa fa-question-circle has-tooltip"
:title="message" />
</span>
</div>
</div>
`,
};
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetNotAllowed',
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
Ready to be merged automatically.
Ask someone with write access to this repository to merge this request.
</span>
<div class="mr-widget-body media">
<status-icon status="success" showDisabledButton />
<div class="media-body space-children">
<span class="bold">
Ready to be merged automatically.
Ask someone with write access to this repository to merge this request
</span>
</div>
</div>
`,
};
......@@ -12,7 +12,7 @@ export default {
return { emptyStateSVG };
},
template: `
<div class="mr-widget-body empty-state">
<div class="mr-widget-body mr-widget-empty-state">
<div class="row">
<div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
<span v-html="emptyStateSVG"></span>
......@@ -29,12 +29,14 @@ export default {
Currently there are no changes in this merge request's source branch.
Please push new commits or use a different branch.
</p>
<a
v-if="mr.newBlobPath"
:href="mr.newBlobPath"
class="btn btn-inverted btn-save">
Create file
</a>
<div>
<a
v-if="mr.newBlobPath"
:href="mr.newBlobPath"
class="btn btn-inverted btn-save">
Create file
</a>
</div>
</div>
</div>
</div>
......
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetPipelineBlocked',
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.
</span>
<div class="mr-widget-body media">
<status-icon status="failed" showDisabledButton />
<div class="media-body space-children">
<span class="bold">
Pipeline blocked. The pipeline for this merge request requires a manual action to proceed
</span>
</div>
</div>
`,
};
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetPipelineBlocked',
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
class="btn btn-success btn-small"
disabled="true"
type="button">
Merge
</button>
<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 class="mr-widget-body media">
<status-icon status="failed" showDisabledButton />
<div class="media-body space-children">
<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>
`,
};
/* global Flash */
import successSvg from 'icons/_icon_status_success.svg';
import warningSvg from 'icons/_icon_status_warning.svg';
import simplePoll from '~/lib/utils/simple_poll';
import statusIcon from '../mr_widget_status_icon';
import eventHub from '../../event_hub';
export default {
......@@ -25,6 +25,9 @@ export default {
warningSvg,
};
},
components: {
statusIcon,
},
computed: {
commitMessageLinkTitle() {
const withDesc = 'Include description in commit message';
......@@ -200,90 +203,103 @@ export default {
},
},
template: `
<div class="mr-widget-body">
<span class="btn-group">
<button
@click="handleMergeButtonClick()"
:disabled="isMergeButtonDisabled"
:class="mergeButtonClass"
type="button">
<i
v-if="isMakingRequest"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
{{mergeButtonText}}
</button>
<button
v-if="shouldShowMergeOptionsDropdown"
:disabled="isMergeButtonDisabled"
type="button"
class="btn btn-small btn-info dropdown-toggle"
data-toggle="dropdown">
<i
class="fa fa-caret-down"
aria-hidden="true" />
<span class="sr-only">
Select merge moment
<div class="mr-widget-body media">
<status-icon status="success" />
<div class="media-body">
<div class="media space-children">
<span class="btn-group">
<button
@click="handleMergeButtonClick()"
:disabled="isMergeButtonDisabled"
:class="mergeButtonClass"
type="button">
<i
v-if="isMakingRequest"
class="fa fa-spinner fa-spin"
aria-hidden="true" />
{{mergeButtonText}}
</button>
<button
v-if="shouldShowMergeOptionsDropdown"
:disabled="isMergeButtonDisabled"
type="button"
class="btn btn-small btn-info dropdown-toggle js-merge-moment"
data-toggle="dropdown"
aria-label="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>
</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
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>
<div class="media-body space-children">
<template v-if="isMergeAllowed()">
<label>
<input
id="remove-source-branch-input"
v-model="removeSourceBranch"
:disabled="isRemoveSourceBranchButtonDisabled"
type="checkbox"/> Remove source branch
</label>
<!-- Placeholder for EE extension of this component -->
<squash-before-merge
v-if="shouldShowSquashBeforeMerge"
:mr="mr"
:is-merge-button-disabled="isMergeButtonDisabled" />
<span v-if="mr.ffOnlyEnabled">
Fast-forward merge without a merge commit
</span>
<span v-else>
<button
@click="toggleCommitMessageEditor"
:disabled="isMergeButtonDisabled"
class="btn btn-default btn-xs"
type="button">
Modify commit message
</button>
</span>
<!-- Placeholder for EE extension of this component -->
<squash-before-merge
v-if="shouldShowSquashBeforeMerge"
:mr="mr"
:is-merge-button-disabled="isMergeButtonDisabled" />
<span v-if="mr.ffOnlyEnabled">
Fast-forward merge without a merge commit
</span>
<span v-else>
<button
@click="toggleCommitMessageEditor"
:disabled="isMergeButtonDisabled"
class="btn btn-default btn-xs"
type="button">
Modify commit message
</button>
</span>
</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
v-if="showCommitMessageEditor"
class="prepend-top-default commit-message-editor">
......@@ -303,7 +319,7 @@ export default {
rows="14"
name="Commit message"></textarea>
</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">
<a
@click.prevent="updateCommitMessage"
......@@ -312,12 +328,7 @@ export default {
</div>
</div>
</div>
</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>
`,
};
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetSHAMismatch',
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
The source branch HEAD has recently changed. Please reload the page and review the changes before merging.
</span>
<div class="mr-widget-body media">
<status-icon status="failed" showDisabledButton />
<div class="media-body space-children">
<span class="bold">
The source branch HEAD has recently changed. Please reload the page and review the changes before merging
</span>
</div>
</div>
`,
};
import statusIcon from '../mr_widget_status_icon';
export default {
name: 'MRWidgetUnresolvedDiscussions',
props: {
mr: { type: Object, required: true },
},
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
There are unresolved discussions. Please resolve these discussions
<span v-if="mr.canCreateIssue">or</span>
<span v-else>.</span>
</span>
<a
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 class="mr-widget-body media">
<status-icon status="failed" showDisabledButton />
<div class="media-body space-children">
<span class="bold">
There are unresolved discussions. Please resolve these discussions
</span>
<a
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>
`,
};
/* global Flash */
import statusIcon from '../mr_widget_status_icon';
import eventHub from '../../event_hub';
export default {
......@@ -28,21 +29,21 @@ export default {
});
},
},
components: {
statusIcon,
},
template: `
<div class="mr-widget-body">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge</button>
<span class="bold">
This merge request is currently Work In Progress and therefore unable to merge
</span>
<template v-if="mr.removeWIPPath">
<i
class="fa fa-question-circle has-tooltip"
title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged." />
<div class="mr-widget-body media">
<status-icon status="failed" :showDisabledButton="Boolean(mr.removeWIPPath)" />
<div class="media-body space-children">
<span class="bold">
This is a Work in Progress
<i
class="fa fa-question-circle has-tooltip"
title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged." />
</span>
<button
v-if="mr.removeWIPPath"
@click="removeWIP"
:disabled="isMakingRequest"
type="button"
......@@ -53,7 +54,7 @@ export default {
aria-hidden="true" />
Resolve WIP status
</button>
</template>
</div>
</div>
`,
};
......@@ -35,8 +35,13 @@ import {
export default {
el: '#js-vue-mr-widget',
name: 'MRWidget',
props: {
mrData: {
type: Object,
},
},
data() {
const store = new MRWidgetStore(gl.mrWidgetData);
const store = new MRWidgetStore(this.mrData || window.gl.mrWidgetData);
const service = this.createService(store);
return {
mr: store,
......@@ -232,14 +237,19 @@ export default {
v-if="shouldRenderDeployments"
:mr="mr"
:service="service" />
<component
:is="componentName"
:mr="mr"
:service="service" />
<mr-widget-related-links
v-if="shouldRenderRelatedLinks"
:related-links="mr.relatedLinks" />
<mr-widget-merge-help v-if="shouldRenderMergeHelp" />
<div class="mr-widget-section">
<component
:is="componentName"
:mr="mr"
:service="service" />
<mr-widget-related-links
v-if="shouldRenderRelatedLinks"
:state="mr.state"
:related-links="mr.relatedLinks" />
</div>
<div class="mr-widget-footer" v-if="shouldRenderMergeHelp">
<mr-widget-merge-help />
</div>
</div>
`,
};
......@@ -3,7 +3,6 @@
@import 'framework/tw_bootstrap_variables';
@import 'framework/tw_bootstrap';
@import "framework/layout";
@import "framework/animations";
@import "framework/avatar";
@import "framework/asciidoctor";
......@@ -26,8 +25,10 @@
@import "framework/lists";
@import "framework/logo";
@import "framework/markdown_area";
@import "framework/media_object";
@import "framework/mobile";
@import "framework/modal";
@import "framework/media_object";
@import "framework/nav";
@import "framework/pagination";
@import "framework/panels";
......
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}
......@@ -2,10 +2,38 @@
* MR -> show: Automerge widget
*
*/
$status-icon-size: 22px;
$status-icon-margin: $gl-btn-padding;
.space-children {
@include clearfix;
> * {
float: left;
}
> *:not(:last-child) {
margin-right: 10px;
}
}
.mr-state-widget {
color: $gl-text-color;
border: 1px solid $border-color;
border-radius: 2px;
line-height: 28px;
.mr-widget-heading,
.mr-widget-section,
.mr-widget-footer {
padding: 16px;
border-top: solid 1px $border-color;
}
.mr-widget-footer {
padding: 0;
}
form {
margin-bottom: 0;
......@@ -15,15 +43,37 @@
}
}
label {
margin-bottom: 0;
}
.btn {
font-size: 14px;
&[disabled] {
opacity: 0.3;
}
&.btn-xs {
line-height: 1;
padding: 5px 10px;
margin-top: 1px;
}
&.dropdown-toggle {
padding: 4px 10px;
.fa {
color: inherit;
}
}
}
.accept-merge-holder {
.accept-action {
display: inline-block;
float: left;
.btn-success.dropdown-toggle .fa {
color: inherit;
}
.accept-merge-request {
&.ci-pending,
&.ci-running {
......@@ -40,7 +90,6 @@
}
.accept-control {
display: inline-block;
float: left;
margin: 0;
margin-left: 20px;
......@@ -84,77 +133,64 @@
.ci-widget {
color: $gl-text-color;
display: -webkit-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) {
flex-wrap: wrap;
}
}
.icon-link > .ci-status-icon > svg {
width: 22px;
height: 22px;
margin-right: 8px;
}
.mr-widget-icon {
font-size: 22px;
margin-right: $status-icon-margin;
}
.ci-error {
margin-right: $btn-side-margin;
}
.ci-status-icon svg {
width: $status-icon-size;
height: $status-icon-size;
margin: 3px 0;
position: relative;
overflow: visible;
display: block;
}
.mr-widget-body,
.mr-widget-footer {
margin: 16px;
.mr-widget-body {
@include clearfix;
&.media > *:first-child {
margin-right: 10px;
}
}
.mr-widget-pipeline-graph {
flex-shrink: 0;
padding: 0 4px;
.dropdown-menu {
margin-top: 11px;
z-index: 300;
}
.ci-action-icon-wrapper {
line-height: 16px;
}
}
@media (max-width: $screen-xs-max) {
order: 1;
margin-top: $gl-padding-top;
border-radius: 3px;
background-color: $white-light;
border: 1px solid $gray-darker;
width: 100%;
text-align: center;
.mini-pipeline-graph-dropdown-toggle {
vertical-align: top;
}
.dropdown-menu {
margin-left: -97.5px;
}
.mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
display: flex;
align-items: center;
.arrow-up::before,
.arrow-up::after, {
margin-left: 97.5px;
}
.ci-status-text,
.ci-status-icon {
top: 0;
margin-right: 10px;
}
}
.normal {
color: $gl-text-color;
font-size: 15px;
line-height: 28px;
}
.capitalize {
......@@ -165,7 +201,7 @@
@extend .ref-name;
color: $gl-text-color;
font-weight: bold;
font-weight: 600;
overflow: hidden;
margin: 0 3px;
word-break: break-all;
......@@ -189,52 +225,19 @@
}
}
.js-deployment-link {
display: inline-block;
}
.mr-widget-help {
margin: $gl-padding;
color: $ci-skipped-color;
}
.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;
}
}
padding: 10px 16px 10px 48px;
font-style: italic;
}
.mr-widget-body {
h4 {
font-weight: bold;
font-size: 15px;
margin: 5px 0;
color: $gl-text-color;
float: left;
font-weight: 600;
font-size: 14px;
line-height: inherit;
margin-top: 0;
margin-bottom: 0;
&.has-conflicts .fa-exclamation-triangle {
color: $gl-warning;
......@@ -255,18 +258,16 @@
}
.spacing {
margin: 0 $gl-padding;
margin: 0 0 0 10px;
}
.bold {
font-weight: bold;
font-size: 15px;
font-weight: 600;
color: $gl-gray-light;
}
.state-label {
font-size: 16px;
font-weight: bold;
font-weight: 600;
padding-right: 10px;
}
......@@ -274,16 +275,6 @@
color: $gl-danger;
}
.mr-widget-help {
margin: $gl-padding 0;
}
.with-button {
position: relative;
top: 6px;
margin-bottom: 24px;
}
.spacing,
.bold {
vertical-align: middle;
......@@ -316,34 +307,15 @@
}
}
.has-error-message + .has-custom-error {
margin-left: 0;
}
.has-custom-error {
display: inline-block;
margin-left: 70px;
}
.merge-error-text {
margin-left: 70px;
}
@media (max-width: $screen-xs-max) {
h4 {
font-size: 14px;
}
p {
font-size: 13px;
}
.btn,
.btn-group,
.accept-action {
margin-bottom: 4px;
}
.btn-grouped {
float: none;
margin-right: 0;
......@@ -351,13 +323,6 @@
.accept-action {
width: 100%;
text-align: center;
}
.accept-control {
width: 100%;
text-align: center;
margin: 0;
}
}
......@@ -367,19 +332,16 @@
}
}
&.mr-state-locked .mr-info-list {
margin-top: 10px;
margin-left: 12px;
}
&.mr-widget-empty-state {
line-height: 20px;
&.empty-state {
.artwork {
margin-bottom: $gl-padding;
}
.text {
span {
font-weight: bold;
font-weight: 600;
}
p {
......@@ -389,10 +351,6 @@
}
}
.mr-widget-footer {
border-top: 1px solid $gray-darker;
}
.ci-coverage {
float: right;
}
......@@ -407,12 +365,6 @@
}
}
.mr-state-widget .mr-widget-body {
.approve-btn {
margin-right: 5px;
}
}
.mr_source_commit,
.mr_target_commit {
margin-bottom: 0;
......@@ -497,8 +449,6 @@
}
.btn-clipboard {
@extend .pull-right;
margin-right: 20px;
margin-top: 5px;
position: absolute;
......@@ -506,56 +456,29 @@
}
}
.mr-links {
padding-left: $status-icon-size + $status-icon-margin;
}
.mr-info-list {
clear: left;
position: relative;
margin: 10px 0 $gl-padding 12px;
padding-top: 4px;
p {
margin: 6px 0;
margin: 0;
position: relative;
padding-left: 15px;
&::before {
content: '';
position: absolute;
border-top: 2px solid $border-color;
height: 1px;
top: 9px;
width: 8px;
left: 0;
}
padding: 4px 0;
&: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 {
.legend {
height: 65%;
top: 0;
@media (max-width: $screen-xs-max) {
height: 20px;
}
}
p {
float: left;
padding-left: 21px;
&::before {
top: 13px;
}
}
.memory-graph-container {
......@@ -566,11 +489,17 @@
.mr-source-target {
background-color: $gray-light;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid $border-color;
padding: 0 $gl-padding;
margin-bottom: 6px;
line-height: 44px;
border-radius: $border-radius-default $border-radius-default 0 0;
padding: $gl-padding-top $gl-padding;
.pull-right {
margin-top: -2px;
}
.btn-clipboard {
margin-left: 0;
padding-left: 0;
}
.dropdown-toggle .fa {
color: $gl-text-color;
......@@ -679,14 +608,8 @@
}
.merged-buttons {
margin-top: 20px;
.btn {
float: left;
&:not(:last-child) {
margin-right: 10px;
}
}
}
......@@ -807,24 +730,9 @@
border-top: 1px solid $well-inner-border;
}
.approvals-body {
@media (max-width: $screen-xs-max) {
text-align: center;
}
}
.approvals-footer {
display: flex;
.legend {
height: 16px;
top: 0;
}
.approvers-prefix::before {
top: 10px;
}
.approvers-prefix,
.approvers-list {
display: flex;
......@@ -866,51 +774,33 @@
}
.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 {
margin-right: 10px;
font-size: 16px;
}
}
@media (max-width: $screen-md-min) {
.mr-info-list.mr-memory-usage .legend {
height: 80%;
}
}
.mr-widget-icon {
font-size: 22px;
margin: 0 10px 0 0;
}
.mr-widget-code-quality {
padding-top: $gl-padding-top;
.padding-left {
padding-left: $gl-padding;
}
.ci-status-icon {
vertical-align: sub;
svg {
width: 22px;
height: 22px;
margin-right: 4px;
}
}
.code-quality-container {
border-top: 1px solid $gray-darker;
border-bottom: 1px solid $gray-darker;
padding: $gl-padding-top;
background-color: $gray-light;
margin: 4px -16px 0;
.mr-widget-code-quality-list {
list-style: none;
padding: 0 36px;
padding: 4px 36px;
margin: 0;
line-height: $code_line_height;
li.success {
color: $green-500;
......
......@@ -247,7 +247,11 @@
position: relative;
vertical-align: middle;
height: 22px;
margin: 3px 6px 3px 0;
margin: 3px 0;
+ .stage-container {
margin-left: 6px;
}
// Hack to show a button tooltip inline
button.has-tooltip + .tooltip {
......
---
title: clean up merge request widget UI
merge_request:
author:
......@@ -70,7 +70,7 @@ export default {
},
},
template: `
<div class="approvals-body">
<div class="approvals-body space-children">
<span v-if="showApproveButton" class="approvals-approve-button-wrap">
<button
:disabled="approving"
......
......@@ -65,8 +65,7 @@ export default {
},
template: `
<div v-if="approvedBy.length" class="approved-by-users approvals-footer clearfix mr-info-list">
<div class="legend"></div>
<div class="approvers-prefix">
<div class="approvers-prefix space-children">
<p>Approved by</p>
<div class="approvers-list">
<span v-for="approver in approvedBy">
......@@ -89,7 +88,7 @@ export default {
<button
:disabled="unapproving"
@click="unapproveMergeRequest"
class="btn btn-sm">
class="btn btn-xs">
<i
v-if="unapproving"
class="fa fa-spinner fa-spin"
......
/* global Flash */
import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
import ApprovalsBody from './approvals_body';
import ApprovalsFooter from './approvals_footer';
......@@ -23,6 +24,15 @@ export default {
components: {
'approvals-body': ApprovalsBody,
'approvals-footer': ApprovalsFooter,
statusIcon,
},
computed: {
status() {
if (this.mr.approvals.approvals_left > 0) {
return 'failed';
}
return 'success';
},
},
created() {
const flashErrorMessage = 'An error occured while retrieving approval data for this merge request.';
......@@ -37,18 +47,23 @@ export default {
template: `
<div
v-if="mr.approvalsRequired"
class="mr-widget-approvals-container mr-widget-body">
class="mr-widget-approvals-container mr-widget-body mr-widget-section media">
<div
v-if="fetchingApprovals"
class="mr-widget-icon">
<i class="fa fa-spinner fa-spin" />
</div>
<status-icon v-else :status="status" />
<div
v-show="fetchingApprovals"
class="mr-approvals-loading-state">
<span class="approvals-loading-text bold">
Checking approval status for this merge request.
class="mr-approvals-loading-state media-body">
<span class="approvals-loading-text">
Checking approval status
</span>
<i class="fa fa-spinner fa-spin" />
</div>
<div
v-if="!fetchingApprovals"
class="approvals-components">
class="approvals-components media-body">
<approvals-body
:mr="mr"
:service="service"
......
<script>
import successIcon from 'icons/_icon_status_success.svg';
import errorIcon from 'icons/_icon_status_failed.svg';
import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import '~/lib/utils/text_utility';
import issuesBlock from './mr_widget_code_quality_issues.vue';
......@@ -22,6 +21,7 @@ export default {
components: {
issuesBlock,
loadingIcon,
statusIcon,
},
data() {
......@@ -34,8 +34,11 @@ export default {
},
computed: {
stateIcon() {
return this.mr.codeclimateMetrics.newIssues.length ? errorIcon : successIcon;
status() {
if (this.loadingFailed || this.mr.codeclimateMetrics.newIssues.length) {
return 'failed';
}
return 'success';
},
hasNoneIssues() {
......@@ -55,7 +58,7 @@ export default {
let text = [];
if (this.hasNoneIssues) {
text.push('No changes to code quality.');
text.push('No changes to code quality');
} else if (this.hasIssues) {
if (newIssues.length) {
newIssuesText = ` degraded on ${newIssues.length} ${this.pointsText(newIssues)}`;
......@@ -79,8 +82,6 @@ export default {
if (newIssuesText) {
text.push(newIssuesText);
}
text.push('.');
}
return text.join('');
......@@ -128,61 +129,66 @@ export default {
};
</script>
<template>
<section class="mr-widget-code-quality">
<section class="mr-widget-code-quality mr-widget-section">
<div
v-if="isLoading"
class="padding-left">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true">
</i>
Loading codeclimate report.
class="media">
<div class="mr-widget-icon">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true">
</i>
</div>
<div class="media-body">
Loading codeclimate report
</div>
</div>
<div v-else-if="!isLoading && !loadingFailed">
<span
class="padding-left ci-status-icon"
:class="{
'ci-status-icon-failed': mr.codeclimateMetrics.newIssues.length,
'ci-status-icon-passed': mr.codeclimateMetrics.newIssues.length === 0
}"
v-html="stateIcon">
</span>
<span>
{{codeText}}
</span>
<button
type="button"
class="btn-link btn-blank"
v-if="hasIssues"
@click="toggleCollapsed">
{{collapseText}}
</button>
<div
class="code-quality-container"
v-if="hasIssues"
v-show="!isCollapsed">
<issues-block
class="js-mr-code-resolved-issues"
v-if="mr.codeclimateMetrics.resolvedIssues.length"
type="success"
:issues="mr.codeclimateMetrics.resolvedIssues"
/>
<issues-block
class="js-mr-code-new-issues"
v-if="mr.codeclimateMetrics.newIssues.length"
type="failed"
:issues="mr.codeclimateMetrics.newIssues"
/>
<div
v-else-if="!isLoading && !loadingFailed"
class="media">
<status-icon :status="status" />
<div class="media-body space-children">
<span class="js-code-text">
{{codeText}}
</span>
<button
type="button"
class="btn-link btn-blank"
v-if="hasIssues"
@click="toggleCollapsed">
{{collapseText}}
</button>
</div>
</div>
</div>
<div
class="code-quality-container"
v-if="hasIssues"
v-show="!isCollapsed">
<issues-block
class="js-mr-code-resolved-issues"
v-if="mr.codeclimateMetrics.resolvedIssues.length"
type="success"
:issues="mr.codeclimateMetrics.resolvedIssues"
/>
<issues-block
class="js-mr-code-new-issues"
v-if="mr.codeclimateMetrics.newIssues.length"
type="failed"
:issues="mr.codeclimateMetrics.newIssues"
/>
</div>
<div
v-else-if="loadingFailed"
class="padding-left">
Failed to load codeclimate report.
class="media">
<status-icon status="failed" />
<div class="media-body">
Failed to load codeclimate report
</div>
</div>
</section>
</template>
......@@ -2,6 +2,7 @@
import simplePoll from '~/lib/utils/simple_poll';
import eventHub from '~/vue_merge_request_widget/event_hub';
import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
export default {
props: {
......@@ -14,11 +15,28 @@ export default {
required: true,
},
},
components: {
statusIcon,
},
data() {
return {
isMakingRequest: false,
};
},
computed: {
status() {
if (this.mr.rebaseInProgress || this.isMakingRequest) {
return 'loading';
}
if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
return 'failed';
}
return 'success';
},
showDisabledButton() {
return ['failed', 'loading'].includes(this.status);
},
},
methods: {
rebase() {
this.isMakingRequest = true;
......@@ -48,38 +66,24 @@ export default {
},
},
template: `
<div class="mr-widget-body">
<div class="rebase-state-find-class-convention">
<div class="mr-widget-body media">
<status-icon :status="status" :showDisabledButton="showDisabledButton" />
<div class="rebase-state-find-class-convention media media-body space-children">
<template v-if="mr.rebaseInProgress || isMakingRequest">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
Rebase in progress. This merge request is in the process of being rebased.
Rebase in progress
</span>
</template>
<template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch">
<button
type="button"
class="btn btn-success btn-small"
disabled="true">
Merge
</button>
<span class="bold">
Fast-forward merge is not possible.
Rebase the source branch onto
<span class="label-branch">{{mr.targetBranch}}</span>
to allow this merge request to be merged.
to allow this merge request to be merged
</span>
</template>
<template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
<div class="accept-merge-holder clearfix js-toggle-container accept-action">
<div class="accept-merge-holder clearfix js-toggle-container accept-action media space-children">
<button
class="btn btn-small btn-reopen btn-success"
:disabled="isMakingRequest"
......@@ -93,7 +97,7 @@ export default {
<span class="bold">
Fast-forward merge is not possible.
Rebase the source branch onto the target branch or merge target
branch into source branch to allow this merge request to be merged.
branch into source branch to allow this merge request to be merged
</span>
</div>
</template>
......
import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
export default {
props: {
mr: {
......@@ -5,22 +7,27 @@ export default {
required: true,
},
},
components: {
statusIcon,
},
template: `
<div>
<button type="button" class="btn btn-success btn-small" disabled="true">Merge</button>
<span class="bold">
Merge requests are read-only in a secondary Geo node.
</span>
<a
:href="mr.geoSecondaryHelpPath"
data-title="About this feature"
data-toggle="tooltip"
data-placement="bottom"
target="_blank"
rel="noopener noreferrer nofollow"
data-container="body">
<i class="fa fa-question-circle"></i>
</a>
<div class="media">
<status-icon status="failed" showDisabledButton />
<div class="media-body">
<span class="bold">
Merge requests are read-only in a secondary Geo node
</span>
<a
:href="mr.geoSecondaryHelpPath"
data-title="About this feature"
data-toggle="tooltip"
data-placement="bottom"
target="_blank"
rel="noopener noreferrer nofollow"
data-container="body">
<i class="fa fa-question-circle"></i>
</a>
</div>
</div>
`,
};
......@@ -40,14 +40,18 @@ export default {
:mr="mr"
:service="service"
/>
<component
:is="componentName"
:mr="mr"
:service="service" />
<mr-widget-related-links
v-if="shouldRenderRelatedLinks"
:related-links="mr.relatedLinks" />
<mr-widget-merge-help v-if="shouldRenderMergeHelp" />
<div class="mr-widget-section">
<component
:is="componentName"
:mr="mr"
:service="service" />
<mr-widget-related-links
v-if="shouldRenderRelatedLinks"
:related-links="mr.relatedLinks" />
</div>
<div class="mr-widget-footer" v-if="shouldRenderMergeHelp">
<mr-widget-merge-help />
</div>
</div>
`,
};
......@@ -26,17 +26,11 @@ feature 'Merge Request closing issues message', js: true do
wait_for_requests
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
let(:merge_request_description) { "Description\n\nclosing #{issue_1.to_reference}, #{issue_2.to_reference}" }
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
......@@ -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}" }
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
......@@ -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}" }
it 'does not display closing issue message' do
expect(page).to have_content("Closes issue #{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("Closes #{issue_1.to_reference}")
expect(page).to have_content("Mentions #{issue_2.to_reference}")
end
end
......@@ -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}" }
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
......@@ -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}" }
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
......@@ -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}" }
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("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("Mentions #{issue_2.to_reference}")
end
end
......@@ -92,7 +86,7 @@ feature 'Merge Request closing issues message', js: true do
it 'displays closing issue message exactly one time' do
wait_for_requests
expect(page).to have_content("Closes issues #{issue_1.to_reference} and #{issue_2.to_reference}", count: 1)
expect(page).to have_content("Closes #{issue_1.to_reference} and #{issue_2.to_reference}", count: 1)
end
end
end
......@@ -41,8 +41,8 @@ feature 'Merge When Pipeline Succeeds', :js do
it 'activates the Merge when pipeline succeeds feature' do
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 "The source branch will not be removed."
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_selector ".js-cancel-auto-merge"
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
......@@ -97,11 +97,11 @@ feature 'Merge When Pipeline Succeeds', :js do
describe 'enabling Merge when pipeline succeeds via dropdown' 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'
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 "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_link "Cancel automatic merge"
end
end
......
......@@ -43,7 +43,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
wait_for_requests
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
......@@ -56,7 +56,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
wait_for_requests
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
......@@ -69,7 +69,7 @@ feature 'Only allow merge requests to be merged if the pipeline succeeds', js: t
wait_for_requests
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
......@@ -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'
click_button 'Select merge moment'
page.find('.js-merge-moment').click
expect(page).to have_content 'Merge immediately'
end
end
......
......@@ -31,11 +31,11 @@ describe('Merge Request Code Quality', () => {
});
it('should render loading indicator', () => {
expect(vm.$el.textContent.trim()).toEqual('Loading codeclimate report.');
expect(vm.$el.textContent.trim()).toEqual('Loading codeclimate report');
});
});
describe('with successfull request', () => {
describe('with successful request', () => {
const interceptor = (request, next) => {
if (request.url === 'head.json') {
next(request.respondWith(JSON.stringify(headIssues), {
......@@ -66,8 +66,8 @@ describe('Merge Request Code Quality', () => {
it('should render provided data', (done) => {
setTimeout(() => {
expect(
vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
).toEqual('Code quality improved on 1 point and degraded on 1 point.');
vm.$el.querySelector('.js-code-text').textContent.trim(),
).toEqual('Code quality improved on 1 point and degraded on 1 point');
done();
}, 0);
});
......@@ -79,8 +79,8 @@ describe('Merge Request Code Quality', () => {
Vue.nextTick(() => {
expect(
vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
).toEqual('Code quality improved on 1 point.');
vm.$el.querySelector('.js-code-text').textContent.trim(),
).toEqual('Code quality improved on 1 point');
done();
});
}, 0);
......@@ -89,11 +89,10 @@ describe('Merge Request Code Quality', () => {
it('should only render information about added issues', (done) => {
setTimeout(() => {
vm.mr.codeclimateMetrics.resolvedIssues = [];
Vue.nextTick(() => {
expect(
vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
).toEqual('Code quality degraded on 1 point.');
vm.$el.querySelector('.js-code-text').textContent.trim(),
).toEqual('Code quality degraded on 1 point');
done();
});
}, 0);
......@@ -130,7 +129,7 @@ describe('Merge Request Code Quality', () => {
});
});
describe('with empty successfull request', () => {
describe('with empty successful request', () => {
const emptyInterceptor = (request, next) => {
if (request.url === 'head.json') {
next(request.respondWith(JSON.stringify([]), {
......@@ -161,8 +160,8 @@ describe('Merge Request Code Quality', () => {
it('should render provided data', (done) => {
setTimeout(() => {
expect(
vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
).toEqual('No changes to code quality.');
vm.$el.querySelector('.js-code-text').textContent.trim(),
).toEqual('No changes to code quality');
done();
}, 0);
});
......@@ -198,7 +197,7 @@ describe('Merge Request Code Quality', () => {
it('should render error indicator', (done) => {
setTimeout(() => {
expect(vm.$el.textContent.trim()).toEqual('Failed to load codeclimate report.');
expect(vm.$el.textContent.trim()).toEqual('Failed to load codeclimate report');
done();
}, 0);
});
......
import Vue from 'vue';
import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
const deploymentMockData = [
{
......@@ -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', () => {
let vm = createComponent();
const deployment = deploymentMockData[0];
......
......@@ -52,10 +52,10 @@ const createComponent = () => {
};
const messages = {
loadingMetrics: 'Loading deployment statistics.',
loadingMetrics: 'Loading deployment statistics',
hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
loadFailed: 'Failed to load deployment statistics.',
metricsUnavailable: 'Deployment statistics are not available currently.',
loadFailed: 'Failed to load deployment statistics',
metricsUnavailable: 'Deployment statistics are not available currently',
};
describe('MemoryUsage', () => {
......
......@@ -83,13 +83,12 @@ describe('MRWidgetPipeline', () => {
expect(el.querySelectorAll('.ci-status-icon.ci-status-icon-success').length).toEqual(1);
expect(el.querySelector('.pipeline-id').textContent).toContain(`#${pipeline.id}`);
expect(el.innerText).toContain('passed');
expect(el.innerText).toContain('with stages');
expect(el.querySelector('.pipeline-id').getAttribute('href')).toEqual(pipeline.path);
expect(el.querySelectorAll('.stage-container').length).toEqual(2);
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').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) => {
......@@ -97,7 +96,6 @@ describe('MRWidgetPipeline', () => {
Vue.nextTick(() => {
expect(el.querySelectorAll('.stage-container button').length).toEqual(1);
expect(el.innerText).toContain('with stage');
done();
});
});
......
......@@ -55,33 +55,17 @@ describe('MRWidgetRelatedLinks', () => {
};
const vm = createComponent(data);
describe('hasMultipleIssues', () => {
it('should return true if the given text has multiple issues', () => {
expect(vm.hasMultipleIssues(data.relatedLinks.closing)).toBeTruthy();
describe('closesText', () => {
it('returns correct text for open merge request', () => {
expect(vm.closesText('open')).toEqual('Closes');
});
it('should return false if the given text has one issue', () => {
expect(vm.hasMultipleIssues(data.relatedLinks.mentioned)).toBeFalsy();
});
});
describe('issueLabel', () => {
it('should return true if the given text has multiple issues', () => {
expect(vm.issueLabel('closing')).toEqual('issues');
});
it('should return false if the given text has one issue', () => {
expect(vm.issueLabel('mentioned')).toEqual('issue');
});
});
describe('verbLabel', () => {
it('should return true if the given text has multiple issues', () => {
expect(vm.verbLabel('closing')).toEqual('are');
it('returns correct text for closed merge request', () => {
expect(vm.closesText('closed')).toEqual('Did not close');
});
it('should return false if the given text has one issue', () => {
expect(vm.verbLabel('mentioned')).toEqual('is');
it('returns correct tense for merged request', () => {
expect(vm.closesText('merged')).toEqual('Closed');
});
});
});
......@@ -95,8 +79,8 @@ describe('MRWidgetRelatedLinks', () => {
});
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
expect(content).toContain('Closes issues #23 and #42');
expect(content).not.toContain('mentioned');
expect(content).toContain('Closes #23 and #42');
expect(content).not.toContain('Mentions');
});
it('should have only have mentioned issues text', () => {
......@@ -106,8 +90,7 @@ describe('MRWidgetRelatedLinks', () => {
},
});
expect(vm.$el.innerText).toContain('issue #7');
expect(vm.$el.innerText).toContain('is mentioned but will not be closed.');
expect(vm.$el.innerText).toContain('Mentions #7');
expect(vm.$el.innerText).not.toContain('Closes');
});
......@@ -120,9 +103,8 @@ describe('MRWidgetRelatedLinks', () => {
});
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
expect(content).toContain('Closes issue #7.');
expect(content).toContain('issues #23 and #42');
expect(content).toContain('are mentioned but will not be closed.');
expect(content).toContain('Closes #7');
expect(content).toContain('Mentions #23 and #42');
});
it('should have assing issues link', () => {
......
......@@ -12,7 +12,7 @@ describe('MRWidgetArchived', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.querySelector('button').classList.contains('btn-success')).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');
});
});
});
......@@ -24,8 +24,8 @@ describe('MRWidgetAutoMergeFailed', () => {
it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically.');
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(mergeError);
});
});
......
......@@ -12,7 +12,7 @@ describe('MRWidgetChecking', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.querySelector('button').classList.contains('btn-success')).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();
});
});
......
......@@ -29,15 +29,16 @@ describe('MRWidgetConflicts', () => {
describe('template', () => {
it('should have correct elements', () => {
const el = createComponent().$el;
const resolveButton = el.querySelectorAll('.btn-group .btn')[0];
const mergeLocallyButton = el.querySelectorAll('.btn-group .btn')[1];
const resolveButton = el.querySelector('.js-resolve-conflicts-button');
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.querySelector('.btn-success').disabled).toBeTruthy();
expect(el.querySelectorAll('.btn-group .btn').length).toBe(2);
expect(resolveButton.textContent).toContain('Resolve conflicts');
expect(resolveButton.getAttribute('href')).toEqual(path);
expect(mergeButton.textContent).toContain('Merge');
expect(mergeLocallyButton.textContent).toContain('Merge locally');
});
......@@ -59,8 +60,8 @@ describe('MRWidgetConflicts', () => {
it('should not have action buttons', (done) => {
Vue.nextTick(() => {
expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
expect(vm.$el.querySelector('a.js-resolve-conflicts-button')).toEqual(null);
expect(vm.$el.querySelector('a.js-merge-locally-button')).toEqual(null);
expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toEqual(null);
expect(vm.$el.querySelector('.js-merge-locally-button')).toEqual(null);
done();
});
});
......
......@@ -94,7 +94,7 @@ describe('MRWidgetFailedToMerge', () => {
expect(el.querySelector('button').innerText).toContain('Merge');
expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now');
expect(el.querySelector('.js-refresh-label')).toEqual(null);
expect(el.innerText).not.toContain('Refreshing now...');
expect(el.innerText).not.toContain('Refreshing now');
setTimeout(() => {
expect(el.innerText).toContain('Refreshing in 9 seconds');
done();
......@@ -115,7 +115,7 @@ describe('MRWidgetFailedToMerge', () => {
vm.refresh();
Vue.nextTick(() => {
expect(el.innerText).not.toContain('Merge failed. Refreshing');
expect(el.innerText).toContain('Refreshing now...');
expect(el.innerText).toContain('Refreshing now');
});
});
});
......
......@@ -162,10 +162,10 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
it('should have correct elements', () => {
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(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').getAttribute('disabled')).toBeFalsy();
expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
......@@ -186,8 +186,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
Vue.nextTick(() => {
const normalizedText = el.innerText.replace(/\s+/g, ' ');
expect(normalizedText).toContain('The source branch will be removed.');
expect(normalizedText).not.toContain('The source branch will not be removed.');
expect(normalizedText).toContain('The source branch will be removed');
expect(normalizedText).not.toContain('The source branch will not be removed');
done();
});
});
......
......@@ -142,19 +142,19 @@ describe('MRWidgetMerged', () => {
expect(el.querySelector('.js-mr-widget-author')).toBeDefined();
expect(el.innerText).toContain('The changes were merged into');
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('Cherry-pick');
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('You can remove source branch now');
expect(el.innerText).not.toContain('The source branch is being removed');
});
it('should not show source branch removed text', (done) => {
vm.mr.sourceBranchRemoved = false;
Vue.nextTick(() => {
expect(el.innerText).toContain('You can remove source branch now.');
expect(el.innerText).not.toContain('The source branch has been removed.');
expect(el.innerText).toContain('You can remove source branch now');
expect(el.innerText).not.toContain('The source branch has been removed');
done();
});
});
......@@ -164,9 +164,9 @@ describe('MRWidgetMerged', () => {
vm.mr.sourceBranchRemoved = false;
Vue.nextTick(() => {
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('The source branch has been 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('The source branch has been removed');
done();
});
});
......
......@@ -49,7 +49,7 @@ describe('MRWidgetMissingBranch', () => {
expect(el.classList.contains('mr-widget-body')).toBeTruthy();
expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
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');
});
});
});
......@@ -11,7 +11,7 @@ describe('MRWidgetNotAllowed', () => {
expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
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');
});
});
});
......@@ -10,7 +10,7 @@ describe('MRWidgetPipelineBlocked', () => {
it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).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');
});
});
});
......@@ -10,7 +10,7 @@ describe('MRWidgetPipelineFailed', () => {
it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).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');
});
});
});
......@@ -72,7 +72,7 @@ describe('MRWidgetReadyToMerge', () => {
const withDesc = '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);
});
......
......@@ -10,7 +10,7 @@ describe('MRWidgetSHAMismatch', () => {
it('should have correct elements', () => {
expect(vm.$el.classList.contains('mr-widget-body')).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');
});
});
});
......@@ -78,7 +78,7 @@ describe('MRWidgetWIP', () => {
it('should have correct elements', () => {
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').innerText).toContain('Merge');
expect(el.querySelector('.js-remove-wip').innerText).toContain('Resolve WIP status');
......
......@@ -30,6 +30,7 @@ export default {
"merge_user_id": null,
"merge_when_pipeline_succeeds": false,
"source_branch": "daaaa",
"source_branch_link": "daaaa",
"source_project_id": 19,
"target_branch": "master",
"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