2 files changed, 10 insertions, 41 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 686cb38cbb1..205804670fa 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,63 +1,42 @@
 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 /<\/a>,? and <a/.test(text);
+      return !text ? false : text.match(/<\/a> and <a/);
     },
-    // 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: `
-    <div v-if="hasLinks">
+    <section
+      v-if="hasLinks"
+      class="mr-info-list mr-links">
       <div class="legend"></div>
       <p v-if="relatedLinks.closing">
-        {{closingText}}
+        Closes {{issueLabel('closing')}}
         <span v-html="relatedLinks.closing"></span>.
       </p>
       <p v-if="relatedLinks.mentioned">
         <span class="capitalize">{{issueLabel('mentioned')}}</span>
         <span v-html="relatedLinks.mentioned"></span>
-        {{mentionedText}}
+        {{verbLabel('mentioned')}} mentioned but will not be closed.
       </p>
       <p v-if="relatedLinks.assignToMe">
         <span v-html="relatedLinks.assignToMe"></span>
       </p>
-    </div>
+    </section>
   `,
 };
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 9b8eed9016d..c7d32d18141 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,9 +1,7 @@
 /* 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',
@@ -13,7 +11,6 @@ export default {
   },
   components: {
     'mr-widget-author-and-time': mrWidgetAuthorTime,
-    'mr-widget-related-links': mrWidgetRelatedLinks,
   },
   data() {
     return {
@@ -21,9 +18,6 @@ export default {
     };
   },
   computed: {
-    shouldRenderRelatedLinks() {
-      return this.mr.relatedLinks && this.mr.isMerged;
-    },
     shouldShowRemoveSourceBranch() {
       const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
 
@@ -92,10 +86,6 @@ 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"