Merge branch 'ph/unifiedDiffComponentsClassNameFixes' into 'master'

Fix line classes and unified diff components

See merge request gitlab-org/gitlab!51203

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

@@ -58,7 +58,7 @@ export default {
     classNameMap() {
       return {
         [CONTEXT_LINE_CLASS_NAME]: this.line.isContextLineLeft,
-        [PARALLEL_DIFF_VIEW_TYPE]: true,
+        [PARALLEL_DIFF_VIEW_TYPE]: !this.inline,
       };
     },
     parallelViewLeftLineType() {
@@ -148,7 +148,7 @@ export default {
         <div
           :class="classNameMapCellLeft"
           data-testid="leftLineNumber"
-          class="diff-td diff-line-num old_line"
+          class="diff-td diff-line-num"
         >
           <template v-if="!isLeftConflictMarker">
             <span
@@ -189,7 +189,7 @@ export default {
             "
           />
         </div>
-        <div v-if="inline" :class="classNameMapCellLeft" class="diff-td diff-line-num old_line">
+        <div v-if="inline" :class="classNameMapCellLeft" class="diff-td diff-line-num">
           <a
             v-if="line.left.new_line && line.left.type !== $options.CONFLICT_OUR"
             :data-linenumber="line.left.new_line"
@@ -202,8 +202,8 @@ export default {
         <div
           :id="line.left.line_code"
           :key="line.left.line_code"
-          :class="parallelViewLeftLineType"
-          class="diff-td line_content with-coverage parallel left-side"
+          :class="[parallelViewLeftLineType, { parallel: !inline }]"
+          class="diff-td line_content with-coverage left-side"
           data-testid="leftContent"
           @mousedown="handleParallelLineMouseDown"
         >
@@ -229,8 +229,8 @@ export default {
           :class="emptyCellLeftClassMap"
         ></div>
         <div
-          class="diff-td line_content with-coverage parallel left-side empty-cell"
-          :class="emptyCellLeftClassMap"
+          class="diff-td line_content with-coverage left-side empty-cell"
+          :class="[emptyCellLeftClassMap, { parallel: !inline }]"
         ></div>
       </template>
     </div>
@@ -285,8 +285,8 @@ export default {
         <div
           :id="line.right.line_code"
           :key="line.right.rich_text"
-          :class="[line.right.type, { hll: isHighlighted }]"
-          class="diff-td line_content with-coverage parallel right-side"
+          :class="[line.right.type, { hll: isHighlighted, parallel: !inline }]"
+          class="diff-td line_content with-coverage right-side"
           @mousedown="handleParallelLineMouseDown"
         >
           <strong v-if="line.right.type === $options.CONFLICT_MARKER_THEIR">{{
@@ -311,8 +311,8 @@ export default {
           :class="emptyCellRightClassMap"
         ></div>
         <div
-          class="diff-td line_content with-coverage parallel right-side empty-cell"
-          :class="emptyCellRightClassMap"
+          class="diff-td line_content with-coverage right-side empty-cell"
+          :class="[emptyCellRightClassMap, { parallel: !inline }]"
         ></div>
       </template>
     </div>

app/assets/javascripts/diffs/components/diff_row_utils.js

@@ -44,6 +44,8 @@ export const classNameMapCell = (line, hll, isLoggedIn, isHover) => {
     {
       hll,
       [LINE_HOVER_CLASS_NAME]: isLoggedIn && isHover && !isContextLine(type) && !isMetaLine(type),
+      old_line: line.type === 'old',
+      new_line: line.type === 'new',
     },
   ];
 };

spec/frontend/diffs/components/diff_row_utils_spec.js

@@ -128,10 +128,10 @@ describe('classNameMapCell', () => {
   it.each`
     line               | hll      | loggedIn | hovered  | expectation
     ${undefined}       | ${true}  | ${true}  | ${true}  | ${[]}
-    ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false }]}
-    ${{ type: 'new' }} | ${true}  | ${true}  | ${false} | ${['new', { hll: true, 'is-over': false }]}
-    ${{ type: 'new' }} | ${true}  | ${false} | ${true}  | ${['new', { hll: true, 'is-over': false }]}
-    ${{ type: 'new' }} | ${true}  | ${true}  | ${true}  | ${['new', { hll: true, 'is-over': true }]}
+    ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}  | ${false} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${false} | ${true}  | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}  | ${true}  | ${['new', { hll: true, 'is-over': true, new_line: true, old_line: false }]}
   `('should return $expectation', ({ line, hll, loggedIn, hovered, expectation }) => {
     const classes = utils.classNameMapCell(line, hll, loggedIn, hovered);
     expect(classes).toEqual(expectation);