1 files changed, 55 insertions, 19 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index a2a6ebaeedf..5cf242b4ddd 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -1,12 +1,15 @@
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex';
+import { IdState } from 'vendor/vue-virtual-scroller';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
+import { hide } from '~/tooltips';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DiffCommentCell from './diff_comment_cell.vue';
 import DiffExpansionCell from './diff_expansion_cell.vue';
 import DiffRow from './diff_row.vue';
+import { isHighlighted } from './diff_row_utils';
 
 export default {
   components: {
@@ -15,7 +18,11 @@ export default {
     DiffCommentCell,
     DraftNote,
   },
-  mixins: [draftCommentsMixin, glFeatureFlagsMixin()],
+  mixins: [
+    draftCommentsMixin,
+    glFeatureFlagsMixin(),
+    IdState({ idProp: (vm) => vm.diffFile.file_hash }),
+  ],
   props: {
     diffFile: {
       type: Object,
@@ -36,15 +43,15 @@ export default {
       default: false,
     },
   },
-  data() {
+  idState() {
     return {
       dragStart: null,
       updatedLineRange: null,
     };
   },
   computed: {
-    ...mapGetters('diffs', ['commitId']),
-    ...mapState('diffs', ['codequalityDiff']),
+    ...mapGetters('diffs', ['commitId', 'fileLineCoverage']),
+    ...mapState('diffs', ['codequalityDiff', 'highlightedRow']),
     ...mapState({
       selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
       selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
@@ -59,45 +66,65 @@ export default {
       );
     },
     hasCodequalityChanges() {
-      return (
-        this.glFeatures.codequalityMrDiffAnnotations &&
-        this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0
-      );
+      return this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0;
     },
   },
   methods: {
     ...mapActions(['setSelectedCommentPosition']),
-    ...mapActions('diffs', ['showCommentForm']),
+    ...mapActions('diffs', ['showCommentForm', 'setHighlightedRow', 'toggleLineDiscussions']),
     showCommentLeft(line) {
       return line.left && !line.right;
     },
     showCommentRight(line) {
       return line.right && !line.left;
     },
-    onStartDragging(line) {
-      this.dragStart = line;
+    onStartDragging({ event = {}, line }) {
+      if (event.target?.parentNode) {
+        hide(event.target.parentNode);
+      }
+      this.idState.dragStart = line;
     },
     onDragOver(line) {
-      if (line.chunk !== this.dragStart.chunk) return;
+      if (line.chunk !== this.idState.dragStart.chunk) return;
 
-      let start = this.dragStart;
+      let start = this.idState.dragStart;
       let end = line;
 
-      if (this.dragStart.index >= line.index) {
+      if (this.idState.dragStart.index >= line.index) {
         start = line;
-        end = this.dragStart;
+        end = this.idState.dragStart;
       }
 
-      this.updatedLineRange = { start, end };
+      this.idState.updatedLineRange = { start, end };
 
-      this.setSelectedCommentPosition(this.updatedLineRange);
+      this.setSelectedCommentPosition(this.idState.updatedLineRange);
     },
     onStopDragging() {
       this.showCommentForm({
-        lineCode: this.updatedLineRange?.end?.line_code,
+        lineCode: this.idState.updatedLineRange?.end?.line_code,
         fileHash: this.diffFile.file_hash,
       });
-      this.dragStart = null;
+      this.idState.dragStart = null;
+    },
+    isHighlighted(line) {
+      return isHighlighted(
+        this.highlightedRow,
+        line.left?.line_code ? line.left : line.right,
+        false,
+      );
+    },
+    handleParallelLineMouseDown(e) {
+      const line = e.target.closest('.diff-td');
+      const table = line.closest('.diff-table');
+
+      table.classList.remove('left-side-selected', 'right-side-selected');
+      const [lineClass] = ['left-side', 'right-side'].filter((name) =>
+        line.classList.contains(name),
+      );
+
+      if (lineClass) {
+        table.classList.add(`${lineClass}-selected`);
+      }
     },
   },
   userColorScheme: window.gon.user_color_scheme,
@@ -109,6 +136,7 @@ export default {
     :class="[$options.userColorScheme, { inline, 'with-codequality': hasCodequalityChanges }]"
     :data-commit-id="commitId"
     class="diff-grid diff-table code diff-wrap-lines js-syntax-highlight text-file"
+    @mousedown="handleParallelLineMouseDown"
   >
     <template v-for="(line, index) in diffLines">
       <div
@@ -136,6 +164,14 @@ export default {
         :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine"
         :inline="inline"
         :index="index"
+        :is-highlighted="isHighlighted(line)"
+        :file-line-coverage="fileLineCoverage"
+        @showCommentForm="(lineCode) => showCommentForm({ lineCode, fileHash: diffFile.file_hash })"
+        @setHighlightedRow="setHighlightedRow"
+        @toggleLineDiscussions="
+          ({ lineCode, expanded }) =>
+            toggleLineDiscussions({ lineCode, fileHash: diffFile.file_hash, expanded })
+        "
         @enterdragging="onDragOver"
         @startdragging="onStartDragging"
         @stopdragging="onStopDragging"