Changes tab VUE refactoring

7 files changed, 97 insertions, 3 deletions

diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index e3c5bf06b3d..3c0c9995cc2 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -1,20 +1,32 @@
+import $ from 'jquery';
 import Vue from 'vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import initDiffsApp from '../diffs';
 import notesApp from '../notes/components/notes_app.vue';
 import discussionCounter from '../notes/components/discussion_counter.vue';
-import store from '../notes/stores';
+import store from './stores';
+import MergeRequest from '../merge_request';
 
 export default function initMrNotes() {
+  const mrShowNode = document.querySelector('.merge-request');
+  // eslint-disable-next-line no-new
+  new MergeRequest({
+    action: mrShowNode.dataset.mrAction,
+  });
+
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-vue-mr-discussions',
+    name: 'MergeRequestDiscussions',
     components: {
       notesApp,
     },
+    store,
     data() {
-      const notesDataset = document.getElementById('js-vue-mr-discussions')
-        .dataset;
+      const notesDataset = document.getElementById('js-vue-mr-discussions').dataset;
       const noteableData = JSON.parse(notesDataset.noteableData);
       noteableData.noteableType = notesDataset.noteableType;
+      noteableData.targetType = notesDataset.targetType;
 
       return {
         noteableData,
@@ -22,12 +34,42 @@ export default function initMrNotes() {
         notesData: JSON.parse(notesDataset.notesData),
       };
     },
+    computed: {
+      ...mapGetters(['discussionTabCounter']),
+      ...mapState({
+        activeTab: state => state.page.activeTab,
+      }),
+    },
+    watch: {
+      discussionTabCounter() {
+        this.updateDiscussionTabCounter();
+      },
+    },
+    mounted() {
+      this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge');
+      this.setActiveTab(window.mrTabs.getCurrentAction());
+
+      window.mrTabs.eventHub.$on('MergeRequestTabChange', tab => {
+        this.setActiveTab(tab);
+      });
+      $(document).on('visibilitychange', this.updateDiscussionTabCounter);
+    },
+    beforeDestroy() {
+      $(document).off('visibilitychange', this.updateDiscussionTabCounter);
+    },
+    methods: {
+      ...mapActions(['setActiveTab']),
+      updateDiscussionTabCounter() {
+        this.notesCountBadge.text(this.discussionTabCounter);
+      },
+    },
     render(createElement) {
       return createElement('notes-app', {
         props: {
           noteableData: this.noteableData,
           notesData: this.notesData,
           userData: this.currentUserData,
+          shouldShow: this.activeTab === 'show',
         },
       });
     },
@@ -36,6 +78,7 @@ export default function initMrNotes() {
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-vue-discussion-counter',
+    name: 'DiscussionCounter',
     components: {
       discussionCounter,
     },
@@ -44,4 +87,6 @@ export default function initMrNotes() {
       return createElement('discussion-counter');
     },
   });
+
+  initDiffsApp(store);
 }
diff --git a/app/assets/javascripts/mr_notes/stores/actions.js b/app/assets/javascripts/mr_notes/stores/actions.js
new file mode 100644
index 00000000000..426c6a00d5e
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/actions.js
@@ -0,0 +1,7 @@
+import types from './mutation_types';
+
+export default {
+  setActiveTab({ commit }, tab) {
+    commit(types.SET_ACTIVE_TAB, tab);
+  },
+};
diff --git a/app/assets/javascripts/mr_notes/stores/getters.js b/app/assets/javascripts/mr_notes/stores/getters.js
new file mode 100644
index 00000000000..b10e9f9f9f1
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/getters.js
@@ -0,0 +1,5 @@
+export default {
+  isLoggedIn(state, getters) {
+    return !!getters.getUserData.id;
+  },
+};
diff --git a/app/assets/javascripts/mr_notes/stores/index.js b/app/assets/javascripts/mr_notes/stores/index.js
new file mode 100644
index 00000000000..dd2019001db
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import notesModule from '~/notes/stores/modules';
+import diffsModule from '~/diffs/store/modules';
+import mrPageModule from './modules';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    page: mrPageModule,
+    notes: notesModule,
+    diffs: diffsModule,
+  },
+});
diff --git a/app/assets/javascripts/mr_notes/stores/modules/index.js b/app/assets/javascripts/mr_notes/stores/modules/index.js
new file mode 100644
index 00000000000..660081f76c8
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/modules/index.js
@@ -0,0 +1,12 @@
+import actions from '../actions';
+import getters from '../getters';
+import mutations from '../mutations';
+
+export default {
+  state: {
+    activeTab: null,
+  },
+  actions,
+  getters,
+  mutations,
+};
diff --git a/app/assets/javascripts/mr_notes/stores/mutation_types.js b/app/assets/javascripts/mr_notes/stores/mutation_types.js
new file mode 100644
index 00000000000..105104361cf
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/mutation_types.js
@@ -0,0 +1,3 @@
+export default {
+  SET_ACTIVE_TAB: 'SET_ACTIVE_TAB',
+};
diff --git a/app/assets/javascripts/mr_notes/stores/mutations.js b/app/assets/javascripts/mr_notes/stores/mutations.js
new file mode 100644
index 00000000000..8175aa9488f
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/mutations.js
@@ -0,0 +1,7 @@
+import types from './mutation_types';
+
+export default {
+  [types.SET_ACTIVE_TAB](state, tab) {
+    Object.assign(state, { activeTab: tab });
+  },
+};