1 files changed, 30 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index 7f49eb60c5c..cc5c393ff8c 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -1,9 +1,14 @@
+import Vue from 'vue';
+import StickyHeader from '~/merge_requests/components/sticky_header.vue';
 import { initReviewBar } from '~/batch_comments';
 import { initIssuableHeaderWarnings } from '~/issuable';
 import initMrNotes from '~/mr_notes';
 import store from '~/mr_notes/stores';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
+import { apolloProvider } from '~/graphql_shared/issuable_client';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import initShow from '../init_merge_request_show';
+import getStateQuery from '../queries/get_state.query.graphql';
 
 initMrNotes();
 initShow();
@@ -12,4 +17,29 @@ requestIdleCallback(() => {
   initSidebarBundle(store);
   initReviewBar();
   initIssuableHeaderWarnings(store);
+
+  const el = document.getElementById('js-merge-sticky-header');
+
+  if (el) {
+    const { data } = el.dataset;
+    const { iid, projectPath, title, tabs, isFluidLayout } = JSON.parse(data);
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      store,
+      apolloProvider,
+      provide: {
+        query: getStateQuery,
+        iid,
+        projectPath,
+        title,
+        tabs,
+        isFluidLayout: parseBoolean(isFluidLayout),
+      },
+      render(h) {
+        return h(StickyHeader);
+      },
+    });
+  }
 });