From 8c1d463e094ef5a2c8acd252806079461c679d88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Sat, 30 May 2020 16:35:49 +0200 Subject: [PATCH] Give two options for diff expansion (some or all lines) --- .../src/repos/DiffExpander.test.ts | 9 +-- .../ui-components/src/repos/DiffExpander.ts | 16 ++--- scm-ui/ui-components/src/repos/DiffFile.tsx | 62 ++++++++++++++----- scm-ui/ui-webapp/public/locales/en/repos.json | 10 ++- 4 files changed, 68 insertions(+), 29 deletions(-) diff --git a/scm-ui/ui-components/src/repos/DiffExpander.test.ts b/scm-ui/ui-components/src/repos/DiffExpander.test.ts index d7d0bde027..37f7e825ef 100644 --- a/scm-ui/ui-components/src/repos/DiffExpander.test.ts +++ b/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( - "http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start=20&end=21", - "new line 1" - ); + fetchMock.get("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); diff --git a/scm-ui/ui-components/src/repos/DiffExpander.ts b/scm-ui/ui-components/src/repos/DiffExpander.ts index 0311636d7c..779c43c27c 100644 --- a/scm-ui/ui-components/src/repos/DiffExpander.ts +++ b/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), - expandBottom: (callback: (newFile: File) => void) => this.expandBottom(n, callback), + expandHead: (count: number, callback: (newFile: File) => void) => this.expandHead(n, count, 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; - expandBottom: (callback: (newFile: File) => void) => void; + expandHead: (count: number, callback: (newFile: File) => void) => void; + expandBottom: (count: number, callback: (newFile: File) => void) => void; }; export default DiffExpander; diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx index a6dbc4c90e..0ae70c764b 100644 --- a/scm-ui/ui-components/src/repos/DiffFile.tsx +++ b/scm-ui/ui-components/src/repos/DiffFile.tsx @@ -151,13 +151,30 @@ class DiffFile extends React.Component { createHunkHeader = (expandableHunk: ExpandableHunk) => { if (expandableHunk.maxExpandHeadRange > 0) { - return ( - - expandableHunk.expandHead(this.diffExpanded)}> - {`Load ${expandableHunk.maxExpandHeadRange} more lines`} - - - ); + if (expandableHunk.maxExpandHeadRange <= 10) { + return ( + + + expandableHunk.expandHead(expandableHunk.maxExpandHeadRange, this.diffExpanded)}> + {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })} + + + + ); + } else { + return ( + + + expandableHunk.expandHead(10, this.diffExpanded)}> + {this.props.t("diff.expandHeadByLines", { count: 10 })} + {" "} + expandableHunk.expandHead(expandableHunk.maxExpandHeadRange, this.diffExpanded)}> + {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })} + + + + ); + } } // hunk header must be defined return ; @@ -165,13 +182,30 @@ class DiffFile extends React.Component { createHunkFooter = (expandableHunk: ExpandableHunk) => { if (expandableHunk.maxExpandBottomRange > 0) { - return ( - - expandableHunk.expandBottom(this.diffExpanded)}> - {`Load ${expandableHunk.maxExpandBottomRange} more lines`} - - - ); + if (expandableHunk.maxExpandBottomRange <= 10) { + return ( + + + expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange, this.diffExpanded)}> + {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })} + + + + ); + } else { + return ( + + + expandableHunk.expandBottom(10, this.diffExpanded)}> + {this.props.t("diff.expandBottomByLines", { count: 10 })} + {" "} + expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange, this.diffExpanded)}> + {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })} + + + + ); + } } // hunk header must be defined return ; diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json index 2abf63eb47..53d1de79b7 100644 --- a/scm-ui/ui-webapp/public/locales/en/repos.json +++ b/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",