Give two options for diff expansion (some or all lines)

scm-ui/ui-components/src/repos/DiffExpander.test.ts

@@ -203,12 +203,9 @@ describe("with hunks the diff expander", () => {
   });
   it("should expand hunk with new line from api client at the bottom", async () => {
     expect(diffExpander.getHunk(1).hunk.changes.length).toBe(7);
-    fetchMock.get(
+    fetchMock.get("http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start=20&end=21", "new line 1");
-      "http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start=20&end=21",
-      "new line 1"
-    );
     let newFile;
-    diffExpander.getHunk(1).expandBottom(file => {
+    diffExpander.getHunk(1).expandBottom(1, file => {
       newFile = file;
     });
     await fetchMock.flush(true);
@@ -223,7 +220,7 @@ describe("with hunks the diff expander", () => {
       "new line 9\nnew line 10\nnew line 11\nnew line 12\nnew line 13"
     );
     let newFile;
-    diffExpander.getHunk(1).expandHead(file => {
+    diffExpander.getHunk(1).expandHead(5, file => {
       newFile = file;
     });
     await fetchMock.flush(true);

scm-ui/ui-components/src/repos/DiffExpander.ts

@@ -66,9 +66,9 @@ class DiffExpander {
     return this.minLineNumber(n + 1) - this.maxLineNumber(n) - 1;
   };
 
-  expandHead = (n: number, callback: (newFile: File) => void) => {
+  expandHead = (n: number, count: number, callback: (newFile: File) => void) => {
     const lineRequestUrl = this.file._links.lines.href
-      .replace("{start}", this.minLineNumber(n) - Math.min(10, this.computeMaxExpandHeadRange(n)) - 1)
+      .replace("{start}", this.minLineNumber(n) - Math.min(count, this.computeMaxExpandHeadRange(n)) - 1)
       .replace("{end}", this.minLineNumber(n) - 1);
     apiClient
       .get(lineRequestUrl)
@@ -77,10 +77,10 @@ class DiffExpander {
       .then(lines => this.expandHunkAtHead(n, lines, callback));
   };
 
-  expandBottom = (n: number, callback: (newFile: File) => void) => {
+  expandBottom = (n: number, count: number, callback: (newFile: File) => void) => {
     const lineRequestUrl = this.file._links.lines.href
       .replace("{start}", this.maxLineNumber(n))
-      .replace("{end}", this.maxLineNumber(n) + Math.min(10, this.computeMaxExpandBottomRange(n)));
+      .replace("{end}", this.maxLineNumber(n) + Math.min(count, this.computeMaxExpandBottomRange(n)));
     apiClient
       .get(lineRequestUrl)
       .then(response => response.text())
@@ -173,8 +173,8 @@ class DiffExpander {
     return {
       maxExpandHeadRange: this.computeMaxExpandHeadRange(n),
       maxExpandBottomRange: this.computeMaxExpandBottomRange(n),
-      expandHead: (callback: (newFile: File) => void) => this.expandHead(n, callback),
+      expandHead: (count: number, callback: (newFile: File) => void) => this.expandHead(n, count, callback),
-      expandBottom: (callback: (newFile: File) => void) => this.expandBottom(n, callback),
+      expandBottom: (count: number, callback: (newFile: File) => void) => this.expandBottom(n, count, callback),
       hunk: this.file?.hunks![n]
     };
   };
@@ -184,8 +184,8 @@ export type ExpandableHunk = {
   hunk: Hunk;
   maxExpandHeadRange: number;
   maxExpandBottomRange: number;
-  expandHead: (callback: (newFile: File) => void) => void;
+  expandHead: (count: number, callback: (newFile: File) => void) => void;
-  expandBottom: (callback: (newFile: File) => void) => void;
+  expandBottom: (count: number, callback: (newFile: File) => void) => void;
 };
 
 export default DiffExpander;

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -151,13 +151,30 @@ class DiffFile extends React.Component<Props, State> {
 
   createHunkHeader = (expandableHunk: ExpandableHunk) => {
     if (expandableHunk.maxExpandHeadRange > 0) {
+      if (expandableHunk.maxExpandHeadRange <= 10) {
         return (
           <Decoration>
-          <HunkDivider onClick={() => expandableHunk.expandHead(this.diffExpanded)}>
+            <HunkDivider>
-            {`Load ${expandableHunk.maxExpandHeadRange} more lines`}
+              <span onClick={() => expandableHunk.expandHead(expandableHunk.maxExpandHeadRange, this.diffExpanded)}>
+                {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
+              </span>
             </HunkDivider>
           </Decoration>
         );
+      } else {
+        return (
+          <Decoration>
+            <HunkDivider>
+              <span onClick={() => expandableHunk.expandHead(10, this.diffExpanded)}>
+                {this.props.t("diff.expandHeadByLines", { count: 10 })}
+              </span>{" "}
+              <span onClick={() => expandableHunk.expandHead(expandableHunk.maxExpandHeadRange, this.diffExpanded)}>
+                {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
+              </span>
+            </HunkDivider>
+          </Decoration>
+        );
+      }
     }
     // hunk header must be defined
     return <span />;
@@ -165,13 +182,30 @@ class DiffFile extends React.Component<Props, State> {
 
   createHunkFooter = (expandableHunk: ExpandableHunk) => {
     if (expandableHunk.maxExpandBottomRange > 0) {
+      if (expandableHunk.maxExpandBottomRange <= 10) {
         return (
           <Decoration>
-          <HunkDivider onClick={() => expandableHunk.expandBottom(this.diffExpanded)}>
+            <HunkDivider>
-            {`Load ${expandableHunk.maxExpandBottomRange} more lines`}
+              <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange, this.diffExpanded)}>
+                {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
+              </span>
             </HunkDivider>
           </Decoration>
         );
+      } else {
+        return (
+          <Decoration>
+            <HunkDivider>
+              <span onClick={() => expandableHunk.expandBottom(10, this.diffExpanded)}>
+                {this.props.t("diff.expandBottomByLines", { count: 10 })}
+              </span>{" "}
+              <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange, this.diffExpanded)}>
+                {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
+              </span>
+            </HunkDivider>
+          </Decoration>
+        );
+      }
     }
     // hunk header must be defined
     return <span />;

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -198,7 +198,15 @@
     },
     "sideBySide": "Switch to side-by-side view",
     "combined": "Switch to combined view",
-    "noDiffFound": "No Diff between the selected branches found."
+    "noDiffFound": "No Diff between the selected branches found.",
+    "expandHeadByLines": "> load {{count}} more line",
+    "expandHeadByLines_plural": "> load {{count}} more lines",
+    "expandHeadComplete": ">> load {{count}} line",
+    "expandHeadComplete_plural": ">> load all {{count}} lines",
+    "expandBottomByLines": "> load {{count}} more line",
+    "expandBottomByLines_plural": "> load {{count}} more lines",
+    "expandBottomComplete": ">> load {{count}} line",
+    "expandBottomComplete_plural": ">> load all {{count}} lines"
   },
   "fileUpload": {
     "clickHere": "Click here to select your file",