Show closing merge requests text under the widget

Now we will display, “When this merge request is
accepted this issue will be closed automatically” text

app/assets/javascripts/issue_show/index.js

 import Vue from 'vue';
-import sanitize from 'sanitize-html';
 import issuableApp from './components/app.vue';
+import { parseIssuableData } from './utils/parse_data';
 import '../vue_shared/vue_resource_interceptor';
 
 export default function initIssueableApp() {
-  const initialDataEl = document.getElementById('js-issuable-app-initial-data');
-  const props = JSON.parse(sanitize(initialDataEl.textContent).replace(/"/g, '"'));
-
   return new Vue({
     el: document.getElementById('js-issuable-app'),
     components: {
@@ -14,7 +11,7 @@ export default function initIssueableApp() {
     },
     render(createElement) {
       return createElement('issuable-app', {
-        props,
+        props: parseIssuableData(),
       });
     },
   });

app/assets/javascripts/issue_show/utils/parse_data.js

+import sanitize from 'sanitize-html';
+
+export const parseIssuableData = () => {
+  try {
+    const initialDataEl = document.getElementById('js-issuable-app-initial-data');
+
+    return JSON.parse(sanitize(initialDataEl.textContent).replace(/"/g, '"'));
+  } catch (e) {
+    return {};
+  }
+};
+
+export default {};

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

 <script>
 import { mapState, mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { sprintf, n__, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
+import { parseIssuableData } from '../../issue_show/utils/parse_data';
 
 export default {
   name: 'RelatedMergeRequests',
@@ -27,11 +29,27 @@ export default {
   },
   computed: {
     ...mapState(['isFetchingMergeRequests', 'mergeRequests', 'totalCount']),
+    closingMergeRequestsText() {
+      if (this.closingMergeRequestsCount === 0) {
+        return '';
+      }
+
+      const mrText = n__(
+        'When this merge request is accepted',
+        'When these merge requests are accepted',
+        this.closingMergeRequestsCount,
+      );
+
+      return sprintf(s__('%{mrText}, this issue will be closed automatically.'), { mrText });
+    },
   },
   mounted() {
     this.setInitialState({ apiEndpoint: this.endpoint });
     this.fetchMergeRequests();
   },
+  created() {
+    this.closingMergeRequestsCount = parseIssuableData().closingMergeRequestsCount;
+  },
   methods: {
     ...mapActions(['setInitialState', 'fetchMergeRequests']),
     getAssignees(mr) {
@@ -46,49 +64,54 @@ export default {
 </script>
 
 <template>
-  <div class="card-slim mt-3" v-if="totalCount">
-    <div class="card-header">
-      <div class="card-title mt-0 mb-0 h5 merge-requests-title">
-        <span class="mr-1">
-          {{ __('Related merge requests') }}
-        </span>
-        <div class="d-inline-flex lh-100 align-middle">
-          <div class="mr-count-badge">
-            <div class="mr-count-badge-count">
-              <svg class="s16 mr-1 text-secondary">
-                <icon name="merge-request" class="mr-1 text-secondary" />
-              </svg>
-              <span class="js-items-count">{{ totalCount }}</span>
+  <div v-if="totalCount">
+    <div class="card-slim mt-3">
+      <div class="card-header">
+        <div class="card-title mt-0 mb-0 h5 merge-requests-title">
+          <span class="mr-1">
+            {{ __('Related merge requests') }}
+          </span>
+          <div class="d-inline-flex lh-100 align-middle">
+            <div class="mr-count-badge">
+              <div class="mr-count-badge-count">
+                <svg class="s16 mr-1 text-secondary">
+                  <icon name="merge-request" class="mr-1 text-secondary" />
+                </svg>
+                <span class="js-items-count">{{ totalCount }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div>
-      <div
-        v-if="isFetchingMergeRequests"
-        class="related-related-merge-requests-icon qa-related-merge-requests-loading-icon"
-      >
-        <gl-loading-icon label="Fetching related merge requests" class="py-2" />
+      <div>
+        <div
+          v-if="isFetchingMergeRequests"
+          class="related-related-merge-requests-icon qa-related-merge-requests-loading-icon"
+        >
+          <gl-loading-icon label="Fetching related merge requests" class="py-2" />
+        </div>
+        <ul v-else class="content-list related-items-list">
+          <li v-for="mr in mergeRequests" :key="mr.id" class="list-item pt-0 pb-0">
+            <related-issuable-item
+              :id-key="mr.id"
+              :display-reference="mr.reference"
+              :title="mr.title"
+              :milestone="mr.milestone"
+              :assignees="getAssignees(mr)"
+              :created-at="mr.created_at"
+              :closed-at="mr.closed_at"
+              :path="mr.web_url"
+              :state="mr.state"
+              :is-merge-request="true"
+              :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
+              path-id-separator="!"
+            />
+          </li>
+        </ul>
       </div>
-      <ul v-else class="content-list related-items-list">
-        <li v-for="mr in mergeRequests" :key="mr.id" class="list-item pt-0 pb-0">
-          <related-issuable-item
-            :id-key="mr.id"
-            :display-reference="mr.reference"
-            :title="mr.title"
-            :milestone="mr.milestone"
-            :assignees="getAssignees(mr)"
-            :created-at="mr.created_at"
-            :closed-at="mr.closed_at"
-            :path="mr.web_url"
-            :state="mr.state"
-            :is-merge-request="true"
-            :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
-            path-id-separator="!"
-          />
-        </li>
-      </ul>
+    </div>
+    <div class="issue-closed-by-widget second-block">
+      {{ closingMergeRequestsText }}
     </div>
   </div>
 </template>

app/helpers/issuables_helper.rb

@@ -277,6 +277,8 @@ module IssuablesHelper
       initialTaskStatus: issuable.task_status
     }
 
+    data[:closingMergeRequestsCount] = issuable.merge_requests_count if issuable.is_a?(Issue)
+
     if parent.is_a?(Group)
       data[:groupPath] = parent.path
     else