From d90bdf35cf975b47c3c4a37c5c7691365e1e39fa Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Thu, 11 Jun 2020 15:33:35 -0500
Subject: [PATCH 01/10] Highlight commented rows

---
 .../components/inline_diff_table_row.vue      | 10 +++++++++-
 .../diffs/components/inline_diff_view.vue     | 20 +++++++++++++++++++
 .../components/parallel_diff_table_row.vue    |  7 +++++++
 .../diffs/components/parallel_diff_view.vue   | 20 +++++++++++++++++++
 .../notes/components/noteable_note.vue        |  3 +++
 .../javascripts/notes/stores/actions.js       |  4 ++++
 .../javascripts/notes/stores/getters.js       |  2 ++
 .../javascripts/notes/stores/modules/index.js |  1 +
 .../notes/stores/mutation_types.js            |  1 +
 .../javascripts/notes/stores/mutations.js     |  4 ++++
 .../jdb-highlight-commented-rows.yml          |  5 +++++
 11 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 changelogs/unreleased/jdb-highlight-commented-rows.yml

diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
index 4e228577666f28..168e8c6c14e30b 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
@@ -37,6 +37,11 @@ export default {
       required: false,
       default: false,
     },
+    isCommented: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -47,7 +52,10 @@ export default {
     ...mapGetters('diffs', ['fileLineCoverage']),
     ...mapState({
       isHighlighted(state) {
-        return this.line.line_code !== null && this.line.line_code === state.diffs.highlightedRow;
+        if (this.isCommented) return true;
+
+        const lineCode = this.line.line_code;
+        return lineCode ? lineCode === state.diffs.highlightedRow : false;
       },
     }),
     isContextLine() {
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index babf48f41f3563..67f478be2b40f1 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -31,9 +31,28 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
+    ...mapGetters(['selectedCommentPosition']),
     diffLinesLength() {
       return this.diffLines.length;
     },
+    commentedLines() {
+      if (!this.selectedCommentPosition) return { startLine: Infinity, endLine: -Infinity };
+
+      if (this.selectedCommentPosition.line_range) {
+        const { start, end } = this.selectedCommentPosition.line_range;
+        const startLine = this.diffLines.findIndex(l => l.line_code === start.line_code);
+        const endLine = this.diffLines.findIndex(l => l.line_code === end.line_code);
+
+        return { startLine, endLine };
+      }
+
+      const start = this.selectedCommentPosition.start_line_code;
+      const end = this.selectedCommentPosition.end_line_code;
+      const startLine = this.diffLines.findIndex(l => l.line_code === start);
+      const endLine = this.diffLines.findIndex(l => l.line_code === end);
+
+      return { startLine, endLine };
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -67,6 +86,7 @@ export default {
           :file-path="diffFile.file_path"
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
+          :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine"
         />
         <inline-diff-comment-row
           :key="`icr-${line.line_code || index}`"
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
index c2553dc87a6b35..ccb32a2a745536 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
@@ -40,6 +40,11 @@ export default {
       required: false,
       default: false,
     },
+    isCommented: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -51,6 +56,8 @@ export default {
     ...mapGetters('diffs', ['fileLineCoverage']),
     ...mapState({
       isHighlighted(state) {
+        if (this.isCommented) return true;
+
         const lineCode =
           (this.line.left && this.line.left.line_code) ||
           (this.line.right && this.line.right.line_code);
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 502c458bf2e1b7..ae951f880249ff 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -31,9 +31,28 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
+    ...mapGetters(['selectedCommentPosition']),
     diffLinesLength() {
       return this.diffLines.length;
     },
+    commentedLines() {
+      if (!this.selectedCommentPosition) return { startLine: Infinity, endLine: -Infinity };
+
+      if (this.selectedCommentPosition.line_range) {
+        const { start, end } = this.selectedCommentPosition.line_range;
+        const startLine = this.diffLines.findIndex(l => l.line_code === start.line_code);
+        const endLine = this.diffLines.findIndex(l => l.line_code === end.line_code);
+
+        return { startLine, endLine };
+      }
+
+      const start = this.selectedCommentPosition.start_line_code;
+      const end = this.selectedCommentPosition.end_line_code;
+      const startLine = this.diffLines.findIndex(l => l.line_code === start);
+      const endLine = this.diffLines.findIndex(l => l.line_code === end);
+
+      return { startLine, endLine };
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -69,6 +88,7 @@ export default {
           :file-path="diffFile.file_path"
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
+          :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine"
         />
         <parallel-diff-comment-row
           :key="`dcr-${line.line_code || index}`"
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 45cf7888aff739..0ffed28efc460d 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -205,6 +205,7 @@ export default {
       'toggleResolveNote',
       'scrollToNoteIfNeeded',
       'updateAssignees',
+      'setSelectedCommentPostision',
     ]),
     editHandler() {
       this.isEditing = true;
@@ -332,6 +333,8 @@ export default {
     :data-award-url="note.toggle_award_path"
     :data-note-id="note.id"
     class="note note-wrapper qa-noteable-note-item"
+    @mouseenter.native="setSelectedCommentPostision(note.position.line_range)"
+    @mouseleave.native="setSelectedCommentPostision(null)"
   >
     <div v-if="showMultiLineComment" data-testid="multiline-comment">
       <multiline-comment-form
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 8a7734f4d310e4..6b134909ba5de3 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -99,6 +99,10 @@ export const setDiscussionSortDirection = ({ commit }, direction) => {
   commit(types.SET_DISCUSSIONS_SORT, direction);
 };
 
+export const setSelectedCommentPostision = ({ commit }, position) => {
+  commit(types.SET_SELECTED_COMMENT_POSTISION, position);
+};
+
 export const removeNote = ({ commit, dispatch, state }, note) => {
   const discussion = state.discussions.find(({ id }) => id === note.discussion_id);
 
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index 85997b44bccf48..44f6723b71b257 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -230,5 +230,7 @@ export const getDiscussion = state => discussionId =>
 
 export const commentsDisabled = state => state.commentsDisabled;
 
+export const selectedCommentPosition = state => state.selectedCommentPosition;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js
index c71e62cb551fff..397def915142f9 100644
--- a/app/assets/javascripts/notes/stores/modules/index.js
+++ b/app/assets/javascripts/notes/stores/modules/index.js
@@ -12,6 +12,7 @@ export default () => ({
     lastFetchedAt: null,
     currentDiscussionId: null,
     batchSuggestionsInfo: [],
+    selectedCommentPosition: null,
 
     // View layer
     isToggleStateButtonLoading: false,
diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js
index efb24479f7c0bf..78561630413214 100644
--- a/app/assets/javascripts/notes/stores/mutation_types.js
+++ b/app/assets/javascripts/notes/stores/mutation_types.js
@@ -33,6 +33,7 @@ export const SET_EXPAND_DISCUSSIONS = 'SET_EXPAND_DISCUSSIONS';
 export const UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS = 'UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS';
 export const SET_CURRENT_DISCUSSION_ID = 'SET_CURRENT_DISCUSSION_ID';
 export const SET_DISCUSSIONS_SORT = 'SET_DISCUSSIONS_SORT';
+export const SET_SELECTED_COMMENT_POSTISION = 'SET_SELECTED_COMMENT_POSITION';
 
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 7ed0dd84b655f4..7a0149b6d8a3f7 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -308,6 +308,10 @@ export default {
     state.discussionSortOrder = sort;
   },
 
+  [types.SET_SELECTED_COMMENT_POSTISION](state, position) {
+    state.selectedCommentPosition = position;
+  },
+
   [types.DISABLE_COMMENTS](state, value) {
     state.commentsDisabled = value;
   },
diff --git a/changelogs/unreleased/jdb-highlight-commented-rows.yml b/changelogs/unreleased/jdb-highlight-commented-rows.yml
new file mode 100644
index 00000000000000..a4aa76ca6848e8
--- /dev/null
+++ b/changelogs/unreleased/jdb-highlight-commented-rows.yml
@@ -0,0 +1,5 @@
+---
+title: Highlight commented rows
+merge_request: 34432
+author:
+type: added
-- 
GitLab


From 7be0e264c3bea1f22f611777bfbaff067c4585b7 Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Tue, 16 Jun 2020 09:52:27 -0500
Subject: [PATCH 02/10] Code review changes

---
 .../diffs/components/inline_diff_view.vue     | 22 ++++---------------
 .../diffs/components/parallel_diff_view.vue   | 22 ++++---------------
 .../components/multiline_comment_utils.js     | 19 ++++++++++++++++
 .../javascripts/notes/stores/getters.js       |  2 --
 4 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 67f478be2b40f1..866efca77109bd 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -1,10 +1,11 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import InlineDraftCommentRow from '~/batch_comments/components/inline_draft_comment_row.vue';
 import inlineDiffTableRow from './inline_diff_table_row.vue';
 import inlineDiffCommentRow from './inline_diff_comment_row.vue';
 import inlineDiffExpansionRow from './inline_diff_expansion_row.vue';
+import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 
 export default {
   components: {
@@ -31,27 +32,12 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['selectedCommentPosition']),
+    ...mapState(['selectedCommentPosition']),
     diffLinesLength() {
       return this.diffLines.length;
     },
     commentedLines() {
-      if (!this.selectedCommentPosition) return { startLine: Infinity, endLine: -Infinity };
-
-      if (this.selectedCommentPosition.line_range) {
-        const { start, end } = this.selectedCommentPosition.line_range;
-        const startLine = this.diffLines.findIndex(l => l.line_code === start.line_code);
-        const endLine = this.diffLines.findIndex(l => l.line_code === end.line_code);
-
-        return { startLine, endLine };
-      }
-
-      const start = this.selectedCommentPosition.start_line_code;
-      const end = this.selectedCommentPosition.end_line_code;
-      const startLine = this.diffLines.findIndex(l => l.line_code === start);
-      const endLine = this.diffLines.findIndex(l => l.line_code === end);
-
-      return { startLine, endLine };
+      return getCommentedLines(this.selectedCommentPosition, this.diffLines);
     },
   },
   userColorScheme: window.gon.user_color_scheme,
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index ae951f880249ff..5dba6ed2444954 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -1,10 +1,11 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import ParallelDraftCommentRow from '~/batch_comments/components/parallel_draft_comment_row.vue';
 import parallelDiffTableRow from './parallel_diff_table_row.vue';
 import parallelDiffCommentRow from './parallel_diff_comment_row.vue';
 import parallelDiffExpansionRow from './parallel_diff_expansion_row.vue';
+import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 
 export default {
   components: {
@@ -31,27 +32,12 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['selectedCommentPosition']),
+    ...mapState(['selectedCommentPosition']),
     diffLinesLength() {
       return this.diffLines.length;
     },
     commentedLines() {
-      if (!this.selectedCommentPosition) return { startLine: Infinity, endLine: -Infinity };
-
-      if (this.selectedCommentPosition.line_range) {
-        const { start, end } = this.selectedCommentPosition.line_range;
-        const startLine = this.diffLines.findIndex(l => l.line_code === start.line_code);
-        const endLine = this.diffLines.findIndex(l => l.line_code === end.line_code);
-
-        return { startLine, endLine };
-      }
-
-      const start = this.selectedCommentPosition.start_line_code;
-      const end = this.selectedCommentPosition.end_line_code;
-      const startLine = this.diffLines.findIndex(l => l.line_code === start);
-      const endLine = this.diffLines.findIndex(l => l.line_code === end);
-
-      return { startLine, endLine };
+      return getCommentedLines(this.selectedCommentPosition, this.diffLines);
     },
   },
   userColorScheme: window.gon.user_color_scheme,
diff --git a/app/assets/javascripts/notes/components/multiline_comment_utils.js b/app/assets/javascripts/notes/components/multiline_comment_utils.js
index e8a834df7138c1..2454e403cf6211 100644
--- a/app/assets/javascripts/notes/components/multiline_comment_utils.js
+++ b/app/assets/javascripts/notes/components/multiline_comment_utils.js
@@ -90,3 +90,22 @@ export function formatLineRange(start, end) {
     end: extractProps(end),
   };
 }
+
+export function getCommentedLines(selectedCommentPosition, diffLines) {
+  if (!selectedCommentPosition) return { startLine: 0, endLine: diffLines.length - 1 };
+
+  if (selectedCommentPosition.line_range) {
+    const { start, end } = selectedCommentPosition.line_range;
+    const startLine = diffLines.findIndex(l => l.line_code === start.line_code);
+    const endLine = diffLines.findIndex(l => l.line_code === end.line_code);
+
+    return { startLine, endLine };
+  }
+
+  const start = selectedCommentPosition.start_line_code;
+  const end = selectedCommentPosition.end_line_code;
+  const startLine = diffLines.findIndex(l => l.line_code === start);
+  const endLine = diffLines.findIndex(l => l.line_code === end);
+
+  return { startLine, endLine };
+}
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index 44f6723b71b257..85997b44bccf48 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -230,7 +230,5 @@ export const getDiscussion = state => discussionId =>
 
 export const commentsDisabled = state => state.commentsDisabled;
 
-export const selectedCommentPosition = state => state.selectedCommentPosition;
-
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
-- 
GitLab


From 912f92ee63d17854884267481bf4e35e160791ed Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Thu, 9 Jul 2020 17:15:11 -0500
Subject: [PATCH 03/10] Fix  unresponsive state issue

---
 app/assets/javascripts/diffs/components/inline_diff_view.vue  | 4 ++--
 .../javascripts/diffs/components/parallel_diff_view.vue       | 2 +-
 app/assets/javascripts/notes/stores/getters.js                | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 866efca77109bd..cd89eb23e619ec 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapGetters } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import InlineDraftCommentRow from '~/batch_comments/components/inline_draft_comment_row.vue';
 import inlineDiffTableRow from './inline_diff_table_row.vue';
@@ -32,7 +32,7 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapState(['selectedCommentPosition']),
+    ...mapGetters(['selectedCommentPosition']),
     diffLinesLength() {
       return this.diffLines.length;
     },
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 5dba6ed2444954..0fe0f978826237 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -32,7 +32,7 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapState(['selectedCommentPosition']),
+    ...mapGetters(['selectedCommentPosition']),
     diffLinesLength() {
       return this.diffLines.length;
     },
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index 85997b44bccf48..44f6723b71b257 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -230,5 +230,7 @@ export const getDiscussion = state => discussionId =>
 
 export const commentsDisabled = state => state.commentsDisabled;
 
+export const selectedCommentPosition = state => state.selectedCommentPosition;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
-- 
GitLab


From dcbd07041497b9b6e5a1425ce8151e8d1987b047 Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Thu, 9 Jul 2020 17:15:22 -0500
Subject: [PATCH 04/10] Highlight rows when selecting start line

---
 .../diffs/components/parallel_diff_view.vue   |  2 +-
 .../notes/components/discussion_notes.vue     |  8 +++++--
 .../components/multiline_comment_form.vue     | 16 +++++++++++++
 .../components/multiline_comment_utils.js     | 24 +++++++++----------
 .../notes/components/noteable_note.vue        |  3 ---
 5 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 0fe0f978826237..8904239f8898ff 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapGetters } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import ParallelDraftCommentRow from '~/batch_comments/components/parallel_draft_comment_row.vue';
 import parallelDiffTableRow from './parallel_diff_table_row.vue';
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index b5e5daa88093cf..0944379b4a0de6 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -74,7 +74,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['toggleDiscussion']),
+    ...mapActions(['toggleDiscussion', 'setSelectedCommentPostision']),
     componentName(note) {
       if (note.isPlaceholderNote) {
         if (note.placeholderType === SYSTEM_NOTE) {
@@ -99,7 +99,11 @@ export default {
 
 <template>
   <div class="discussion-notes">
-    <ul class="notes">
+    <ul
+      class="notes"
+      @mouseenter="setSelectedCommentPostision(discussion.position.line_range)"
+      @mouseleave="setSelectedCommentPostision(null)"
+    >
       <template v-if="shouldGroupReplies">
         <component
           :is="componentName(firstNote)"
diff --git a/app/assets/javascripts/notes/components/multiline_comment_form.vue b/app/assets/javascripts/notes/components/multiline_comment_form.vue
index 6aa9a9aa450974..da80f4b8aa20f4 100644
--- a/app/assets/javascripts/notes/components/multiline_comment_form.vue
+++ b/app/assets/javascripts/notes/components/multiline_comment_form.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapActions } from 'vuex';
 import { GlFormSelect, GlSprintf } from '@gitlab/ui';
 import { getSymbol, getLineClasses } from './multiline_comment_utils';
 
@@ -39,8 +40,13 @@ export default {
       old_line: line.old_line,
       new_line: line.new_line,
     };
+    this.highlightSelection();
+  },
+  destroyed() {
+    this.setSelectedCommentPostision();
   },
   methods: {
+    ...mapActions(['setSelectedCommentPostision']),
     getSymbol({ type }) {
       return getSymbol(type);
     },
@@ -50,6 +56,16 @@ export default {
     updateCommentLineStart(value) {
       this.commentLineStart = value;
       this.$emit('input', value);
+      this.highlightSelection();
+    },
+    highlightSelection() {
+      const { line_code, new_line, old_line, type } = this.line;
+      const updatedLineRange = {
+        start: { ...this.commentLineStart },
+        end: { line_code, new_line, old_line, type },
+      };
+
+      this.setSelectedCommentPostision(updatedLineRange);
     },
   },
 };
diff --git a/app/assets/javascripts/notes/components/multiline_comment_utils.js b/app/assets/javascripts/notes/components/multiline_comment_utils.js
index 2454e403cf6211..dbae10c8f6c426 100644
--- a/app/assets/javascripts/notes/components/multiline_comment_utils.js
+++ b/app/assets/javascripts/notes/components/multiline_comment_utils.js
@@ -92,20 +92,20 @@ export function formatLineRange(start, end) {
 }
 
 export function getCommentedLines(selectedCommentPosition, diffLines) {
-  if (!selectedCommentPosition) return { startLine: 0, endLine: diffLines.length - 1 };
-
-  if (selectedCommentPosition.line_range) {
-    const { start, end } = selectedCommentPosition.line_range;
-    const startLine = diffLines.findIndex(l => l.line_code === start.line_code);
-    const endLine = diffLines.findIndex(l => l.line_code === end.line_code);
-
-    return { startLine, endLine };
+  if (!selectedCommentPosition) {
+    // This structure simplifies the logic that consumes this result
+    // by keeping the returned shape the same and adjusting the bounds
+    // to something unreachable. This way our component logic stays:
+    // "if index between start and end"
+    return {
+      startLine: diffLines.length + 1,
+      endLine: diffLines.length + 1,
+    };
   }
 
-  const start = selectedCommentPosition.start_line_code;
-  const end = selectedCommentPosition.end_line_code;
-  const startLine = diffLines.findIndex(l => l.line_code === start);
-  const endLine = diffLines.findIndex(l => l.line_code === end);
+  const { start, end } = selectedCommentPosition;
+  const startLine = diffLines.findIndex(l => l.line_code === start.line_code);
+  const endLine = diffLines.findIndex(l => l.line_code === end.line_code);
 
   return { startLine, endLine };
 }
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 0ffed28efc460d..45cf7888aff739 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -205,7 +205,6 @@ export default {
       'toggleResolveNote',
       'scrollToNoteIfNeeded',
       'updateAssignees',
-      'setSelectedCommentPostision',
     ]),
     editHandler() {
       this.isEditing = true;
@@ -333,8 +332,6 @@ export default {
     :data-award-url="note.toggle_award_path"
     :data-note-id="note.id"
     class="note note-wrapper qa-noteable-note-item"
-    @mouseenter.native="setSelectedCommentPostision(note.position.line_range)"
-    @mouseleave.native="setSelectedCommentPostision(null)"
   >
     <div v-if="showMultiLineComment" data-testid="multiline-comment">
       <multiline-comment-form
-- 
GitLab


From e8c9c4f6d870abca92e59bf0d47bb7debeb193fe Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Thu, 9 Jul 2020 18:32:56 -0500
Subject: [PATCH 05/10] Add tests and correct a typo

---
 .../javascripts/notes/stores/actions.js       |  2 +-
 .../notes/stores/mutation_types.js            |  2 +-
 .../javascripts/notes/stores/mutations.js     |  2 +-
 .../components/inline_diff_table_row_spec.js  | 29 +++++++++++++------
 .../parallel_diff_table_row_spec.js           | 28 +++++++++++++-----
 .../multiline_comment_utils_spec.js           | 27 +++++++++++++++++
 spec/frontend/notes/stores/actions_spec.js    | 13 +++++++++
 spec/frontend/notes/stores/mutation_spec.js   | 10 +++++++
 8 files changed, 94 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 6b134909ba5de3..f994d732b3d567 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -100,7 +100,7 @@ export const setDiscussionSortDirection = ({ commit }, direction) => {
 };
 
 export const setSelectedCommentPostision = ({ commit }, position) => {
-  commit(types.SET_SELECTED_COMMENT_POSTISION, position);
+  commit(types.SET_SELECTED_COMMENT_POSITION, position);
 };
 
 export const removeNote = ({ commit, dispatch, state }, note) => {
diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js
index 78561630413214..a7b1d90102f305 100644
--- a/app/assets/javascripts/notes/stores/mutation_types.js
+++ b/app/assets/javascripts/notes/stores/mutation_types.js
@@ -33,7 +33,7 @@ export const SET_EXPAND_DISCUSSIONS = 'SET_EXPAND_DISCUSSIONS';
 export const UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS = 'UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS';
 export const SET_CURRENT_DISCUSSION_ID = 'SET_CURRENT_DISCUSSION_ID';
 export const SET_DISCUSSIONS_SORT = 'SET_DISCUSSIONS_SORT';
-export const SET_SELECTED_COMMENT_POSTISION = 'SET_SELECTED_COMMENT_POSITION';
+export const SET_SELECTED_COMMENT_POSITION = 'SET_SELECTED_COMMENT_POSITION';
 
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 7a0149b6d8a3f7..4222144cfb1a15 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -308,7 +308,7 @@ export default {
     state.discussionSortOrder = sort;
   },
 
-  [types.SET_SELECTED_COMMENT_POSTISION](state, position) {
+  [types.SET_SELECTED_COMMENT_POSITION](state, position) {
     state.selectedCommentPosition = position;
   },
 
diff --git a/spec/frontend/diffs/components/inline_diff_table_row_spec.js b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
index 66349727b110ee..409ac11d26b625 100644
--- a/spec/frontend/diffs/components/inline_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
@@ -1,21 +1,25 @@
-import Vue from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import { createStore } from '~/mr_notes/stores';
 import InlineDiffTableRow from '~/diffs/components/inline_diff_table_row.vue';
 import diffFileMockData from '../mock_data/diff_file';
 
 describe('InlineDiffTableRow', () => {
+  let wrapper;
   let vm;
   const thisLine = diffFileMockData.highlighted_diff_lines[0];
 
   beforeEach(() => {
-    vm = createComponentWithStore(Vue.extend(InlineDiffTableRow), createStore(), {
-      line: thisLine,
-      fileHash: diffFileMockData.file_hash,
-      filePath: diffFileMockData.file_path,
-      contextLinesPath: 'contextLinesPath',
-      isHighlighted: false,
-    }).$mount();
+    wrapper = mount(InlineDiffTableRow, {
+      store: createStore(),
+      propsData: {
+        line: thisLine,
+        fileHash: diffFileMockData.file_hash,
+        filePath: diffFileMockData.file_path,
+        contextLinesPath: 'contextLinesPath',
+        isHighlighted: false,
+      },
+    });
+    vm = wrapper.vm;
   });
 
   it('does not add hll class to line content when line does not match highlighted row', done => {
@@ -41,6 +45,13 @@ describe('InlineDiffTableRow', () => {
       .catch(done.fail);
   });
 
+  it('adds hll class to lineContent when line is part of a multiline comment', () => {
+    wrapper.setProps({ isCommented: true });
+    return vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.line_content').classList).toContain('hll');
+    });
+  });
+
   describe('sets coverage title and class', () => {
     it('for lines with coverage', done => {
       vm.$nextTick()
diff --git a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
index 6b92d448cf58bf..56f108723e9bd9 100644
--- a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import ParallelDiffTableRow from '~/diffs/components/parallel_diff_table_row.vue';
@@ -6,18 +7,24 @@ import diffFileMockData from '../mock_data/diff_file';
 
 describe('ParallelDiffTableRow', () => {
   describe('when one side is empty', () => {
+    let wrapper;
     let vm;
     const thisLine = diffFileMockData.parallel_diff_lines[0];
     const rightLine = diffFileMockData.parallel_diff_lines[0].right;
 
     beforeEach(() => {
-      vm = createComponentWithStore(Vue.extend(ParallelDiffTableRow), createStore(), {
-        line: thisLine,
-        fileHash: diffFileMockData.file_hash,
-        filePath: diffFileMockData.file_path,
-        contextLinesPath: 'contextLinesPath',
-        isHighlighted: false,
-      }).$mount();
+      wrapper = mount(ParallelDiffTableRow, {
+        store: createStore(),
+        propsData: {
+          line: thisLine,
+          fileHash: diffFileMockData.file_hash,
+          filePath: diffFileMockData.file_path,
+          contextLinesPath: 'contextLinesPath',
+          isHighlighted: false,
+        },
+      });
+
+      vm = wrapper.vm;
     });
 
     it('does not highlight non empty line content when line does not match highlighted row', done => {
@@ -42,6 +49,13 @@ describe('ParallelDiffTableRow', () => {
         .then(done)
         .catch(done.fail);
     });
+
+    it('highlights nonempty line content when line is part of a multiline comment', () => {
+      wrapper.setProps({ isCommented: true });
+      return vm.$nextTick().then(() => {
+        expect(vm.$el.querySelector('.line_content.right-side').classList).toContain('hll');
+      });
+    });
   });
 
   describe('when both sides have content', () => {
diff --git a/spec/frontend/notes/components/multiline_comment_utils_spec.js b/spec/frontend/notes/components/multiline_comment_utils_spec.js
index 4afb8d976712a0..af4394cc648aa0 100644
--- a/spec/frontend/notes/components/multiline_comment_utils_spec.js
+++ b/spec/frontend/notes/components/multiline_comment_utils_spec.js
@@ -2,6 +2,7 @@ import {
   getSymbol,
   getStartLineNumber,
   getEndLineNumber,
+  getCommentedLines,
 } from '~/notes/components/multiline_comment_utils';
 
 describe('Multiline comment utilities', () => {
@@ -33,4 +34,30 @@ describe('Multiline comment utilities', () => {
       expect(getSymbol(type)).toEqual(result);
     });
   });
+  describe('getCommentedLines', () => {
+    const diffLines = [{ line_code: '1' }, { line_code: '2' }, { line_code: '3' }];
+    it('returns a default object when `selectedCommentPosition` is not provided', () => {
+      expect(getCommentedLines(undefined, diffLines)).toEqual({ startLine: 4, endLine: 4 });
+    });
+    it('returns an object with startLine and endLine equal to 0', () => {
+      const selectedCommentPosition = {
+        start: { line_code: '1' },
+        end: { line_code: '1' },
+      };
+      expect(getCommentedLines(selectedCommentPosition, diffLines)).toEqual({
+        startLine: 0,
+        endLine: 0,
+      });
+    });
+    it('returns an object with startLine and endLine equal to 0 and 1', () => {
+      const selectedCommentPosition = {
+        start: { line_code: '1' },
+        end: { line_code: '2' },
+      };
+      expect(getCommentedLines(selectedCommentPosition, diffLines)).toEqual({
+        startLine: 0,
+        endLine: 1,
+      });
+    });
+  });
 });
diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js
index a4d8927e89b9c3..769a3ba9d774ee 100644
--- a/spec/frontend/notes/stores/actions_spec.js
+++ b/spec/frontend/notes/stores/actions_spec.js
@@ -1127,6 +1127,19 @@ describe('Actions Notes Store', () => {
     });
   });
 
+  describe('setSelectedCommentPostision', () => {
+    it('calls the correct mutation with the correct args', done => {
+      testAction(
+        actions.setSelectedCommentPostision,
+        {},
+        {},
+        [{ type: mutationTypes.SET_SELECTED_COMMENT_POSITION, payload: {} }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('softDeleteDescriptionVersion', () => {
     const endpoint = '/path/to/diff/1';
     const payload = {
diff --git a/spec/frontend/notes/stores/mutation_spec.js b/spec/frontend/notes/stores/mutation_spec.js
index 78cda0d038db57..af9d48fd7ffb87 100644
--- a/spec/frontend/notes/stores/mutation_spec.js
+++ b/spec/frontend/notes/stores/mutation_spec.js
@@ -524,6 +524,16 @@ describe('Notes Store mutations', () => {
     });
   });
 
+  describe('SET_SELECTED_COMMENT_POSITION', () => {
+    it('should set comments disabled state', () => {
+      const state = {};
+
+      mutations.SET_SELECTED_COMMENT_POSITION(state, {});
+
+      expect(state.selectedCommentPosition).toEqual({});
+    });
+  });
+
   describe('DISABLE_COMMENTS', () => {
     it('should set comments disabled state', () => {
       const state = {};
-- 
GitLab


From dda9939bd6e879fbc8ce08bc1a85f68c486ef9ba Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Mon, 13 Jul 2020 21:28:35 -0500
Subject: [PATCH 06/10] Fix saving state between hover and start change

Save two separate states for hover and start selection.
Make start selection be the default.
---
 .../javascripts/batch_comments/components/draft_note.vue   | 7 ++++++-
 .../javascripts/diffs/components/inline_diff_view.vue      | 7 +++++--
 .../javascripts/diffs/components/parallel_diff_view.vue    | 7 +++++--
 .../javascripts/notes/components/discussion_notes.vue      | 6 +++---
 .../notes/components/multiline_comment_form.vue            | 6 +++---
 app/assets/javascripts/notes/components/noteable_note.vue  | 4 ++++
 app/assets/javascripts/notes/stores/actions.js             | 6 +++++-
 app/assets/javascripts/notes/stores/getters.js             | 2 ++
 app/assets/javascripts/notes/stores/modules/index.js       | 1 +
 app/assets/javascripts/notes/stores/mutation_types.js      | 1 +
 app/assets/javascripts/notes/stores/mutations.js           | 4 ++++
 .../diffs/components/inline_diff_table_row_spec.js         | 4 ++--
 spec/frontend/notes/stores/actions_spec.js                 | 4 ++--
 13 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index db5516b7b93316..42cf27da351ca7 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -51,6 +51,7 @@ export default {
       'scrollToDraft',
       'toggleResolveDiscussion',
     ]),
+    ...mapActions(['setSelectedCommentPositionHover']),
     update(data) {
       this.updateDraft(data);
     },
@@ -68,7 +69,11 @@ export default {
 </script>
 <template>
   <article class="draft-note-component note-wrapper">
-    <ul class="notes draft-notes">
+    <ul
+      class="notes draft-notes"
+      @mouseenter="setSelectedCommentPositionHover(draft.position.line_range)"
+      @mouseleave="setSelectedCommentPositionHover()"
+    >
       <noteable-note
         :note="draft"
         :line="line"
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index cd89eb23e619ec..880aa65c3e9f40 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -32,12 +32,15 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['selectedCommentPosition']),
+    ...mapGetters(['selectedCommentPosition', 'selectedCommentPositionHover']),
     diffLinesLength() {
       return this.diffLines.length;
     },
     commentedLines() {
-      return getCommentedLines(this.selectedCommentPosition, this.diffLines);
+      return getCommentedLines(
+        this.selectedCommentPosition || this.selectedCommentPositionHover,
+        this.diffLines,
+      );
     },
   },
   userColorScheme: window.gon.user_color_scheme,
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 8904239f8898ff..9e92134bbdc725 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -32,12 +32,15 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['selectedCommentPosition']),
+    ...mapGetters(['selectedCommentPosition', 'selectedCommentPositionHover']),
     diffLinesLength() {
       return this.diffLines.length;
     },
     commentedLines() {
-      return getCommentedLines(this.selectedCommentPosition, this.diffLines);
+      return getCommentedLines(
+        this.selectedCommentPosition || this.selectedCommentPositionHover,
+        this.diffLines,
+      );
     },
   },
   userColorScheme: window.gon.user_color_scheme,
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 0944379b4a0de6..458da5cf67f2b8 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -74,7 +74,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['toggleDiscussion', 'setSelectedCommentPostision']),
+    ...mapActions(['toggleDiscussion', 'setSelectedCommentPositionHover']),
     componentName(note) {
       if (note.isPlaceholderNote) {
         if (note.placeholderType === SYSTEM_NOTE) {
@@ -101,8 +101,8 @@ export default {
   <div class="discussion-notes">
     <ul
       class="notes"
-      @mouseenter="setSelectedCommentPostision(discussion.position.line_range)"
-      @mouseleave="setSelectedCommentPostision(null)"
+      @mouseenter="setSelectedCommentPositionHover(discussion.position.line_range)"
+      @mouseleave="setSelectedCommentPositionHover()"
     >
       <template v-if="shouldGroupReplies">
         <component
diff --git a/app/assets/javascripts/notes/components/multiline_comment_form.vue b/app/assets/javascripts/notes/components/multiline_comment_form.vue
index da80f4b8aa20f4..bb13eb87af729b 100644
--- a/app/assets/javascripts/notes/components/multiline_comment_form.vue
+++ b/app/assets/javascripts/notes/components/multiline_comment_form.vue
@@ -43,10 +43,10 @@ export default {
     this.highlightSelection();
   },
   destroyed() {
-    this.setSelectedCommentPostision();
+    this.setSelectedCommentPosition();
   },
   methods: {
-    ...mapActions(['setSelectedCommentPostision']),
+    ...mapActions(['setSelectedCommentPosition']),
     getSymbol({ type }) {
       return getSymbol(type);
     },
@@ -65,7 +65,7 @@ export default {
         end: { line_code, new_line, old_line, type },
       };
 
-      this.setSelectedCommentPostision(updatedLineRange);
+      this.setSelectedCommentPosition(updatedLineRange);
     },
   },
 };
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 45cf7888aff739..a9c7c3bfb7b842 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -186,6 +186,7 @@ export default {
     eventHub.$on('enterEditMode', ({ noteId }) => {
       if (noteId === this.note.id) {
         this.isEditing = true;
+        this.setSelectedCommentPositionHover();
         this.scrollToNoteIfNeeded($(this.$el));
       }
     });
@@ -205,9 +206,11 @@ export default {
       'toggleResolveNote',
       'scrollToNoteIfNeeded',
       'updateAssignees',
+      'setSelectedCommentPositionHover',
     ]),
     editHandler() {
       this.isEditing = true;
+      this.setSelectedCommentPositionHover();
       this.$emit('handleEdit');
     },
     deleteHandler() {
@@ -284,6 +287,7 @@ export default {
           } else {
             this.isRequesting = false;
             this.isEditing = true;
+            this.setSelectedCommentPositionHover();
             this.$nextTick(() => {
               const msg = __('Something went wrong while editing your comment. Please try again.');
               Flash(msg, 'alert', this.$el);
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index f994d732b3d567..5b2ab25555749f 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -99,10 +99,14 @@ export const setDiscussionSortDirection = ({ commit }, direction) => {
   commit(types.SET_DISCUSSIONS_SORT, direction);
 };
 
-export const setSelectedCommentPostision = ({ commit }, position) => {
+export const setSelectedCommentPosition = ({ commit }, position) => {
   commit(types.SET_SELECTED_COMMENT_POSITION, position);
 };
 
+export const setSelectedCommentPositionHover = ({ commit }, position) => {
+  commit(types.SET_SELECTED_COMMENT_POSITION_HOVER, position);
+};
+
 export const removeNote = ({ commit, dispatch, state }, note) => {
   const discussion = state.discussions.find(({ id }) => id === note.discussion_id);
 
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index 44f6723b71b257..5edde24d8eca15 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -232,5 +232,7 @@ export const commentsDisabled = state => state.commentsDisabled;
 
 export const selectedCommentPosition = state => state.selectedCommentPosition;
 
+export const selectedCommentPositionHover = state => state.selectedCommentPositionHover;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js
index 397def915142f9..aff0a966dbb4cd 100644
--- a/app/assets/javascripts/notes/stores/modules/index.js
+++ b/app/assets/javascripts/notes/stores/modules/index.js
@@ -13,6 +13,7 @@ export default () => ({
     currentDiscussionId: null,
     batchSuggestionsInfo: [],
     selectedCommentPosition: null,
+    selectedCommentPositionHover: null,
 
     // View layer
     isToggleStateButtonLoading: false,
diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js
index a7b1d90102f305..f2236b18bebcbb 100644
--- a/app/assets/javascripts/notes/stores/mutation_types.js
+++ b/app/assets/javascripts/notes/stores/mutation_types.js
@@ -34,6 +34,7 @@ export const UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS = 'UPDATE_RESOLVABLE_DISCUSSIO
 export const SET_CURRENT_DISCUSSION_ID = 'SET_CURRENT_DISCUSSION_ID';
 export const SET_DISCUSSIONS_SORT = 'SET_DISCUSSIONS_SORT';
 export const SET_SELECTED_COMMENT_POSITION = 'SET_SELECTED_COMMENT_POSITION';
+export const SET_SELECTED_COMMENT_POSITION_HOVER = 'SET_SELECTED_COMMENT_POSITION_HOVER';
 
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 4222144cfb1a15..e5f1c11fb35bee 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -312,6 +312,10 @@ export default {
     state.selectedCommentPosition = position;
   },
 
+  [types.SET_SELECTED_COMMENT_POSITION_HOVER](state, position) {
+    state.selectedCommentPositionHover = position;
+  },
+
   [types.DISABLE_COMMENTS](state, value) {
     state.commentsDisabled = value;
   },
diff --git a/spec/frontend/diffs/components/inline_diff_table_row_spec.js b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
index 409ac11d26b625..5dd83df8967b6e 100644
--- a/spec/frontend/diffs/components/inline_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/mr_notes/stores';
 import InlineDiffTableRow from '~/diffs/components/inline_diff_table_row.vue';
 import diffFileMockData from '../mock_data/diff_file';
@@ -9,7 +9,7 @@ describe('InlineDiffTableRow', () => {
   const thisLine = diffFileMockData.highlighted_diff_lines[0];
 
   beforeEach(() => {
-    wrapper = mount(InlineDiffTableRow, {
+    wrapper = shallowMount(InlineDiffTableRow, {
       store: createStore(),
       propsData: {
         line: thisLine,
diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js
index 769a3ba9d774ee..6a905527bdc717 100644
--- a/spec/frontend/notes/stores/actions_spec.js
+++ b/spec/frontend/notes/stores/actions_spec.js
@@ -1127,10 +1127,10 @@ describe('Actions Notes Store', () => {
     });
   });
 
-  describe('setSelectedCommentPostision', () => {
+  describe('setSelectedCommentPosition', () => {
     it('calls the correct mutation with the correct args', done => {
       testAction(
-        actions.setSelectedCommentPostision,
+        actions.setSelectedCommentPosition,
         {},
         {},
         [{ type: mutationTypes.SET_SELECTED_COMMENT_POSITION, payload: {} }],
-- 
GitLab


From e7e7e68d7af4e16b284d32152f6c91c768024027 Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Tue, 14 Jul 2020 12:27:09 -0500
Subject: [PATCH 07/10] Bug fixes and code review changes

Update hover to wrap entire draft note
Add jsdoc explaining data structure
Update specs to use VTU api
Update mutation spec description and add missing test
---
 .../batch_comments/components/draft_note.vue  | 12 ++++-----
 .../javascripts/notes/stores/modules/index.js |  7 +++++
 .../components/inline_diff_table_row_spec.js  | 26 +++++++++----------
 .../parallel_diff_table_row_spec.js           |  4 +--
 spec/frontend/notes/stores/mutation_spec.js   | 12 ++++++++-
 5 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 42cf27da351ca7..4c100ec7335aeb 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -68,12 +68,12 @@ export default {
 };
 </script>
 <template>
-  <article class="draft-note-component note-wrapper">
-    <ul
-      class="notes draft-notes"
-      @mouseenter="setSelectedCommentPositionHover(draft.position.line_range)"
-      @mouseleave="setSelectedCommentPositionHover()"
-    >
+  <article
+    class="draft-note-component note-wrapper"
+    @mouseenter="setSelectedCommentPositionHover(draft.position.line_range)"
+    @mouseleave="setSelectedCommentPositionHover()"
+  >
+    <ul class="notes draft-notes">
       <noteable-note
         :note="draft"
         :line="line"
diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js
index aff0a966dbb4cd..1649e63c61f2b2 100644
--- a/app/assets/javascripts/notes/stores/modules/index.js
+++ b/app/assets/javascripts/notes/stores/modules/index.js
@@ -12,6 +12,13 @@ export default () => ({
     lastFetchedAt: null,
     currentDiscussionId: null,
     batchSuggestionsInfo: [],
+    /**
+     * selectedCommentPosition & selectedCommentPosition structures are the same as `position.line_range`:
+     * {
+     *  start: { line_code: string, new_line: number, old_line:number, type: string },
+     *  end: { line_code: string, new_line: number, old_line:number, type: string },
+     * }
+     */
     selectedCommentPosition: null,
     selectedCommentPositionHover: null,
 
diff --git a/spec/frontend/diffs/components/inline_diff_table_row_spec.js b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
index 5dd83df8967b6e..f929f97b59831d 100644
--- a/spec/frontend/diffs/components/inline_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
@@ -25,7 +25,7 @@ describe('InlineDiffTableRow', () => {
   it('does not add hll class to line content when line does not match highlighted row', done => {
     vm.$nextTick()
       .then(() => {
-        expect(vm.$el.querySelector('.line_content').classList).not.toContain('hll');
+        expect(wrapper.find('.line_content').classes('hll')).toBe(false);
       })
       .then(done)
       .catch(done.fail);
@@ -39,7 +39,7 @@ describe('InlineDiffTableRow', () => {
         return vm.$nextTick();
       })
       .then(() => {
-        expect(vm.$el.querySelector('.line_content').classList).toContain('hll');
+        expect(wrapper.find('.line_content').classes('hll')).toBe(true);
       })
       .then(done)
       .catch(done.fail);
@@ -48,7 +48,7 @@ describe('InlineDiffTableRow', () => {
   it('adds hll class to lineContent when line is part of a multiline comment', () => {
     wrapper.setProps({ isCommented: true });
     return vm.$nextTick().then(() => {
-      expect(vm.$el.querySelector('.line_content').classList).toContain('hll');
+      expect(wrapper.find('.line_content').classes('hll')).toBe(true);
     });
   });
 
@@ -64,10 +64,10 @@ describe('InlineDiffTableRow', () => {
           return vm.$nextTick();
         })
         .then(() => {
-          const coverage = vm.$el.querySelector('.line-coverage');
+          const coverage = wrapper.find('.line-coverage');
 
-          expect(coverage.title).toContain('Test coverage: 5 hits');
-          expect(coverage.classList).toContain('coverage');
+          expect(coverage.attributes('title')).toContain('Test coverage: 5 hits');
+          expect(coverage.classes('coverage')).toBe(true);
         })
         .then(done)
         .catch(done.fail);
@@ -84,10 +84,10 @@ describe('InlineDiffTableRow', () => {
           return vm.$nextTick();
         })
         .then(() => {
-          const coverage = vm.$el.querySelector('.line-coverage');
+          const coverage = wrapper.find('.line-coverage');
 
-          expect(coverage.title).toContain('No test coverage');
-          expect(coverage.classList).toContain('no-coverage');
+          expect(coverage.attributes('title')).toContain('No test coverage');
+          expect(coverage.classes('no-coverage')).toBe(true);
         })
         .then(done)
         .catch(done.fail);
@@ -101,11 +101,11 @@ describe('InlineDiffTableRow', () => {
           return vm.$nextTick();
         })
         .then(() => {
-          const coverage = vm.$el.querySelector('.line-coverage');
+          const coverage = wrapper.find('.line-coverage');
 
-          expect(coverage.title).not.toContain('Coverage');
-          expect(coverage.classList).not.toContain('coverage');
-          expect(coverage.classList).not.toContain('no-coverage');
+          expect(coverage.attributes('title')).toBeUndefined();
+          expect(coverage.classes('coverage')).toBe(false);
+          expect(coverage.classes('no-coverage')).toBe(false);
         })
         .then(done)
         .catch(done.fail);
diff --git a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
index 56f108723e9bd9..339352943a994f 100644
--- a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import ParallelDiffTableRow from '~/diffs/components/parallel_diff_table_row.vue';
@@ -13,7 +13,7 @@ describe('ParallelDiffTableRow', () => {
     const rightLine = diffFileMockData.parallel_diff_lines[0].right;
 
     beforeEach(() => {
-      wrapper = mount(ParallelDiffTableRow, {
+      wrapper = shallowMount(ParallelDiffTableRow, {
         store: createStore(),
         propsData: {
           line: thisLine,
diff --git a/spec/frontend/notes/stores/mutation_spec.js b/spec/frontend/notes/stores/mutation_spec.js
index af9d48fd7ffb87..0ad18ba9b6addc 100644
--- a/spec/frontend/notes/stores/mutation_spec.js
+++ b/spec/frontend/notes/stores/mutation_spec.js
@@ -525,7 +525,7 @@ describe('Notes Store mutations', () => {
   });
 
   describe('SET_SELECTED_COMMENT_POSITION', () => {
-    it('should set comments disabled state', () => {
+    it('should set comment position state', () => {
       const state = {};
 
       mutations.SET_SELECTED_COMMENT_POSITION(state, {});
@@ -534,6 +534,16 @@ describe('Notes Store mutations', () => {
     });
   });
 
+  describe('SET_SELECTED_COMMENT_POSITION_HOVER', () => {
+    it('should set comment hover position state', () => {
+      const state = {};
+
+      mutations.SET_SELECTED_COMMENT_POSITION_HOVER(state, {});
+
+      expect(state.selectedCommentPositionHover).toEqual({});
+    });
+  });
+
   describe('DISABLE_COMMENTS', () => {
     it('should set comments disabled state', () => {
       const state = {};
-- 
GitLab


From 09d88b8c15fae01d18187fbcad170a4902289f3e Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Tue, 14 Jul 2020 14:58:15 -0500
Subject: [PATCH 08/10] Fix broken jest test

---
 spec/frontend/notes/components/noteable_note_spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js
index 3cb6cfe9787c93..6393be4f0ae7c4 100644
--- a/spec/frontend/notes/components/noteable_note_spec.js
+++ b/spec/frontend/notes/components/noteable_note_spec.js
@@ -175,6 +175,7 @@ describe('issue_note', () => {
     store.hotUpdate({
       actions: {
         updateNote() {},
+        setSelectedCommentPositionHover() {},
       },
     });
     const noteBodyComponent = wrapper.find(NoteBody);
-- 
GitLab


From 1872c5aba5c16afa62035dc29652a2f6e6a8f258 Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Wed, 15 Jul 2020 15:29:05 -0500
Subject: [PATCH 09/10] Fix css border on editing MLC comments

---
 .../javascripts/diffs/components/diff_line_note_form.vue     | 5 +----
 app/assets/javascripts/notes/components/noteable_note.vue    | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index 9558bfb04c6fed..d2f49bd002061f 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -148,10 +148,7 @@ export default {
 
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
-    <div
-      v-if="glFeatures.multilineComments"
-      class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
-    >
+    <div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-700 gl-pb-3">
       <multiline-comment-form
         v-model="commentLineStart"
         :line="line"
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index a9c7c3bfb7b842..56d8259757352f 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -344,7 +344,7 @@ export default {
         :line="line"
         :comment-line-options="commentLineOptions"
         :line-range="note.position.line_range"
-        class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
+        class="gl-mb-3 gl-text-gray-700 gl-pb-3"
       />
       <div
         v-else
-- 
GitLab


From 7d3d1fb8ccdad5560513d7ff27b35154e9357580 Mon Sep 17 00:00:00 2001
From: jboyson <jboyson@gitlab.com>
Date: Wed, 15 Jul 2020 16:41:35 -0500
Subject: [PATCH 10/10] Remove getters usage for selectedCommentPosition

---
 .../javascripts/diffs/components/inline_diff_view.vue      | 7 +++++--
 .../javascripts/diffs/components/parallel_diff_view.vue    | 7 +++++--
 app/assets/javascripts/notes/stores/getters.js             | 4 ----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 880aa65c3e9f40..e82d06ee385995 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import InlineDraftCommentRow from '~/batch_comments/components/inline_draft_comment_row.vue';
 import inlineDiffTableRow from './inline_diff_table_row.vue';
@@ -32,7 +32,10 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['selectedCommentPosition', 'selectedCommentPositionHover']),
+    ...mapState({
+      selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
+      selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
+    }),
     diffLinesLength() {
       return this.diffLines.length;
     },
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 9e92134bbdc725..46a691ad22db51 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import ParallelDraftCommentRow from '~/batch_comments/components/parallel_draft_comment_row.vue';
 import parallelDiffTableRow from './parallel_diff_table_row.vue';
@@ -32,7 +32,10 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['selectedCommentPosition', 'selectedCommentPositionHover']),
+    ...mapState({
+      selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
+      selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
+    }),
     diffLinesLength() {
       return this.diffLines.length;
     },
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index 5edde24d8eca15..85997b44bccf48 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -230,9 +230,5 @@ export const getDiscussion = state => discussionId =>
 
 export const commentsDisabled = state => state.commentsDisabled;
 
-export const selectedCommentPosition = state => state.selectedCommentPosition;
-
-export const selectedCommentPositionHover = state => state.selectedCommentPositionHover;
-
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
-- 
GitLab