Patch hunks with new lines

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

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+import fetchMock from "fetch-mock";
 import DiffExpander from "./DiffExpander";
 
 const HUNK_0 = {
@@ -294,7 +294,7 @@ const TEST_CONTENT_WITH_HUNKS = {
   _links: {
     lines: {
       href:
-        "http://localhost:8081/scm/api/v2/repositories/scm-manager/scm-editor-plugin/content/f7a23064f3f2418f26140a9545559e72d595feb5/src/main/js/CommitMessage.js?start={start}?end={end}",
+        "http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start={start}&end={end}",
       templated: true
     }
   }
@@ -333,7 +333,7 @@ const TEST_CONTENT_WITH_NEW_TEXT_FILE = {
   _links: {
     lines: {
       href:
-        "http://localhost:8081/scm/api/v2/repositories/scm-manager/scm-editor-plugin/content/c63898d35520ee47bcc3a8291660979918715762/src/main/markdown/README.md?start={start}?end={end}",
+        "http://localhost:8081/scm/api/v2/repositories/scm-manager/scm-editor-plugin/content/c63898d35520ee47bcc3a8291660979918715762/src/main/markdown/README.md?start={start}&end={end}",
       templated: true
     }
   }
@@ -356,11 +356,17 @@ const TEST_CONTENT_WITH_DELETED_TEXT_FILE = {
       changes: [{ content: "# scm-editor-plugin", type: "delete", lineNumber: 1, isDelete: true }]
     }
   ],
-  _links: { lines: { href: "http://localhost:8081/dev/null?start={start}?end={end}", templated: true } }
+  _links: { lines: { href: "http://localhost:8081/dev/null?start={start}&end={end}", templated: true } }
 };
 
 describe("with hunks the diff expander", () => {
   const diffExpander = new DiffExpander(TEST_CONTENT_WITH_HUNKS);
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+  });
+
   it("should have hunk count from origin", () => {
     expect(diffExpander.hunkCount()).toBe(4);
   });
@@ -384,6 +390,36 @@ describe("with hunks the diff expander", () => {
   it("should return a really bix number for the expand bottom range of the last hunk", () => {
     expect(diffExpander.getHunk(3).maxExpandBottomRange).toBeGreaterThan(99999);
   });
+  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=22&end=22", "new line 1\nnew line 2");
+    let newFile;
+    diffExpander.getHunk(1).expandBottom(file => {
+      newFile = file;
+    });
+    await fetchMock.flush(true);
+    expect(fetchMock.done()).toBe(true);
+    expect(newFile.hunks[1].changes.length).toBe(9);
+    expect(newFile.hunks[1].changes[7].content).toBe("new line 1");
+    expect(newFile.hunks[1].changes[8].content).toBe("new line 2");
+  });
+  it("should expand hunk with new line from api client at the top", async () => {
+    expect(diffExpander.getHunk(1).hunk.changes.length).toBe(7);
+    fetchMock.get("http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start=9&end=13", "new line 1\nnew line 2");
+    let newFile;
+    diffExpander.getHunk(1).expandHead(file => {
+      newFile = file;
+    });
+    await fetchMock.flush(true);
+    expect(fetchMock.done()).toBe(true);
+    expect(newFile.hunks[1].changes.length).toBe(9);
+    expect(newFile.hunks[1].changes[0].content).toBe("new line 1");
+    expect(newFile.hunks[1].changes[0].oldLineNumber).toBe(12);
+    expect(newFile.hunks[1].changes[0].newLineNumber).toBe(12);
+    expect(newFile.hunks[1].changes[1].content).toBe("new line 2");
+    expect(newFile.hunks[1].changes[1].oldLineNumber).toBe(13);
+    expect(newFile.hunks[1].changes[1].newLineNumber).toBe(13);
+  });
 });
 
 describe("for a new file with text input the diff expander", () => {

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

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { File, Hunk } from "./DiffTypes";
+import { apiClient } from "@scm-manager/ui-components";
+import { Change, File, Hunk } from "./DiffTypes";
 
 class DiffExpander {
   file: File;
@@ -65,16 +66,109 @@ class DiffExpander {
     return this.minLineNumber(n + 1) - this.maxLineNumber(n);
   };
 
+  expandHead = (n: number, callback: (newFile: File) => void) => {
+    const lineRequestUrl = this.file._links.lines.href
+      .replace("{start}", this.minLineNumber(n) - Math.min(10, this.computeMaxExpandHeadRange(n)))
+      .replace("{end}", this.minLineNumber(n) - 1);
+    apiClient
+      .get(lineRequestUrl)
+      .then(response => response.text())
+      .then(text => text.split("\n"))
+      .then(lines => this.expandHunkAtHead(n, lines, callback));
+  };
+
+  expandBottom = (n: number, callback: (newFile: File) => void) => {
+    const lineRequestUrl = this.file._links.lines.href
+      .replace("{start}", this.maxLineNumber(n) + 1)
+      .replace("{end}", this.maxLineNumber(n) + Math.min(10, this.computeMaxExpandBottomRange(n)));
+    apiClient
+      .get(lineRequestUrl)
+      .then(response => response.text())
+      .then(text => text.split("\n"))
+      .then(lines => this.expandHunkAtBottom(n, lines, callback));
+  };
+
+  expandHunkAtHead = (n: number, lines: string[], callback: (newFile: File) => void) => {
+    const hunk = this.file.hunks[n];
+    const newChanges: Change[] = [];
+    let oldLineNumber = hunk.changes[0].oldLineNumber - lines.length;
+    let newLineNumber = hunk.changes[0].newLineNumber - lines.length;
+
+    lines.forEach(line => {
+      newChanges.push({
+        content: line,
+        type: "normal",
+        oldLineNumber,
+        newLineNumber,
+        isNormal: true
+      });
+      oldLineNumber += 1;
+      newLineNumber += 1;
+    });
+    hunk.changes.forEach(change => newChanges.push(change));
+
+    const newHunk = {
+      ...hunk,
+      oldStart: hunk.oldStart - lines.length,
+      newStart: hunk.newStart - lines.length,
+      oldLines: hunk.oldLines + lines.length,
+      newLines: hunk.newLines + lines.length,
+      changes: newChanges
+    };
+    const newHunks: Hunk[] = [];
+    this.file.hunks!.forEach((oldHunk: Hunk, i: number) => {
+      if (i === n) {
+        newHunks.push(newHunk);
+      } else {
+        newHunks.push(oldHunk);
+      }
+    });
+    const newFile = { ...this.file, hunks: newHunks };
+    callback(newFile);
+  };
+
+  expandHunkAtBottom = (n: number, lines: string[], callback: (newFile: File) => void) => {
+    const hunk = this.file.hunks![n];
+    const newChanges = [...hunk.changes];
+    let oldLineNumber = newChanges[newChanges.length - 1].oldLineNumber;
+    let newLineNumber = newChanges[newChanges.length - 1].newLineNumber;
+
+    lines.forEach(line => {
+      oldLineNumber += 1;
+      newLineNumber += 1;
+      newChanges.push({
+        content: line,
+        type: "normal",
+        oldLineNumber,
+        newLineNumber,
+        isNormal: true
+      });
+    });
+
+    const newHunk = {
+      ...hunk,
+      oldLines: hunk.oldLines + lines.length,
+      newLines: hunk.newLines + lines.length,
+      changes: newChanges
+    };
+    const newHunks: Hunk[] = [];
+    this.file.hunks.forEach((oldHunk: Hunk, i: number) => {
+      if (i === n) {
+        newHunks.push(newHunk);
+      } else {
+        newHunks.push(oldHunk);
+      }
+    });
+    const newFile = { ...this.file, hunks: newHunks };
+    callback(newFile);
+  };
+
   getHunk: (n: number) => ExpandableHunk = (n: number) => {
     return {
       maxExpandHeadRange: this.computeMaxExpandHeadRange(n),
       maxExpandBottomRange: this.computeMaxExpandBottomRange(n),
-      expandHead: () => {
-        return this;
-      },
-      expandBottom: () => {
-        return this;
-      },
+      expandHead: (callback: (newFile: File) => void) => this.expandHead(n, callback),
+      expandBottom: (callback: (newFile: File) => void) => this.expandBottom(n, callback),
       hunk: this.file?.hunks![n]
     };
   };
@@ -84,8 +178,8 @@ export type ExpandableHunk = {
   hunk: Hunk;
   maxExpandHeadRange: number;
   maxExpandBottomRange: number;
-  expandHead: () => DiffExpander;
-  expandBottom: () => DiffExpander;
+  expandHead: (callback: (newFile: File) => void) => void;
+  expandBottom: (callback: (newFile: File) => void) => void;
 };
 
 export default DiffExpander;

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

@@ -48,6 +48,7 @@ type Collapsible = {
 };
 
 type State = Collapsible & {
+  file: File;
   sideBySide?: boolean;
   diffExpander: DiffExpander;
 };
@@ -96,7 +97,8 @@ class DiffFile extends React.Component<Props, State> {
     this.state = {
       collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide,
-      diffExpander: new DiffExpander(props.file)
+      diffExpander: new DiffExpander(props.file),
+      file: props.file
     };
   }
 
@@ -120,7 +122,7 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   toggleCollapse = () => {
-    const { file } = this.props;
+    const { file } = this.state;
     if (this.hasContent(file)) {
       this.setState(state => ({
         collapsed: !state.collapsed
@@ -143,11 +145,15 @@ class DiffFile extends React.Component<Props, State> {
     });
   };
 
+  diffExpanded = (newFile: File) => {
+    this.setState({ file: newFile, diffExpander: new DiffExpander(newFile) });
+  };
+
   createHunkHeader = (expandableHunk: ExpandableHunk) => {
     if (expandableHunk.maxExpandHeadRange > 0) {
       return (
         <Decoration>
-          <HunkDivider onClick={() => this.setState({ diffExpander: expandableHunk.expandHead() })}>
+          <HunkDivider onClick={() => expandableHunk.expandHead(this.diffExpanded)}>
             {`Load ${expandableHunk.maxExpandHeadRange} more lines`}
           </HunkDivider>
         </Decoration>
@@ -161,7 +167,7 @@ class DiffFile extends React.Component<Props, State> {
     if (expandableHunk.maxExpandBottomRange > 0) {
       return (
         <Decoration>
-          <HunkDivider onClick={() => this.setState({ diffExpander: expandableHunk.expandBottom() })}>
+          <HunkDivider onClick={() => expandableHunk.expandBottom(this.diffExpanded)}>
             {`Load ${expandableHunk.maxExpandBottomRange} more lines`}
           </HunkDivider>
         </Decoration>
@@ -172,7 +178,8 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   collectHunkAnnotations = (hunk: HunkType) => {
-    const { annotationFactory, file } = this.props;
+    const { annotationFactory } = this.props;
+    const { file } = this.state;
     if (annotationFactory) {
       return annotationFactory({
         hunk,
@@ -184,7 +191,8 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   handleClickEvent = (change: Change, hunk: HunkType) => {
-    const { file, onClick } = this.props;
+    const { onClick } = this.props;
+    const { file } = this.state;
     const context = {
       changeId: getChangeKey(change),
       change,
@@ -286,8 +294,8 @@ class DiffFile extends React.Component<Props, State> {
   hasContent = (file: File) => file && !file.isBinary && file.hunks && file.hunks.length > 0;
 
   render() {
-    const { file, fileControlFactory, fileAnnotationFactory, t } = this.props;
-    const { collapsed, sideBySide, diffExpander } = this.state;
+    const { fileControlFactory, fileAnnotationFactory, t } = this.props;
+    const { file, collapsed, sideBySide, diffExpander } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
@@ -299,7 +307,11 @@ class DiffFile extends React.Component<Props, State> {
         <div className="panel-block is-paddingless">
           {fileAnnotations}
           <TokenizedDiffView className={viewType} viewType={viewType} file={file}>
-            {(hunks: HunkType[]) => hunks?.map((hunk, n) => this.renderHunk(file, diffExpander.getHunk(n), n))}
+            {(hunks: HunkType[]) =>
+              hunks?.map((hunk, n) => {
+                return this.renderHunk(file, diffExpander.getHunk(n), n);
+              })
+            }
           </TokenizedDiffView>
         </div>
       );