Only rendering diff for now

app/assets/javascripts/diffs/components/diff_line_gutter_content.vue

@@ -13,6 +13,10 @@ export default {
     Icon,
   },
   props: {
+    line: {
+      type: Object,
+      required: true,
+    },
     fileHash: {
       type: String,
       required: true,
@@ -21,31 +25,16 @@ export default {
       type: String,
       required: true,
     },
-    lineType: {
-      type: String,
-      required: false,
-      default: '',
-    },
     lineNumber: {
       type: Number,
       required: false,
       default: 0,
     },
-    lineCode: {
-      type: String,
-      required: false,
-      default: '',
-    },
     linePosition: {
       type: String,
       required: false,
       default: '',
     },
-    metaData: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
     showCommentButton: {
       type: Boolean,
       required: false,
@@ -89,7 +78,7 @@ export default {
     }),
     ...mapGetters(['isLoggedIn']),
     lineHref() {
-      return this.lineCode ? `#${this.lineCode}` : '#';
+      return this.line.code ? `#${this.line.code}` : '#';
     },
     shouldShowCommentButton() {
       return (
@@ -103,10 +92,10 @@ export default {
       );
     },
     hasDiscussions() {
-      return this.discussions.length > 0;
+      return this.line.discussions && this.line.discussions.length > 0;
     },
     shouldShowAvatarsOnGutter() {
-      if (!this.lineType && this.linePosition === LINE_POSITION_RIGHT) {
+      if (!this.line.type && this.linePosition === LINE_POSITION_RIGHT) {
         return false;
       }
 
@@ -116,7 +105,7 @@ export default {
   methods: {
     ...mapActions('diffs', ['loadMoreLines', 'showCommentForm']),
     handleCommentButton() {
-      this.showCommentForm({ lineCode: this.lineCode });
+      this.showCommentForm({ lineCode: this.line.code });
     },
     handleLoadMoreLines() {
       if (this.isRequesting) {
@@ -125,8 +114,8 @@ export default {
 
       this.isRequesting = true;
       const endpoint = this.contextLinesPath;
-      const oldLineNumber = this.metaData.oldPos || 0;
-      const newLineNumber = this.metaData.newPos || 0;
+      const oldLineNumber = this.line.metaData.oldPos || 0;
+      const newLineNumber = this.line.metaData.newPos || 0;
       const offset = newLineNumber - oldLineNumber;
       const bottom = this.isBottom;
       const { fileHash } = this;

app/assets/javascripts/diffs/components/diff_table_cell.vue

@@ -11,8 +11,6 @@ import {
   LINE_HOVER_CLASS_NAME,
   LINE_UNFOLD_CLASS_NAME,
   INLINE_DIFF_VIEW_TYPE,
-  LINE_POSITION_LEFT,
-  LINE_POSITION_RIGHT,
 } from '../constants';
 
 export default {
@@ -67,42 +65,24 @@ export default {
       required: false,
       default: false,
     },
-    discussions: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
   },
   computed: {
     ...mapGetters(['isLoggedIn']),
-    normalizedLine() {
-      let normalizedLine;
-
-      if (this.diffViewType === INLINE_DIFF_VIEW_TYPE) {
-        normalizedLine = this.line;
-      } else if (this.linePosition === LINE_POSITION_LEFT) {
-        normalizedLine = this.line.left;
-      } else if (this.linePosition === LINE_POSITION_RIGHT) {
-        normalizedLine = this.line.right;
-      }
-
-      return normalizedLine;
-    },
     isMatchLine() {
-      return this.normalizedLine.type === MATCH_LINE_TYPE;
+      return this.line.type === MATCH_LINE_TYPE;
     },
     isContextLine() {
-      return this.normalizedLine.type === CONTEXT_LINE_TYPE;
+      return this.line.type === CONTEXT_LINE_TYPE;
     },
     isMetaLine() {
-      const { type } = this.normalizedLine;
+      const { type } = this.line;
 
       return (
         type === OLD_NO_NEW_LINE_TYPE || type === NEW_NO_NEW_LINE_TYPE || type === EMPTY_CELL_TYPE
       );
     },
     classNameMap() {
-      const { type } = this.normalizedLine;
+      const { type } = this.line;
 
       return {
         [type]: type,
@@ -116,9 +96,9 @@ export default {
       };
     },
     lineNumber() {
-      const { lineType, normalizedLine } = this;
+      const { lineType } = this;
 
-      return lineType === OLD_LINE_TYPE ? normalizedLine.oldLine : normalizedLine.newLine;
+      return lineType === OLD_LINE_TYPE ? this.line.oldLine : this.line.newLine;
     },
   },
 };
@@ -129,20 +109,17 @@ export default {
     :class="classNameMap"
   >
     <diff-line-gutter-content
+      :line="line"
       :file-hash="fileHash"
       :context-lines-path="contextLinesPath"
-      :line-type="normalizedLine.type"
-      :line-code="normalizedLine.lineCode"
       :line-position="linePosition"
       :line-number="lineNumber"
-      :meta-data="normalizedLine.metaData"
       :show-comment-button="showCommentButton"
       :is-hover="isHover"
       :is-bottom="isBottom"
       :is-match-line="isMatchLine"
       :is-context-line="isContentLine"
       :is-meta-line="isMetaLine"
-      :discussions="discussions"
     />
   </td>
 </template>

app/assets/javascripts/diffs/components/parallel_diff_table_row.vue

@@ -10,8 +10,7 @@ import {
   OLD_NO_NEW_LINE_TYPE,
   PARALLEL_DIFF_VIEW_TYPE,
   NEW_NO_NEW_LINE_TYPE,
-  LINE_POSITION_LEFT,
-  LINE_POSITION_RIGHT,
+  EMPTY_CELL_TYPE,
 } from '../constants';
 
 export default {
@@ -36,16 +35,6 @@ export default {
       required: false,
       default: false,
     },
-    leftDiscussions: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    rightDiscussions: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
   },
   data() {
     return {
@@ -54,29 +43,27 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('diffs', ['isParallelView']),
     isContextLine() {
-      return this.line.left.type === CONTEXT_LINE_TYPE;
+      return this.line.left && this.line.left.type === CONTEXT_LINE_TYPE;
     },
     classNameMap() {
       return {
         [CONTEXT_LINE_CLASS_NAME]: this.isContextLine,
-        [PARALLEL_DIFF_VIEW_TYPE]: this.isParallelView,
+        [PARALLEL_DIFF_VIEW_TYPE]: true,
       };
     },
     parallelViewLeftLineType() {
-      if (this.line.right.type === NEW_NO_NEW_LINE_TYPE) {
+      if (this.line.right && this.line.right.type === NEW_NO_NEW_LINE_TYPE) {
         return OLD_NO_NEW_LINE_TYPE;
       }
 
-      return this.line.left.type;
+      return this.line.left ? this.line.left.type : EMPTY_CELL_TYPE;
     },
   },
   created() {
+    // console.log('LINE : ', this.line);
     this.newLineType = NEW_LINE_TYPE;
     this.oldLineType = OLD_LINE_TYPE;
-    this.linePositionLeft = LINE_POSITION_LEFT;
-    this.linePositionRight = LINE_POSITION_RIGHT;
     this.parallelDiffViewType = PARALLEL_DIFF_VIEW_TYPE;
   },
   methods: {
@@ -116,47 +103,57 @@ export default {
     @mouseover="handleMouseMove"
     @mouseout="handleMouseMove"
   >
-    <diff-table-cell
-      :file-hash="fileHash"
-      :context-lines-path="contextLinesPath"
-      :line="line"
-      :line-type="oldLineType"
-      :line-position="linePositionLeft"
-      :is-bottom="isBottom"
-      :is-hover="isLeftHover"
-      :show-comment-button="true"
-      :diff-view-type="parallelDiffViewType"
-      :discussions="leftDiscussions"
-      class="diff-line-num old_line"
-    />
-    <td
-      :id="line.left.lineCode"
-      :class="parallelViewLeftLineType"
-      class="line_content parallel left-side"
-      @mousedown.native="handleParallelLineMouseDown"
-      v-html="line.left.richText"
-    >
-    </td>
-    <diff-table-cell
-      :file-hash="fileHash"
-      :context-lines-path="contextLinesPath"
-      :line="line"
-      :line-type="newLineType"
-      :line-position="linePositionRight"
-      :is-bottom="isBottom"
-      :is-hover="isRightHover"
-      :show-comment-button="true"
-      :diff-view-type="parallelDiffViewType"
-      :discussions="rightDiscussions"
-      class="diff-line-num new_line"
-    />
-    <td
-      :id="line.right.lineCode"
-      :class="line.right.type"
-      class="line_content parallel right-side"
-      @mousedown.native="handleParallelLineMouseDown"
-      v-html="line.right.richText"
-    >
-    </td>
+    <template v-if="line.left">
+      <diff-table-cell
+        :file-hash="fileHash"
+        :context-lines-path="contextLinesPath"
+        :line="line.left"
+        :line-type="oldLineType"
+        :is-bottom="isBottom"
+        :is-hover="isLeftHover"
+        :show-comment-button="true"
+        :diff-view-type="parallelDiffViewType"
+        line-position="left"
+        class="diff-line-num old_line"
+      />
+      <td
+        :id="line.left.lineCode"
+        :class="parallelViewLeftLineType"
+        class="line_content parallel left-side"
+        @mousedown.native="handleParallelLineMouseDown"
+        v-html="line.left.richText"
+      >
+      </td>
+    </template>
+    <template v-else>
+      <td class="diff-line-num old_line empty-cell"></td>
+      <td class="line_content parallel left-side empty-cell"></td>
+    </template>
+    <template v-if="line.right">
+      <diff-table-cell
+        :file-hash="fileHash"
+        :context-lines-path="contextLinesPath"
+        :line="line.right"
+        :line-type="newLineType"
+        :is-bottom="isBottom"
+        :is-hover="isRightHover"
+        :show-comment-button="true"
+        :diff-view-type="parallelDiffViewType"
+        line-position="right"
+        class="diff-line-num new_line"
+      />
+      <td
+        :id="line.right.lineCode"
+        :class="line.right.type"
+        class="line_content parallel right-side"
+        @mousedown.native="handleParallelLineMouseDown"
+        v-html="line.right.richText"
+      >
+      </td>
+    </template>
+    <template v-else>
+      <td class="diff-line-num old_line empty-cell"></td>
+      <td class="line_content parallel right-side empty-cell"></td>
+    </template>
   </tr>
 </template>

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -21,35 +21,12 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('diffs', [
-      'commitId',
-      'singleDiscussionByLineCode',
-      'shouldRenderParallelCommentRow',
-    ]),
+    ...mapGetters('diffs', ['commitId', 'shouldRenderParallelCommentRow']),
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
-    parallelDiffLines() {
-      return this.diffLines.map(line => {
-        const parallelLine = Object.assign({}, line);
-
-        if (line.left) {
-          parallelLine.left = trimFirstCharOfLineContent(line.left);
-        } else {
-          parallelLine.left = { type: EMPTY_CELL_TYPE };
-        }
-
-        if (line.right) {
-          parallelLine.right = trimFirstCharOfLineContent(line.right);
-        } else {
-          parallelLine.right = { type: EMPTY_CELL_TYPE };
-        }
-
-        return parallelLine;
-      });
-    },
     diffLinesLength() {
-      return this.parallelDiffLines.length;
+      return this.diffLines.length;
     },
     userColorScheme() {
       return window.gon.user_color_scheme;
@@ -92,7 +69,7 @@ export default {
             :line-index="index"
             :left-discussions="discussionsByLine(line, 'left')"
             :right-discussions="discussionsByLine(line, 'right')"
-          />
+          />-->
         </template>
       </tbody>
     </table>

app/assets/javascripts/diffs/store/getters.js

@@ -64,13 +64,18 @@ export const getDiffFileDiscussions = (state, getters, rootState, rootGetters) =
       discussion.diff_discussion && _.isEqual(discussion.diff_file.file_hash, diff.fileHash),
   ) || [];
 
-export const singleDiscussionByLineCode = (state, getters, rootState, rootGetters) => lineCode => {
+export const singleDiscussionByLineCodeOld = (
+  state,
+  getters,
+  rootState,
+  rootGetters,
+) => lineCode => {
   if (!lineCode || lineCode === undefined) return [];
   const discussions = rootGetters.discussionsByLineCode;
   return discussions[lineCode] || [];
 };
 
-export const shouldRenderParallelCommentRow = (state, getters) => line => {
+export const shouldRenderParallelCommentRowOld = (state, getters) => line => {
   const leftLineCode = line.left.lineCode;
   const rightLineCode = line.right.lineCode;
   const leftDiscussions = getters.singleDiscussionByLineCode(leftLineCode);

app/assets/javascripts/diffs/store/mutations.js

@@ -3,6 +3,7 @@ import _ from 'underscore';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { findDiffFile, addLineReferences, removeMatchLine, addContextLines } from './utils';
 import { LINES_TO_BE_RENDERED_DIRECTLY, MAX_LINES_TO_BE_RENDERED } from '../constants';
+import { trimFirstCharOfLineContent } from '../store/utils';
 import * as types from './mutation_types';
 
 export default {

app/assets/javascripts/diffs/store/utils.js

@@ -161,6 +161,8 @@ export function addContextLines(options) {
  * @returns {Object}
  */
 export function trimFirstCharOfLineContent(line = {}) {
+  delete line.text;
+
   const parsedLine = Object.assign({}, line);
 
   if (line.richText) {