diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2017-06-20 01:17:00 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-06-20 01:17:00 +0300 |
commit | ef4bc6df04a96f8b0c88e997c273ca6f41fa95c4 (patch) | |
tree | 29c8e7e8a53f8c671d50c23eda808599c997f929 /app | |
parent | 025cbc2ad4dc175634676ff8a6955e043512d8bf (diff) |
Adjust position and wording for related issues in merge requests
Diffstat (limited to 'app')
6 files changed, 66 insertions, 26 deletions
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..686cb38cbb1 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 @@ -1,42 +1,63 @@ export default { name: 'MRWidgetRelatedLinks', props: { + isMerged: { type: Boolean, required: true }, relatedLinks: { type: Object, required: true }, }, computed: { + // TODO: the following should be handled by i18n + closingText() { + if (this.isMerged) { + return `Closed ${this.issueLabel('closing')}`; + } + + return `Closes ${this.issueLabel('closing')}`; + }, hasLinks() { const { closing, mentioned, assignToMe } = this.relatedLinks; return closing || mentioned || assignToMe; }, + // TODO: the following should be handled by i18n + mentionedText() { + if (this.isMerged) { + if (this.hasMultipleIssues(this.relatedLinks.mentioned)) { + return 'are mentioned but were not closed'; + } + + return 'is mentioned but was not closed'; + } + + if (this.hasMultipleIssues(this.relatedLinks.mentioned)) { + return 'are mentioned but will not be closed'; + } + + return 'is mentioned but will not be closed'; + }, }, methods: { hasMultipleIssues(text) { - return !text ? false : text.match(/<\/a> and <a/); + return /<\/a>,? and <a/.test(text); }, + // TODO: the following should be handled by i18n issueLabel(field) { return this.hasMultipleIssues(this.relatedLinks[field]) ? 'issues' : 'issue'; }, - verbLabel(field) { - return this.hasMultipleIssues(this.relatedLinks[field]) ? 'are' : 'is'; - }, }, template: ` - <section - v-if="hasLinks" - class="mr-info-list mr-links"> + <div v-if="hasLinks"> <div class="legend"></div> <p v-if="relatedLinks.closing"> - Closes {{issueLabel('closing')}} + {{closingText}} <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. + {{mentionedText}} </p> <p v-if="relatedLinks.assignToMe"> <span v-html="relatedLinks.assignToMe"></span> </p> - </section> + </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..9b8eed9016d 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,7 +1,9 @@ /* global Flash */ import mrWidgetAuthorTime from '../../components/mr_widget_author_time'; +import mrWidgetRelatedLinks from '../../components/mr_widget_related_links'; import eventHub from '../../event_hub'; +import '../../../flash'; export default { name: 'MRWidgetMerged', @@ -11,6 +13,7 @@ export default { }, components: { 'mr-widget-author-and-time': mrWidgetAuthorTime, + 'mr-widget-related-links': mrWidgetRelatedLinks, }, data() { return { @@ -18,6 +21,9 @@ export default { }; }, computed: { + shouldRenderRelatedLinks() { + return this.mr.relatedLinks && this.mr.isMerged; + }, shouldShowRemoveSourceBranch() { const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr; @@ -86,6 +92,10 @@ export default { aria-hidden="true" /> The source branch is being removed. </p> + <mr-widget-related-links + v-if="shouldRenderRelatedLinks" + :is-merged="mr.isMerged()" + :related-links="mr.relatedLinks" /> </section> <div v-if="shouldShowMergedButtons" 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..222d0b7f79e 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 @@ -48,7 +48,7 @@ export default { return stateMaps.stateToComponentMap[this.mr.state]; }, shouldRenderMergeHelp() { - return stateMaps.statesToShowHelpWidget.indexOf(this.mr.state) > -1; + return !this.mr.isMerged; }, shouldRenderPipelines() { return Object.keys(this.mr.pipeline).length || this.mr.hasCI; @@ -238,9 +238,14 @@ export default { :is="componentName" :mr="mr" :service="service" /> - <mr-widget-related-links + <section v-if="shouldRenderRelatedLinks" - :related-links="mr.relatedLinks" /> + class="mr-info-list mr-links"> + <div class="legend"></div> + <mr-widget-related-links + :is-merged="mr.isMerged" + :related-links="mr.relatedLinks" /> + </section> <mr-widget-merge-help v-if="shouldRenderMergeHelp" /> </div> `, diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index 69bc1436284..ad73efb37e1 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -1,6 +1,18 @@ import Timeago from 'timeago.js'; import { getStateKey } from '../dependencies'; +const unmergedStates = [ + 'locked', + 'conflicts', + 'workInProgress', + 'readyToMerge', + 'checking', + 'unresolvedDiscussions', + 'pipelineFailed', + 'pipelineBlocked', + 'autoMergeFailed', +]; + export default class MergeRequestStore { constructor(data) { @@ -65,6 +77,7 @@ export default class MergeRequestStore { this.mergeActionsContentPath = data.commit_change_content_path; this.isRemovingSourceBranch = this.isRemovingSourceBranch || false; this.isOpen = data.state === 'opened' || data.state === 'reopened' || false; + this.isMerged = unmergedStates.indexOf(data.state) === -1; this.hasMergeableDiscussionsState = data.mergeable_discussions_state === false; this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false; this.canMerge = !!data.merge_path; diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js index 605dd3a1ff4..dd939d98d0f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js @@ -19,19 +19,6 @@ const stateToComponentMap = { shaMismatch: 'mr-widget-sha-mismatch', }; -const statesToShowHelpWidget = [ - 'locked', - 'conflicts', - 'workInProgress', - 'readyToMerge', - 'checking', - 'unresolvedDiscussions', - 'pipelineFailed', - 'pipelineBlocked', - 'autoMergeFailed', -]; - export default { stateToComponentMap, - statesToShowHelpWidget, }; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 2dc7f73a295..c0bd045f1fc 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -372,6 +372,10 @@ margin-left: 12px; } + &.mr-state-locked + .mr-info-list.mr-links { + margin-top: -16px; + } + &.empty-state { .artwork { margin-bottom: $gl-padding; |