Move batchComments module out of CE store creation

The batch comments module now gets dynamically registered only in EE.

Closes https://gitlab.com/gitlab-org/gitlab-ee/issues/10008

app/assets/javascripts/diffs/components/inline_diff_view.vue

 <script>
 import { mapGetters } from 'vuex';
+import draftCommentsMixin from 'ee_else_ce/diffs/mixins/draft_comments';
 import inlineDiffTableRow from './inline_diff_table_row.vue';
 import inlineDiffCommentRow from './inline_diff_comment_row.vue';
 
-// eslint-disable-next-line import/order
-import InlineDraftCommentRow from 'ee/batch_comments/components/inline_draft_comment_row.vue';
-
 export default {
   components: {
     inlineDiffCommentRow,
     inlineDiffTableRow,
-    InlineDraftCommentRow,
+    InlineDraftCommentRow: () =>
+      import('ee_component/batch_comments/components/inline_draft_comment_row.vue'),
   },
+  mixins: [draftCommentsMixin],
   props: {
     diffFile: {
       type: Object,
@@ -29,7 +29,6 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapGetters('batchComments', ['shouldRenderDraftRow', 'draftForLine']),
     diffLinesLength() {
       return this.diffLines.length;
     },

app/assets/javascripts/diffs/mixins/draft_comments.js

+export default {
+  computed: {
+    shouldRenderDraftRow: () => () => false,
+    draftForLine: () => () => ({}),
+  },
+};

app/assets/javascripts/mr_notes/index.js

-import $ from 'jquery';
 import Vue from 'vue';
-import { mapActions, mapState, mapGetters } from 'vuex';
+import initNotesApp from 'ee_else_ce/mr_notes/init_notes';
 import initDiffsApp from '../diffs';
-import notesApp from '../notes/components/notes_app.vue';
 import discussionCounter from '../notes/components/discussion_counter.vue';
 import initDiscussionFilters from '../notes/discussion_filters';
 import store from './stores';
@@ -18,68 +16,7 @@ export default function initMrNotes() {
     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 noteableData = JSON.parse(notesDataset.noteableData);
-      noteableData.noteableType = notesDataset.noteableType;
-      noteableData.targetType = notesDataset.targetType;
-
-      return {
-        noteableData,
-        currentUserData: JSON.parse(notesDataset.currentUserData),
-        notesData: JSON.parse(notesDataset.notesData),
-        helpPagePath: notesDataset.helpPagePath,
-      };
-    },
-    computed: {
-      ...mapGetters(['discussionTabCounter']),
-      ...mapState({
-        activeTab: state => state.page.activeTab,
-      }),
-    },
-    watch: {
-      discussionTabCounter() {
-        this.updateDiscussionTabCounter();
-      },
-    },
-    created() {
-      this.setActiveTab(window.mrTabs.getCurrentAction());
-    },
-    mounted() {
-      this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge');
-      $(document).on('visibilitychange', this.updateDiscussionTabCounter);
-      window.mrTabs.eventHub.$on('MergeRequestTabChange', this.setActiveTab);
-    },
-    beforeDestroy() {
-      $(document).off('visibilitychange', this.updateDiscussionTabCounter);
-      window.mrTabs.eventHub.$off('MergeRequestTabChange', this.setActiveTab);
-    },
-    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',
-          helpPagePath: this.helpPagePath,
-        },
-      });
-    },
-  });
+  initNotesApp();
 
   // eslint-disable-next-line no-new
   new Vue({

app/assets/javascripts/mr_notes/init_notes.js

+import $ from 'jquery';
+import Vue from 'vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import store from 'ee_else_ce/mr_notes/stores';
+import notesApp from '../notes/components/notes_app.vue';
+
+export default () => {
+  // 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 noteableData = JSON.parse(notesDataset.noteableData);
+      noteableData.noteableType = notesDataset.noteableType;
+      noteableData.targetType = notesDataset.targetType;
+
+      return {
+        noteableData,
+        currentUserData: JSON.parse(notesDataset.currentUserData),
+        notesData: JSON.parse(notesDataset.notesData),
+        helpPagePath: notesDataset.helpPagePath,
+      };
+    },
+    computed: {
+      ...mapGetters(['discussionTabCounter']),
+      ...mapState({
+        activeTab: state => state.page.activeTab,
+      }),
+    },
+    watch: {
+      discussionTabCounter() {
+        this.updateDiscussionTabCounter();
+      },
+    },
+    created() {
+      this.setActiveTab(window.mrTabs.getCurrentAction());
+    },
+    mounted() {
+      this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge');
+      $(document).on('visibilitychange', this.updateDiscussionTabCounter);
+      window.mrTabs.eventHub.$on('MergeRequestTabChange', this.setActiveTab);
+    },
+    beforeDestroy() {
+      $(document).off('visibilitychange', this.updateDiscussionTabCounter);
+      window.mrTabs.eventHub.$off('MergeRequestTabChange', this.setActiveTab);
+    },
+    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',
+          helpPagePath: this.helpPagePath,
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/mr_notes/stores/index.js

@@ -2,7 +2,6 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import notesModule from '~/notes/stores/modules';
 import diffsModule from '~/diffs/store/modules';
-import batchCommentsModule from 'ee/batch_comments/stores/modules/batch_comments';
 import mrPageModule from './modules';
 
 Vue.use(Vuex);
@@ -13,7 +12,6 @@ export const createStore = () =>
       page: mrPageModule,
       notes: notesModule(),
       diffs: diffsModule(),
-      batchComments: batchCommentsModule(),
     },
   });
 

