1 files changed, 15 insertions, 3 deletions

diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 7da5ef54b80..53c27632c4f 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -1,5 +1,7 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { apolloProvider } from '~/graphql_shared/issuable_client';
 import { getCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils';
 import notesStore from '~/mr_notes/stores';
 
@@ -11,20 +13,29 @@ import { getReviewsForMergeRequest } from './utils/file_reviews';
 import { getDerivedMergeRequestInformation } from './utils/merge_request';
 
 export default function initDiffsApp(store = notesStore) {
+  const el = document.getElementById('js-diffs-app');
+  const { dataset } = el;
+
+  Vue.use(VueApollo);
+
   const vm = new Vue({
-    el: '#js-diffs-app',
+    el,
     name: 'MergeRequestDiffs',
     components: {
       DiffsApp,
     },
     store,
+    apolloProvider,
+    provide: {
+      newCommentTemplatePath: dataset.newCommentTemplatePath,
+      showGenerateTestFileButton: parseBoolean(dataset.showGenerateTestFileButton),
+    },
     data() {
-      const { dataset } = document.querySelector(this.$options.el);
-
       return {
         endpoint: dataset.endpoint,
         endpointMetadata: dataset.endpointMetadata || '',
         endpointBatch: dataset.endpointBatch || '',
+        endpointDiffForPath: dataset.endpointDiffForPath || '',
         endpointCoverage: dataset.endpointCoverage || '',
         endpointCodequality: dataset.endpointCodequality || '',
         endpointUpdateUser: dataset.updateCurrentUserPath,
@@ -86,6 +97,7 @@ export default function initDiffsApp(store = notesStore) {
           endpoint: this.endpoint,
           endpointMetadata: this.endpointMetadata,
           endpointBatch: this.endpointBatch,
+          endpointDiffForPath: this.endpointDiffForPath,
           endpointCoverage: this.endpointCoverage,
           endpointCodequality: this.endpointCodequality,
           endpointUpdateUser: this.endpointUpdateUser,