Changes tab VUE refactoring

1 files changed, 39 insertions, 0 deletions

diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
new file mode 100644
index 00000000000..f6840f87034
--- /dev/null
+++ b/app/assets/javascripts/diffs/index.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import { mapState } from 'vuex';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import diffsApp from './components/app.vue';
+
+export default function initDiffsApp(store) {
+  return new Vue({
+    el: '#js-diffs-app',
+    name: 'MergeRequestDiffs',
+    components: {
+      diffsApp,
+    },
+    store,
+    data() {
+      const { dataset } = document.querySelector(this.$options.el);
+
+      return {
+        endpoint: dataset.endpoint,
+        currentUser: convertObjectPropsToCamelCase(JSON.parse(dataset.currentUserData), {
+          deep: true,
+        }),
+      };
+    },
+    computed: {
+      ...mapState({
+        activeTab: state => state.page.activeTab,
+      }),
+    },
+    render(createElement) {
+      return createElement('diffs-app', {
+        props: {
+          endpoint: this.endpoint,
+          currentUser: this.currentUser,
+          shouldShow: this.activeTab === 'diffs',
+        },
+      });
+    },
+  });
+}