Adjust position and wording for related issues in merge requests

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;