Add latest changes from gitlab-org/gitlab@master

3 files changed, 156 insertions, 63 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index c0719e2a7d9..9a43a7405c6 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -1,7 +1,15 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import { CONTEXT_LINE_CLASS_NAME, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
+import {
+  CONTEXT_LINE_CLASS_NAME,
+  PARALLEL_DIFF_VIEW_TYPE,
+  CONFLICT_MARKER_OUR,
+  CONFLICT_MARKER_THEIR,
+  CONFLICT_OUR,
+  CONFLICT_THEIR,
+  CONFLICT_MARKER,
+} from '../constants';
 import DiffGutterAvatars from './diff_gutter_avatars.vue';
 import * as utils from './diff_row_utils';
 
@@ -71,6 +79,12 @@ export default {
     addCommentTooltipRight() {
       return utils.addCommentTooltip(this.line.right);
     },
+    emptyCellRightClassMap() {
+      return { conflict_their: this.line.left?.type === CONFLICT_OUR };
+    },
+    emptyCellLeftClassMap() {
+      return { conflict_our: this.line.right?.type === CONFLICT_THEIR };
+    },
     shouldRenderCommentButton() {
       return (
         this.isLoggedIn &&
@@ -80,6 +94,9 @@ export default {
         !this.line.hasDiscussionsRight
       );
     },
+    isLeftConflictMarker() {
+      return [CONFLICT_MARKER_OUR, CONFLICT_MARKER_THEIR].includes(this.line.left?.type);
+    },
   },
   mounted() {
     this.scrollToLineIfNeededParallel(this.line);
@@ -107,37 +124,50 @@ export default {
     handleCommentButton(line) {
       this.showCommentForm({ lineCode: line.line_code, fileHash: this.fileHash });
     },
+    conflictText(line) {
+      return line.type === CONFLICT_MARKER_THEIR
+        ? this.$options.THEIR_CHANGES
+        : this.$options.OUR_CHANGES;
+    },
   },
+  OUR_CHANGES: 'HEAD//our changes',
+  THEIR_CHANGES: 'origin//their changes',
+  CONFLICT_MARKER,
+  CONFLICT_MARKER_THEIR,
+  CONFLICT_OUR,
+  CONFLICT_THEIR,
 };
 </script>
 
 <template>
   <div :class="classNameMap" class="diff-grid-row diff-tr line_holder">
     <div class="diff-grid-left left-side">
-      <template v-if="line.left">
+      <template v-if="line.left && line.left.type !== $options.CONFLICT_MARKER">
         <div
           :class="classNameMapCellLeft"
           data-testid="leftLineNumber"
           class="diff-td diff-line-num old_line"
         >
-          <span
-            v-if="shouldRenderCommentButton"
-            v-gl-tooltip
-            data-testid="leftCommentButton"
-            class="add-diff-note tooltip-wrapper"
-            :title="addCommentTooltipLeft"
-          >
-            <button
-              type="button"
-              class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
-              :disabled="line.left.commentsDisabled"
-              @click="handleCommentButton(line.left)"
+          <template v-if="!isLeftConflictMarker">
+            <span
+              v-if="shouldRenderCommentButton"
+              v-gl-tooltip
+              data-testid="leftCommentButton"
+              class="add-diff-note tooltip-wrapper"
+              :title="addCommentTooltipLeft"
             >
-              <gl-icon :size="12" name="comment" />
-            </button>
-          </span>
+              <button
+                type="button"
+                class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
+                :disabled="line.left.commentsDisabled"
+                @click="handleCommentButton(line.left)"
+              >
+                <gl-icon :size="12" name="comment" />
+              </button>
+            </span>
+          </template>
           <a
-            v-if="line.left.old_line"
+            v-if="line.left.old_line && line.left.type !== $options.CONFLICT_THEIR"
             :data-linenumber="line.left.old_line"
             :href="line.lineHrefOld"
             @click="setHighlightedRow(line.lineCode)"
@@ -159,7 +189,7 @@ export default {
         </div>
         <div v-if="inline" :class="classNameMapCellLeft" class="diff-td diff-line-num old_line">
           <a
-            v-if="line.left.new_line"
+            v-if="line.left.new_line && line.left.type !== $options.CONFLICT_OUR"
             :data-linenumber="line.left.new_line"
             :href="line.lineHrefOld"
             @click="setHighlightedRow(line.lineCode)"
@@ -170,39 +200,59 @@ export default {
         <div
           :id="line.left.line_code"
           :key="line.left.line_code"
-          v-safe-html="line.left.rich_text"
           :class="parallelViewLeftLineType"
           class="diff-td line_content with-coverage parallel left-side"
           data-testid="leftContent"
           @mousedown="handleParallelLineMouseDown"
-        ></div>
+        >
+          <strong v-if="isLeftConflictMarker">{{ conflictText(line.left) }}</strong>
+          <span v-else v-safe-html="line.left.rich_text"></span>
+        </div>
       </template>
-      <template v-else>
-        <div data-testid="leftEmptyCell" class="diff-td diff-line-num old_line empty-cell"></div>
-        <div v-if="inline" class="diff-td diff-line-num old_line empty-cell"></div>
-        <div class="diff-td line-coverage left-side empty-cell"></div>
-        <div class="diff-td line_content with-coverage parallel left-side empty-cell"></div>
+      <template v-else-if="!inline || (line.left && line.left.type === $options.CONFLICT_MARKER)">
+        <div
+          data-testid="leftEmptyCell"
+          class="diff-td diff-line-num old_line empty-cell"
+          :class="emptyCellLeftClassMap"
+        >
+          &nbsp;
+        </div>
+        <div
+          v-if="inline"
+          class="diff-td diff-line-num old_line empty-cell"
+          :class="emptyCellLeftClassMap"
+        ></div>
+        <div
+          class="diff-td line-coverage left-side empty-cell"
+          :class="emptyCellLeftClassMap"
+        ></div>
+        <div
+          class="diff-td line_content with-coverage parallel left-side empty-cell"
+          :class="emptyCellLeftClassMap"
+        ></div>
       </template>
     </div>
     <div v-if="!inline" class="diff-grid-right right-side">
       <template v-if="line.right">
         <div :class="classNameMapCellRight" class="diff-td diff-line-num new_line">
-          <span
-            v-if="shouldRenderCommentButton"
-            v-gl-tooltip
-            data-testid="rightCommentButton"
-            class="add-diff-note tooltip-wrapper"
-            :title="addCommentTooltipRight"
-          >
-            <button
-              type="button"
-              class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
-              :disabled="line.right.commentsDisabled"
-              @click="handleCommentButton(line.right)"
+          <template v-if="line.right.type !== $options.CONFLICT_MARKER_THEIR">
+            <span
+              v-if="shouldRenderCommentButton"
+              v-gl-tooltip
+              data-testid="rightCommentButton"
+              class="add-diff-note tooltip-wrapper"
+              :title="addCommentTooltipRight"
             >
-              <gl-icon :size="12" name="comment" />
-            </button>
-          </span>
+              <button
+                type="button"
+                class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
+                :disabled="line.right.commentsDisabled"
+                @click="handleCommentButton(line.right)"
+              >
+                <gl-icon :size="12" name="comment" />
+              </button>
+            </span>
+          </template>
           <a
             v-if="line.right.new_line"
             :data-linenumber="line.right.new_line"
@@ -233,22 +283,35 @@ export default {
         <div
           :id="line.right.line_code"
           :key="line.right.rich_text"
-          v-safe-html="line.right.rich_text"
-          :class="[
-            line.right.type,
-            {
-              hll: isHighlighted,
-            },
-          ]"
+          :class="[line.right.type, { hll: isHighlighted }]"
           class="diff-td line_content with-coverage parallel right-side"
           @mousedown="handleParallelLineMouseDown"
-        ></div>
+        >
+          <strong v-if="line.right.type === $options.CONFLICT_MARKER_THEIR">{{
+            conflictText(line.right)
+          }}</strong>
+          <span v-else v-safe-html="line.right.rich_text"></span>
+        </div>
       </template>
       <template v-else>
-        <div data-testid="rightEmptyCell" class="diff-td diff-line-num old_line empty-cell"></div>
-        <div class="diff-td diff-line-num old_line empty-cell"></div>
-        <div class="diff-td line-coverage right-side empty-cell"></div>
-        <div class="diff-td line_content with-coverage parallel right-side empty-cell"></div>
+        <div
+          data-testid="rightEmptyCell"
+          class="diff-td diff-line-num old_line empty-cell"
+          :class="emptyCellRightClassMap"
+        ></div>
+        <div
+          v-if="inline"
+          class="diff-td diff-line-num old_line empty-cell"
+          :class="emptyCellRightClassMap"
+        ></div>
+        <div
+          class="diff-td line-coverage right-side empty-cell"
+          :class="emptyCellRightClassMap"
+        ></div>
+        <div
+          class="diff-td line_content with-coverage parallel right-side empty-cell"
+          :class="emptyCellRightClassMap"
+        ></div>
       </template>
     </div>
   </div>
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 07e27bd8e47..7080348ee7d 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -109,3 +109,9 @@ export const EVT_PERF_MARK_FILE_TREE_END = 'mr:diffs:perf:fileTreeEnd';
 export const EVT_PERF_MARK_DIFF_FILES_START = 'mr:diffs:perf:filesStart';
 export const EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN = 'mr:diffs:perf:firstFileShown';
 export const EVT_PERF_MARK_DIFF_FILES_END = 'mr:diffs:perf:filesEnd';
+
+export const CONFLICT_OUR = 'conflict_our';
+export const CONFLICT_THEIR = 'conflict_their';
+export const CONFLICT_MARKER = 'conflict_marker';
+export const CONFLICT_MARKER_OUR = 'conflict_marker_our';
+export const CONFLICT_MARKER_THEIR = 'conflict_marker_their';
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 1839df12c96..27702eaf91e 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -15,6 +15,11 @@ import {
   INLINE_DIFF_LINES_KEY,
   SHOW_WHITESPACE,
   NO_SHOW_WHITESPACE,
+  CONFLICT_OUR,
+  CONFLICT_THEIR,
+  CONFLICT_MARKER,
+  CONFLICT_MARKER_OUR,
+  CONFLICT_MARKER_THEIR,
 } from '../constants';
 import { prepareRawDiffFile } from '../utils/diff_file';
 
@@ -22,6 +27,11 @@ export const isAdded = line => ['new', 'new-nonewline'].includes(line.type);
 export const isRemoved = line => ['old', 'old-nonewline'].includes(line.type);
 export const isUnchanged = line => !line.type;
 export const isMeta = line => ['match', 'new-nonewline', 'old-nonewline'].includes(line.type);
+export const isConflictMarker = line =>
+  [CONFLICT_MARKER_OUR, CONFLICT_MARKER_THEIR].includes(line.type);
+export const isConflictSeperator = line => line.type === CONFLICT_MARKER;
+export const isConflictOur = line => line.type === CONFLICT_OUR;
+export const isConflictTheir = line => line.type === CONFLICT_THEIR;
 
 /**
  * Pass in the inline diff lines array which gets converted
@@ -42,12 +52,13 @@ export const isMeta = line => ['match', 'new-nonewline', 'old-nonewline'].includ
 
 export const parallelizeDiffLines = (diffLines, inline) => {
   let freeRightIndex = null;
+  let conflictStartIndex = -1;
   const lines = [];
 
   for (let i = 0, diffLinesLength = diffLines.length, index = 0; i < diffLinesLength; i += 1) {
     const line = diffLines[i];
 
-    if (isRemoved(line) || inline) {
+    if (isRemoved(line) || isConflictOur(line) || inline) {
       lines.push({
         [LINE_POSITION_LEFT]: line,
         [LINE_POSITION_RIGHT]: null,
@@ -58,7 +69,7 @@ export const parallelizeDiffLines = (diffLines, inline) => {
         freeRightIndex = index;
       }
       index += 1;
-    } else if (isAdded(line)) {
+    } else if (isAdded(line) || isConflictTheir(line)) {
       if (freeRightIndex !== null) {
         // If an old line came before this without a line on the right, this
         // line can be put to the right of it.
@@ -77,15 +88,28 @@ export const parallelizeDiffLines = (diffLines, inline) => {
         freeRightIndex = null;
         index += 1;
       }
-    } else if (isMeta(line) || isUnchanged(line)) {
-      // line in the right panel is the same as in the left one
-      lines.push({
-        [LINE_POSITION_LEFT]: line,
-        [LINE_POSITION_RIGHT]: line,
-      });
+    } else if (
+      isMeta(line) ||
+      isUnchanged(line) ||
+      isConflictMarker(line) ||
+      (isConflictSeperator(line) && inline)
+    ) {
+      if (conflictStartIndex <= 0) {
+        // line in the right panel is the same as in the left one
+        lines.push({
+          [LINE_POSITION_LEFT]: line,
+          [LINE_POSITION_RIGHT]: !inline && line,
+        });
 
-      freeRightIndex = null;
-      index += 1;
+        if (!inline && isConflictMarker(line)) {
+          conflictStartIndex = index;
+        }
+        freeRightIndex = null;
+        index += 1;
+      } else {
+        lines[conflictStartIndex][LINE_POSITION_RIGHT] = line;
+        conflictStartIndex = -1;
+      }
     }
   }