Add latest changes from gitlab-org/gitlab@master

1 files changed, 116 insertions, 53 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>