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

This commit is contained in:
René Pfeuffer
2020-05-30 16:35:49 +02:00
parent e7f03378a4
commit 8c1d463e09
4 changed files with 68 additions and 29 deletions

View File

@@ -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);

View File

@@ -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;

View File

@@ -151,13 +151,30 @@ class DiffFile extends React.Component<Props, State> {
createHunkHeader = (expandableHunk: ExpandableHunk) => {
if (expandableHunk.maxExpandHeadRange > 0) {
return (
<Decoration>
<HunkDivider onClick={() => expandableHunk.expandHead(this.diffExpanded)}>
{`Load ${expandableHunk.maxExpandHeadRange} more lines`}
</HunkDivider>
</Decoration>
);
if (expandableHunk.maxExpandHeadRange <= 10) {
return (
<Decoration>
<HunkDivider>
<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) {
return (
<Decoration>
<HunkDivider onClick={() => expandableHunk.expandBottom(this.diffExpanded)}>
{`Load ${expandableHunk.maxExpandBottomRange} more lines`}
</HunkDivider>
</Decoration>
);
if (expandableHunk.maxExpandBottomRange <= 10) {
return (
<Decoration>
<HunkDivider>
<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 />;