Add latest changes from gitlab-org/gitlab@master

1 files changed, 71 insertions, 8 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 9e1385853b6..9054a8aec04 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -10,6 +10,7 @@ import {
   CONFLICT_THEIR,
   CONFLICT_MARKER,
 } from '../constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DiffGutterAvatars from './diff_gutter_avatars.vue';
 import * as utils from './diff_row_utils';
 
@@ -22,6 +23,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     SafeHtml,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     fileHash: {
       type: String,
@@ -45,6 +47,15 @@ export default {
       required: false,
       default: false,
     },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dragging: false,
+    };
   },
   computed: {
     ...mapGetters('diffs', ['fileLineCoverage']),
@@ -52,26 +63,35 @@ export default {
     ...mapState({
       isHighlighted(state) {
         const line = this.line.left?.line_code ? this.line.left : this.line.right;
-        return utils.isHighlighted(state, line, this.isCommented);
+        return utils.isHighlighted(state, line, false);
       },
     }),
     classNameMap() {
       return {
         [CONTEXT_LINE_CLASS_NAME]: this.line.isContextLineLeft,
         [PARALLEL_DIFF_VIEW_TYPE]: !this.inline,
+        commented: this.isCommented,
       };
     },
     parallelViewLeftLineType() {
-      return utils.parallelViewLeftLineType(this.line, this.isHighlighted);
+      return utils.parallelViewLeftLineType(this.line, this.isHighlighted || this.isCommented);
     },
     coverageState() {
       return this.fileLineCoverage(this.filePath, this.line.right.new_line);
     },
     classNameMapCellLeft() {
-      return utils.classNameMapCell(this.line.left, this.isHighlighted, this.isLoggedIn);
+      return utils.classNameMapCell({
+        line: this.line.left,
+        hll: this.isHighlighted || this.isCommented,
+        isLoggedIn: this.isLoggedIn,
+      });
     },
     classNameMapCellRight() {
-      return utils.classNameMapCell(this.line.right, this.isHighlighted, this.isLoggedIn);
+      return utils.classNameMapCell({
+        line: this.line.right,
+        hll: this.isHighlighted || this.isCommented,
+        isLoggedIn: this.isLoggedIn,
+      });
     },
     addCommentTooltipLeft() {
       return utils.addCommentTooltip(this.line.left);
@@ -131,6 +151,22 @@ export default {
         ? this.$options.THEIR_CHANGES
         : this.$options.OUR_CHANGES;
     },
+    onDragEnd() {
+      this.dragging = false;
+      if (!this.glFeatures.dragCommentSelection) return;
+
+      this.$emit('stopdragging');
+    },
+    onDragEnter(line, index) {
+      if (!this.glFeatures.dragCommentSelection) return;
+
+      this.$emit('enterdragging', { ...line, index });
+    },
+    onDragStart(line) {
+      this.$root.$emit('bv::hide::tooltip');
+      this.dragging = true;
+      this.$emit('startdragging', line);
+    },
   },
   OUR_CHANGES: 'HEAD//our changes',
   THEIR_CHANGES: 'origin//their changes',
@@ -143,7 +179,13 @@ export default {
 
 <template>
   <div :class="classNameMap" class="diff-grid-row diff-tr line_holder">
-    <div class="diff-grid-left left-side">
+    <div
+      data-testid="left-side"
+      class="diff-grid-left left-side"
+      @dragover.prevent
+      @dragenter="onDragEnter(line.left, index)"
+      @dragend="onDragEnd"
+    >
       <template v-if="line.left && line.left.type !== $options.CONFLICT_MARKER">
         <div
           :class="classNameMapCellLeft"
@@ -159,10 +201,13 @@ export default {
               :title="addCommentTooltipLeft"
             >
               <button
+                :draggable="glFeatures.dragCommentSelection"
                 type="button"
                 class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
+                :class="{ 'gl-cursor-grab': dragging }"
                 :disabled="line.left.commentsDisabled"
                 @click="handleCommentButton(line.left)"
+                @dragstart="onDragStart({ ...line.left, index })"
               >
                 <gl-icon :size="12" name="comment" />
               </button>
@@ -234,7 +279,14 @@ export default {
         ></div>
       </template>
     </div>
-    <div v-if="!inline" class="diff-grid-right right-side">
+    <div
+      v-if="!inline"
+      data-testid="right-side"
+      class="diff-grid-right right-side"
+      @dragover.prevent
+      @dragenter="onDragEnter(line.right, index)"
+      @dragend="onDragEnd"
+    >
       <template v-if="line.right">
         <div :class="classNameMapCellRight" class="diff-td diff-line-num new_line">
           <template v-if="line.right.type !== $options.CONFLICT_MARKER_THEIR">
@@ -246,10 +298,13 @@ export default {
               :title="addCommentTooltipRight"
             >
               <button
+                :draggable="glFeatures.dragCommentSelection"
                 type="button"
                 class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
+                :class="{ 'gl-cursor-grab': dragging }"
                 :disabled="line.right.commentsDisabled"
                 @click="handleCommentButton(line.right)"
+                @dragstart="onDragStart({ ...line.right, index })"
               >
                 <gl-icon :size="12" name="comment" />
               </button>
@@ -279,13 +334,21 @@ export default {
         <div
           v-gl-tooltip.hover
           :title="coverageState.text"
-          :class="[line.right.type, coverageState.class, { hll: isHighlighted }]"
+          :class="[line.right.type, coverageState.class, { hll: isHighlighted, hll: isCommented }]"
           class="diff-td line-coverage right-side"
         ></div>
         <div
           :id="line.right.line_code"
           :key="line.right.rich_text"
-          :class="[line.right.type, { hll: isHighlighted, parallel: !inline }]"
+          v-safe-html="line.right.rich_text"
+          :class="[
+            line.right.type,
+            {
+              hll: isHighlighted,
+              hll: isCommented,
+              parallel: !inline,
+            },
+          ]"
           class="diff-td line_content with-coverage right-side"
           @mousedown="handleParallelLineMouseDown"
         >