1 files changed, 13 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
index 5cfee21dd5e..0ca4c92a5ae 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlBadge, GlLink, GlSafeHtmlDirective, GlModalDirective } from '@gitlab/ui';
 import StatusIcon from './status_icon.vue';
 import Actions from './actions.vue';
 import { generateText } from './utils';
@@ -14,6 +14,7 @@ export default {
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
+    GlModal: GlModalDirective,
   },
   props: {
     data: {
@@ -24,6 +25,11 @@ export default {
       type: String,
       required: true,
     },
+    modalId: {
+      type: String,
+      required: false,
+      default: null,
+    },
     level: {
       type: Number,
       required: true,
@@ -63,6 +69,11 @@ export default {
             <div v-if="data.link">
               <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
             </div>
+            <div v-if="data.modal">
+              <gl-link v-gl-modal="modalId" @click="data.modal.onClick">
+                {{ data.modal.text }}
+              </gl-link>
+            </div>
             <div v-if="data.supportingText">
               <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
             </div>
@@ -87,6 +98,7 @@ export default {
             :key="childData.id"
             :data="childData"
             :widget-label="widgetLabel"
+            :modal-id="modalId"
             :level="3"
             data-testid="child-content"
           />