1 files changed, 26 insertions, 2 deletions
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 0e0c1475eda..48e360ce762 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -8,6 +8,7 @@ import createDefaultClient from '~/lib/graphql';
 import initSourcegraph from '~/sourcegraph';
 import ZenMode from '~/zen_mode';
 import initAwardsApp from '~/emoji/awards_app';
+import MrWidgetHowToMergeModal from '~/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue';
 import getStateQuery from './queries/get_state.query.graphql';
 
 export default function initMergeRequestShow() {
@@ -19,22 +20,45 @@ export default function initMergeRequestShow() {
   initAwardsApp(document.getElementById('js-vue-awards-block'));
 
   const el = document.querySelector('.js-mr-status-box');
+  const { iid, issuableType, projectPath } = el.dataset;
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
   });
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'IssuableStatusBoxRoot',
     apolloProvider,
     provide: {
       query: getStateQuery,
-      projectPath: el.dataset.projectPath,
-      iid: el.dataset.iid,
+      iid,
+      projectPath,
     },
     render(h) {
       return h(StatusBox, {
         props: {
           initialState: el.dataset.state,
+          issuableType,
+        },
+      });
+    },
+  });
+
+  const modalEl = document.getElementById('js-check-out-modal');
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: modalEl,
+    render(h) {
+      return h(MrWidgetHowToMergeModal, {
+        props: {
+          canMerge: modalEl.dataset.canMerge === 'true',
+          isFork: modalEl.dataset.isFork === 'true',
+          sourceBranch: modalEl.dataset.sourceBranch,
+          sourceProjectPath: modalEl.dataset.sourceProjectPath,
+          targetBranch: modalEl.dataset.targetBranch,
+          sourceProjectDefaultUrl: modalEl.dataset.sourceProjectDefaultUrl,
+          reviewingDocsPath: modalEl.dataset.reviewingDocsPath,
         },
       });
     },