ee/app/assets/javascripts/diffs/mixins/draft_comments.js

+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters('batchComments', ['shouldRenderDraftRow', 'draftForLine']),
+  },
+};

ee/app/assets/javascripts/mr_notes/stores/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import notesModule from '~/notes/stores/modules';
+import diffsModule from '~/diffs/store/modules';
+import mrPageModule from '~/mr_notes/stores/modules';
+import batchCommentsModule from 'ee/batch_comments/stores/modules/batch_comments';
+
+Vue.use(Vuex);
+
+export const createStore = () =>
+  new Vuex.Store({
+    modules: {
+      page: mrPageModule,
+      notes: notesModule(),
+      diffs: diffsModule(),
+      batchComments: batchCommentsModule(),
+    },
+  });
+
+export default createStore();

ee/spec/javascripts/batch_comments/components/draft_note_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import DraftNote from 'ee/batch_comments/components/draft_note.vue';
 import NoteableNote from '~/notes/components/noteable_note.vue';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee/batch_comments/stores';
 import '~/behaviors/markdown/render_gfm';
 import { createDraft } from '../mock_data';
 

ee/spec/javascripts/batch_comments/components/drafts_count_spec.js

 import Vue from 'vue';
 import DraftsCount from 'ee/batch_comments/components/drafts_count.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee/batch_comments/stores';
 
 describe('Batch comments drafts count component', () => {
   let vm;

ee/spec/javascripts/batch_comments/components/parallel_draft_comment_row_spec.js

 import Vue from 'vue';
 import ParallelDraftCommentRow from 'ee/batch_comments/components/parallel_draft_comment_row.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee/batch_comments/stores';
 import '~/behaviors/markdown/render_gfm';
 import { createDraft } from '../mock_data';
 

ee/spec/javascripts/batch_comments/components/preview_item_spec.js

 import Vue from 'vue';
 import PreviewItem from 'ee/batch_comments/components/preview_item.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee/batch_comments/stores';
+import diffsModule from '~/diffs/store/modules';
+import notesModule from '~/notes/stores/modules';
 import '~/behaviors/markdown/render_gfm';
 import { createDraft } from '../mock_data';
 
@@ -12,6 +14,8 @@ describe('Batch comments draft preview item component', () => {
 
   function createComponent(isLast = false, extra = {}, extendStore = () => {}) {
     const store = createStore();
+    store.registerModule('diffs', diffsModule());
+    store.registerModule('notes', notesModule());
 
     extendStore(store);
 

ee/spec/javascripts/batch_comments/components/publish_dropdown_spec.js

 import Vue from 'vue';
 import PreviewDropdown from 'ee/batch_comments/components/preview_dropdown.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee/mr_notes/stores';
 import '~/behaviors/markdown/render_gfm';
 import { createDraft } from '../mock_data';
 
-describe('Batch comments draft preview item component', () => {
+describe('Batch comments publish dropdown component', () => {
   let vm;
   let Component;
 

ee/spec/javascripts/notes/components/note_form_spec.js

 import Vue from 'vue';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee/batch_comments/stores';
+import diffsModule from '~/diffs/store/modules';
+import notesModule from '~/notes/stores/modules';
 import issueNoteForm from '~/notes/components/note_form.vue';
 import { keyboardDownEvent } from 'spec/issue_show/helpers';
 import { noteableDataMock, discussionMock, notesDataMock } from 'spec/notes/mock_data';
@@ -13,6 +15,8 @@ describe('issue_note_form component', () => {
     const Component = Vue.extend(issueNoteForm);
 
     store = createStore();
+    store.registerModule('diffs', diffsModule());
+    store.registerModule('notes', notesModule());
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 

spec/javascripts/diffs/components/diff_content_spec.js

 import Vue from 'vue';
 import DiffContentComponent from '~/diffs/components/diff_content.vue';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee_else_ce/mr_notes/stores';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
 import '~/behaviors/markdown/render_gfm';

spec/javascripts/diffs/components/diff_file_spec.js

 import Vue from 'vue';
 import DiffFileComponent from '~/diffs/components/diff_file.vue';
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
-import store from '~/mr_notes/stores';
+import store from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 

spec/javascripts/diffs/components/inline_diff_view_spec.js

 import Vue from 'vue';
 import '~/behaviors/markdown/render_gfm';
 import InlineDiffView from '~/diffs/components/inline_diff_view.vue';
-import store from '~/mr_notes/stores';
+import store from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 import discussionsMockData from '../mock_data/diff_discussions';

spec/javascripts/diffs/components/parallel_diff_view_spec.js

 import Vue from 'vue';
 import ParallelDiffView from '~/diffs/components/parallel_diff_view.vue';
-import store from '~/mr_notes/stores';
+import store from 'ee_else_ce/mr_notes/stores';
 import * as constants from '~/diffs/constants';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
@@ -18,6 +18,10 @@ describe('ParallelDiffView', () => {
     }).$mount();
   });
 
+  afterEach(() => {
+    component.$destroy();
+  });
+
   describe('assigned', () => {
     describe('diffLines', () => {
       it('should normalize lines for empty cells', () => {