Replace ... with new expansion options

- expand upwards
- expand downwards
- expand all

in both inline and parallel views

3 files changed, 39 insertions, 18 deletions

diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 32e0d8f42ee..8434ef5cc7a 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -183,7 +183,7 @@ export const cancelCommentForm = ({ commit }, { lineCode, fileHash }) => {
 };
 
 export const loadMoreLines = ({ commit }, options) => {
-  const { endpoint, params, lineNumbers, fileHash } = options;
+  const { endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers } = options;
 
   params.from_merge_request = true;
 
@@ -195,6 +195,8 @@ export const loadMoreLines = ({ commit }, options) => {
       contextLines,
       params,
       fileHash,
+      isExpandDown,
+      nextLineNumbers,
     });
   });
 };
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index a66f205bbbd..a6915a46c00 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -71,18 +71,30 @@ export default {
   },
 
   [types.ADD_CONTEXT_LINES](state, options) {
-    const { lineNumbers, contextLines, fileHash } = options;
+    const { lineNumbers, contextLines, fileHash, isExpandDown, nextLineNumbers } = options;
     const { bottom } = options.params;
     const diffFile = findDiffFile(state.diffFiles, fileHash);
 
     removeMatchLine(diffFile, lineNumbers, bottom);
 
-    const lines = addLineReferences(contextLines, lineNumbers, bottom).map(line => ({
-      ...line,
-      line_code: line.line_code || `${fileHash}_${line.old_line}_${line.new_line}`,
-      discussions: line.discussions || [],
-      hasForm: false,
-    }));
+    const lines = addLineReferences(
+      contextLines,
+      lineNumbers,
+      bottom,
+      isExpandDown,
+      nextLineNumbers,
+    ).map(line => {
+      const lineCode =
+        line.type === 'match'
+          ? `${fileHash}_${line.meta_data.old_pos}_${line.meta_data.new_pos}_match`
+          : line.line_code || `${fileHash}_${line.old_line}_${line.new_line}`;
+      return {
+        ...line,
+        line_code: lineCode,
+        discussions: line.discussions || [],
+        hasForm: false,
+      };
+    });
 
     addContextLines({
       inlineLines: diffFile.highlighted_diff_lines,
@@ -90,6 +102,7 @@ export default {
       contextLines: lines,
       bottom,
       lineNumbers,
+      isExpandDown,
     });
   },
 
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 1c3ed84001c..d46bdea9b50 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -121,7 +121,7 @@ export function removeMatchLine(diffFile, lineNumbers, bottom) {
   diffFile.parallel_diff_lines.splice(indexForParallel + factor, 1);
 }
 
-export function addLineReferences(lines, lineNumbers, bottom) {
+export function addLineReferences(lines, lineNumbers, bottom, isExpandDown, nextLineNumbers) {
   const { oldLineNumber, newLineNumber } = lineNumbers;
   const lineCount = lines.length;
   let matchLineIndex = -1;
@@ -135,15 +135,20 @@ export function addLineReferences(lines, lineNumbers, bottom) {
         new_line: bottom ? newLineNumber + index + 1 : newLineNumber + index - lineCount,
       });
     }
-
     return l;
   });
 
   if (matchLineIndex > -1) {
     const line = linesWithNumbers[matchLineIndex];
-    const targetLine = bottom
-      ? linesWithNumbers[matchLineIndex - 1]
-      : linesWithNumbers[matchLineIndex + 1];
+    let targetLine;
+
+    if (isExpandDown) {
+      targetLine = nextLineNumbers;
+    } else if (bottom) {
+      targetLine = linesWithNumbers[matchLineIndex - 1];
+    } else {
+      targetLine = linesWithNumbers[matchLineIndex + 1];
+    }
 
     Object.assign(line, {
       meta_data: {
@@ -152,26 +157,27 @@ export function addLineReferences(lines, lineNumbers, bottom) {
       },
     });
   }
-
   return linesWithNumbers;
 }
 
 export function addContextLines(options) {
-  const { inlineLines, parallelLines, contextLines, lineNumbers } = options;
+  const { inlineLines, parallelLines, contextLines, lineNumbers, isExpandDown } = options;
   const normalizedParallelLines = contextLines.map(line => ({
     left: line,
     right: line,
     line_code: line.line_code,
   }));
+  const factor = isExpandDown ? 1 : 0;
 
-  if (options.bottom) {
+  if (!isExpandDown && options.bottom) {
     inlineLines.push(...contextLines);
     parallelLines.push(...normalizedParallelLines);
   } else {
     const inlineIndex = findIndexInInlineLines(inlineLines, lineNumbers);
     const parallelIndex = findIndexInParallelLines(parallelLines, lineNumbers);
-    inlineLines.splice(inlineIndex, 0, ...contextLines);
-    parallelLines.splice(parallelIndex, 0, ...normalizedParallelLines);
+
+    inlineLines.splice(inlineIndex + factor, 0, ...contextLines);
+    parallelLines.splice(parallelIndex + factor, 0, ...normalizedParallelLines);
   }
 }