Merge branch 'ph/fixUnifiedDiffLinesRenderingInlineIncorrectly' into 'master'

Fixed unified diff lines not displaying inline diffs correctly

Closes #247934

See merge request gitlab-org/gitlab!42217

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

@@ -49,8 +49,12 @@ export default {
     ...mapState({
       projectPath: state => state.diffs.projectPath,
     }),
-    ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
-    ...mapGetters('diffs', ['getCommentFormForDiffFile']),
+    ...mapGetters('diffs', [
+      'isInlineView',
+      'isParallelView',
+      'getCommentFormForDiffFile',
+      'diffLines',
+    ]),
     ...mapGetters(['getNoteableData', 'noteableType', 'getUserData']),
     diffMode() {
       return getDiffMode(this.diffFile);
@@ -115,17 +119,15 @@ export default {
         <inline-diff-view
           v-if="isInlineView"
           :diff-file="diffFile"
-          :diff-lines="
-            glFeatures.unifiedDiffLines
-              ? diffFile.parallel_diff_lines
-              : diffFile.highlighted_diff_lines || []
-          "
+          :diff-lines="diffFile.highlighted_diff_lines"
           :help-page-path="helpPagePath"
         />
         <parallel-diff-view
           v-else-if="isParallelView"
           :diff-file="diffFile"
-          :diff-lines="diffFile.parallel_diff_lines || []"
+          :diff-lines="
+            glFeatures.unifiedDiffLines ? diffLines(diffFile) : diffFile.parallel_diff_lines || []
+          "
           :help-page-path="helpPagePath"
         />
         <gl-loading-icon v-if="diffFile.renderingLines" size="md" class="mt-3" />

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

@@ -67,9 +67,7 @@ export default {
   computed: {
     ...mapState({
       diffViewType(state) {
-        return this.glFeatures.unifiedDiffLines
-          ? PARALLEL_DIFF_VIEW_TYPE
-          : state.diffs.diffViewType;
+        return this.glFeatures.unifiedDiffLines ? INLINE_DIFF_VIEW_TYPE : state.diffs.diffViewType;
       },
       diffFiles: state => state.diffs.diffFiles,
     }),

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

@@ -64,67 +64,6 @@ export default {
       <col />
     </colgroup>
     <tbody>
-      <template v-if="glFeatures.unifiedDiffLines">
-        <template v-for="({ left, right }, index) in diffLines">
-          <inline-diff-expansion-row
-            :key="`expand-${index}`"
-            :file-hash="diffFile.file_hash"
-            :context-lines-path="diffFile.context_lines_path"
-            :line="left || right"
-            :is-top="index === 0"
-            :is-bottom="index + 1 === diffLinesLength"
-          />
-          <template v-if="left">
-            <inline-diff-table-row
-              :key="`${left.line_code || index}`"
-              :file-hash="diffFile.file_hash"
-              :file-path="diffFile.file_path"
-              :line="left"
-              :is-bottom="index + 1 === diffLinesLength"
-              :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine"
-            />
-            <inline-diff-comment-row
-              :key="`icr-${left.line_code || index}`"
-              :diff-file-hash="diffFile.file_hash"
-              :line="left"
-              :help-page-path="helpPagePath"
-              :has-draft="shouldRenderDraftRow(diffFile.file_hash, left) || false"
-            />
-            <inline-draft-comment-row
-              v-if="shouldRenderDraftRow(diffFile.file_hash, left)"
-              :key="`draft_${index}`"
-              :draft="draftForLine(diffFile.file_hash, left)"
-              :diff-file="diffFile"
-              :line="left"
-            />
-          </template>
-          <template v-if="right && right.type === 'new'">
-            <inline-diff-table-row
-              :key="`new-${right.line_code || index}`"
-              :file-hash="diffFile.file_hash"
-              :file-path="diffFile.file_path"
-              :line="right"
-              :is-bottom="index + 1 === diffLinesLength"
-              :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine"
-            />
-            <inline-diff-comment-row
-              :key="`new-icr-${right.line_code || index}`"
-              :diff-file-hash="diffFile.file_hash"
-              :line="right"
-              :help-page-path="helpPagePath"
-              :has-draft="shouldRenderDraftRow(diffFile.file_hash, right) || false"
-            />
-            <inline-draft-comment-row
-              v-if="shouldRenderDraftRow(diffFile.file_hash, right)"
-              :key="`new-draft_${index}`"
-              :draft="draftForLine(diffFile.file_hash, right)"
-              :diff-file="diffFile"
-              :line="right"
-            />
-          </template>
-        </template>
-      </template>
-      <template v-else>
       <template v-for="(line, index) in diffLines">
         <inline-diff-expansion-row
           :key="`expand-${index}`"
@@ -157,7 +96,6 @@ export default {
           :line="line"
         />
       </template>
-      </template>
     </tbody>
   </table>
 </template>

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

 import { __, n__ } from '~/locale';
+import { parallelizeDiffLines } from './utils';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '../constants';
 
 export * from './getters_versions_dropdowns';
@@ -129,3 +130,11 @@ export const fileLineCoverage = state => (file, line) => {
  */
 export const currentDiffIndex = state =>
   Math.max(0, state.diffFiles.findIndex(diff => diff.file_hash === state.currentDiffFileId));
+
+export const diffLines = state => file => {
+  if (state.diffViewType === INLINE_DIFF_VIEW_TYPE) {
+    return null;
+  }
+
+  return parallelizeDiffLines(file.highlighted_diff_lines || []);
+};

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

 import Vue from 'vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { PARALLEL_DIFF_VIEW_TYPE } from '../constants';
+import { INLINE_DIFF_VIEW_TYPE } from '../constants';
 import {
   findDiffFile,
   addLineReferences,
@@ -152,7 +152,7 @@ export default {
       inlineLines: diffFile.highlighted_diff_lines,
       parallelLines: diffFile.parallel_diff_lines,
       diffViewType: window.gon?.features?.unifiedDiffLines
-        ? PARALLEL_DIFF_VIEW_TYPE
+        ? INLINE_DIFF_VIEW_TYPE
         : state.diffViewType,
       contextLines: lines,
       bottom,

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

@@ -350,15 +350,8 @@ function mergeTwoFiles(target, source) {
 }
 
 function ensureBasicDiffFileLines(file) {
-  if (window.gon?.features?.unifiedDiffLines) {
-    return Object.assign(file, {
-      highlighted_diff_lines: [],
-      parallel_diff_lines: parallelizeDiffLines(file.highlighted_diff_lines || []),
-    });
-  }
-
   const missingInline = !file.highlighted_diff_lines;
-  const missingParallel = !file.parallel_diff_lines;
+  const missingParallel = !file.parallel_diff_lines || window.gon?.features?.unifiedDiffLines;
 
   Object.assign(file, {
     highlighted_diff_lines: missingInline ? [] : file.highlighted_diff_lines,

spec/frontend/diffs/components/diff_file_spec.js

@@ -215,7 +215,7 @@ describe('DiffFile', () => {
     it('calls handleLoadCollapsedDiff if collapsed changed & file has no lines', done => {
       jest.spyOn(vm, 'handleLoadCollapsedDiff').mockImplementation(() => {});
 
-      vm.file.highlighted_diff_lines = undefined;
+      vm.file.highlighted_diff_lines = [];
       vm.file.parallel_diff_lines = [];
       vm.isCollapsed = true;
 
@@ -242,8 +242,8 @@ describe('DiffFile', () => {
 
       jest.spyOn(vm, 'handleLoadCollapsedDiff').mockImplementation(() => {});
 
-      vm.file.highlighted_diff_lines = undefined;
-      vm.file.parallel_diff_lines = [];
+      vm.file.highlighted_diff_lines = [];
+      vm.file.parallel_diff_lines = undefined;
       vm.isCollapsed = true;
 
       vm.$nextTick()