diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget')
27 files changed, 688 insertions, 574 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js index a01cb8cc202..982b5e8e373 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.js @@ -1,3 +1,5 @@ +import tooltip from '../../vue_shared/directives/tooltip'; + export default { name: 'MRWidgetAuthor', props: { @@ -5,11 +7,14 @@ export default { showAuthorName: { type: Boolean, required: false, default: true }, showAuthorTooltip: { type: Boolean, required: false, default: false }, }, + directives: { + tooltip, + }, 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" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js index 744a1cd24fa..e98d147733c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js @@ -1,8 +1,8 @@ /* 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> `, diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js index 8430548903c..c05a76a3b4a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js @@ -1,3 +1,4 @@ +import tooltip from '../../vue_shared/directives/tooltip'; import '../../lib/utils/text_utility'; export default { @@ -5,6 +6,9 @@ export default { props: { mr: { type: Object, required: true }, }, + directives: { + tooltip, + }, computed: { shouldShowCommitsBehindText() { return this.mr.divergedCommitsCount > 0; @@ -29,18 +33,51 @@ export default { }, template: ` <div class="mr-source-target"> - <div - v-if="mr.isOpen" - class="pull-right"> + <div class="normal"> + <strong> + 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 href="#modal_merge_info" data-toggle="modal" - class="btn inline btn-grouped btn-sm"> + class="btn btn-small inline"> 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 btn-xs dropdown-toggle" data-toggle="dropdown" aria-label="Download as" role="button"> @@ -69,38 +106,6 @@ export default { </ul> </span> </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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js index 534e2a88eff..a4e34116c33 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js @@ -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" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js index 2fecebce7a0..1d9f9863dd9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js @@ -16,7 +16,7 @@ export default { <a data-toggle="modal" href="#modal_merge_info"> - command line. + command line </a> </section> `, diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js index c02e10128e2..6c2e9ba1d30 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js @@ -29,58 +29,55 @@ 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"> - <div - v-if="mr.pipeline.details.stages.length > 0" - v-for="stage in mr.pipeline.details.stages" - class="stage-container dropdown js-mini-pipeline-graph"> - <pipeline-stage :stage="stage" /> - </div> - </div> + <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"> + <div + v-if="mr.pipeline.details.stages.length > 0" + v-for="stage in mr.pipeline.details.stages" + class="stage-container dropdown js-mini-pipeline-graph"> + <pipeline-stage :stage="stage" /> + </div> + </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> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js index 205804670fa..563267ad044 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js @@ -2,37 +2,32 @@ export default { name: 'MRWidgetRelatedLinks', props: { relatedLinks: { type: Object, required: true }, + state: { type: String, required: false }, }, computed: { hasLinks() { const { closing, mentioned, assignToMe } = this.relatedLinks; return closing || mentioned || assignToMe; }, - }, - 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() { + if (this.state === 'merged') { + return 'Closed'; + } + if (this.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}} <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> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js new file mode 100644 index 00000000000..b01c923311b --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js @@ -0,0 +1,36 @@ +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> + `, +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js index c7f25a1697c..2b16a2d6817 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js @@ -1,16 +1,26 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js index 4063859d5d0..5648208f7b1 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js @@ -1,4 +1,5 @@ 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> `, diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js index 8515b54e62d..aaf9d3304a4 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js @@ -1,19 +1,18 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js index fc2e42c6821..4078aad7f83 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js @@ -1,4 +1,5 @@ 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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js index 36596c6f37e..f9cb79a0bc1 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js @@ -1,27 +1,25 @@ +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 diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js index 600b4d42e3d..1cb24549d53 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js @@ -1,3 +1,4 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js index 0bd31731a0b..a12f418e1af 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js @@ -1,24 +1,29 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js index 419d174f3ff..bdfd4d9667c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js @@ -1,5 +1,5 @@ /* 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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js index c7d32d18141..e452260a4d0 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js @@ -1,6 +1,9 @@ /* global Flash */ 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'; export default { @@ -9,14 +12,19 @@ export default { mr: { type: Object, required: true }, service: { type: Object, required: true }, }, - components: { - 'mr-widget-author-and-time': mrWidgetAuthorTime, - }, data() { return { isMakingRequest: false, }; }, + directives: { + tooltip, + }, + components: { + 'mr-widget-author-and-time': mrWidgetAuthorTime, + loadingIcon, + statusIcon, + }, computed: { shouldShowRemoveSourceBranch() { const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr; @@ -55,75 +63,77 @@ 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" + v-tooltip + class="btn btn-close btn-xs" + 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" + v-tooltip + class="btn btn-close btn-xs" + data-method="post" + :href="mr.revertInForkPath" + title="Revert this merge request in a new merge request"> + Revert + </a> + <a + v-if="mr.canCherryPickInCurrentMR" + v-tooltip + class="btn btn-default btn-xs" + 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" + v-tooltip + class="btn btn-default btn-xs" + 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" + :disabled="isMakingRequest" + type="button" + class="btn btn-xs btn-default js-remove-branch-button"> + Remove Source Branch + </button> + </p> + <p v-if="shouldShowSourceBranchRemoving"> + <loading-icon inline /> + <span>The source branch is being removed</span> + </p> + </section> </div> </div> `, diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js index 328382485f6..9f0a359d01a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js @@ -1,3 +1,5 @@ +import statusIcon from '../mr_widget_status_icon'; +import tooltip from '../../../vue_shared/directives/tooltip'; import mrWidgetMergeHelp from '../../components/mr_widget_merge_help'; export default { @@ -5,30 +7,37 @@ export default { props: { mr: { type: Object, required: true }, }, + directives: { + tooltip, + }, 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 + v-tooltip + class="fa fa-question-circle" + :title="message" + :aria-label="message"></i> + </span> + </div> </div> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js index 07169b349be..797511d4e3a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js @@ -1,17 +1,19 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js index 375a382615a..ebfd6765934 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js @@ -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> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js index 31c53b679ed..167a0d4613a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js @@ -1,16 +1,18 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js index 002820123ca..c5be9a0530a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js @@ -1,16 +1,18 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js index fcd4fdaf09f..65187754009 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js @@ -1,8 +1,8 @@ /* 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'; @@ -196,84 +199,98 @@ 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" /> + <!-- Placeholder for EE extension of this component --> + <squash-before-merge + v-if="shouldShowSquashBeforeMerge" + :mr="mr" + :is-merge-button-disabled="isMergeButtonDisabled" /> - <button - @click="toggleCommitMessageEditor" - :disabled="isMergeButtonDisabled" - class="btn btn-default btn-xs" - type="button"> - Modify commit message - </button> + <button + @click="toggleCommitMessageEditor" + :disabled="isMergeButtonDisabled" + class="btn btn-default btn-xs" + type="button"> + Modify commit message + </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 v-if="showCommitMessageEditor" class="prepend-top-default commit-message-editor"> @@ -293,7 +310,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" @@ -302,12 +319,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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js index 79f8ef408e6..89f38e5bd2a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js @@ -1,16 +1,18 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js index f4ab2d9fa58..d762ca6e640 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js @@ -1,27 +1,27 @@ +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> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js index cb02ffe93bd..b11a06899cf 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js @@ -1,4 +1,6 @@ /* global Flash */ +import statusIcon from '../mr_widget_status_icon'; +import tooltip from '../../../vue_shared/directives/tooltip'; import eventHub from '../../event_hub'; export default { @@ -7,11 +9,17 @@ export default { mr: { type: Object, required: true }, service: { type: Object, required: true }, }, + directives: { + tooltip, + }, data() { return { isMakingRequest: false, }; }, + components: { + statusIcon, + }, methods: { removeWIP() { this.isMakingRequest = true; @@ -29,20 +37,20 @@ export default { }, }, 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 + v-tooltip + class="fa fa-question-circle" + title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged" + aria-label="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged"> + </i> + </span> <button + v-if="mr.removeWIPPath" @click="removeWIP" :disabled="isMakingRequest" type="button" @@ -53,7 +61,7 @@ export default { aria-hidden="true" /> Resolve WIP status </button> - </template> + </div> </div> `, }; diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js index 2339a00ddd0..577d77f09a6 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js @@ -35,8 +35,14 @@ import { export default { el: '#js-vue-mr-widget', name: 'MRWidget', + props: { + mrData: { + type: Object, + required: false, + }, + }, data() { - const store = new MRWidgetStore(gl.mrWidgetData); + const store = new MRWidgetStore(this.mrData || window.gl.mrWidgetData); const service = this.createService(store); return { mr: store, @@ -234,14 +240,21 @@ 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> `, }; |