CE backport of batch-comments-ee-store-module

8 files changed, 96 insertions, 70 deletions

diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index e781397214d..8c76a555b62 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -1,5 +1,6 @@
 <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';
 
@@ -7,7 +8,10 @@ export default {
   components: {
     inlineDiffCommentRow,
     inlineDiffTableRow,
+    InlineDraftCommentRow: () =>
+      import('ee_component/batch_comments/components/inline_draft_comment_row.vue'),
   },
+  mixins: [draftCommentsMixin],
   props: {
     diffFile: {
       type: Object,
@@ -54,6 +58,11 @@ export default {
           :line="line"
           :help-page-path="helpPagePath"
         />
+        <inline-draft-comment-row
+          v-if="shouldRenderDraftRow(diffFile.file_hash, line)"
+          :key="`draft_${index}`"
+          :draft="draftForLine(diffFile.file_hash, line)"
+        />
       </template>
     </tbody>
   </table>
diff --git a/app/assets/javascripts/diffs/mixins/draft_comments.js b/app/assets/javascripts/diffs/mixins/draft_comments.js
new file mode 100644
index 00000000000..d7bed2a5f0d
--- /dev/null
+++ b/app/assets/javascripts/diffs/mixins/draft_comments.js
@@ -0,0 +1,6 @@
+export default {
+  computed: {
+    shouldRenderDraftRow: () => () => false,
+    draftForLine: () => () => ({}),
+  },
+};
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index 9e99aa4f724..8eccba07c38 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -1,11 +1,9 @@
-import $ from 'jquery';
 import Vue from 'vue';
-import { mapActions, mapState, mapGetters } from 'vuex';
+import store from 'ee_else_ce/mr_notes/stores';
+import initNotesApp from './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';
 import MergeRequest from '../merge_request';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 
@@ -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({
diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js
new file mode 100644
index 00000000000..842a209a545
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/init_notes.js
@@ -0,0 +1,70 @@
+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,
+        },
+      });
+    },
+  });
+};
diff --git a/spec/javascripts/diffs/components/diff_content_spec.js b/spec/javascripts/diffs/components/diff_content_spec.js
index a1bb51963d6..bc9288e4150 100644
--- a/spec/javascripts/diffs/components/diff_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_content_spec.js
@@ -1,6 +1,6 @@
 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';
diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index 65a1c9b8f15..ba04c8c4a4c 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -1,7 +1,7 @@
 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';
 
diff --git a/spec/javascripts/diffs/components/inline_diff_view_spec.js b/spec/javascripts/diffs/components/inline_diff_view_spec.js
index 2316ee29106..4452106580a 100644
--- a/spec/javascripts/diffs/components/inline_diff_view_spec.js
+++ b/spec/javascripts/diffs/components/inline_diff_view_spec.js
@@ -1,7 +1,7 @@
 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';
diff --git a/spec/javascripts/diffs/components/parallel_diff_view_spec.js b/spec/javascripts/diffs/components/parallel_diff_view_spec.js
index 6f6b1c41915..236bda96145 100644
--- a/spec/javascripts/diffs/components/parallel_diff_view_spec.js
+++ b/spec/javascripts/diffs/components/parallel_diff_view_spec.js
@@ -1,6 +1,6 @@
 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', () => {