Backport of EE Displaying Blocking MRsee-9688-fe-mr-merge-order

This MR is a backport of an EE merge request

1 files changed, 11 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
index b807a35b421..05ad7710a62 100644
--- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
@@ -24,6 +24,11 @@ export default {
       required: false,
       default: false,
     },
+    greyLinkWhenMerged: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     stateTitle() {
@@ -36,6 +41,11 @@ export default {
         },
       );
     },
+    issueableLinkClass() {
+      return this.greyLinkWhenMerged
+        ? `sortable-link ${this.state === 'merged' ? ' text-secondary' : ''}`
+        : 'sortable-link';
+    },
   },
 };
 </script>
@@ -69,7 +79,7 @@ export default {
           class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
           :aria-label="__('Confidential')"
         />
-        <a :href="computedPath" class="sortable-link">{{ title }}</a>
+        <a :href="computedPath" :class="issueableLinkClass">{{ title }}</a>
       </div>
       <div class="item-meta d-flex flex-wrap mt-xl-0 justify-content-xl-end flex-xl-nowrap">
         <div