Display pr source and target in UI

jupyterlab · Mar 3, 2021 · 08f9f28 · 08f9f28
1 parent 100c18e
commit 08f9f28
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 61 deletions.
diff --git a/TODO b/TODO
@@ -9,7 +9,7 @@
   - [x] Support added and removed notebooks (currently JSON error as content on one side is "")
 - [x] Use codemirror as new comment editor
 - [ ] Take advantage of builtin feature of MainAreaWidget (spinner)
-- [ ] Add label - base / head in diff widgets
+- [x] Add label - base / head in diff widgets
 - [x] Simplify number of div to include add button on notebook (and to fix hiding it when unchanged cells are collapsed)
 - [ ] Take into account review from Nick
 - [ ] Add support for comment at PR level for GitHub

diff --git a/jupyterlab_pullrequests/managers/github.py b/jupyterlab_pullrequests/managers/github.py
@@ -94,21 +94,11 @@ async def list_files(self, pr_id: str) -> List[Dict[str, str]]:
     # -----------------------------------------------------------------------------
     # /pullrequests/files/content Handler
     # -----------------------------------------------------------------------------
-
-    async def get_pr_links(self, pr_id: str, filename: str) -> Tuple[str, str]:
-
-        data = await self._get_pull_requests(pr_id)
-        base_url = url_concat(
-            url_path_join(data["base"]["repo"]["url"], "contents", filename),
-            {"ref": data["base"]["sha"]},
+    async def __get_content(self, url: str, filename: str, sha: str) -> str:
+        link = url_concat(
+            url_path_join(url, "contents", filename),
+            {"ref": sha},
         )
-        head_url = url_concat(
-            url_path_join(data["head"]["repo"]["url"], "contents", filename),
-            {"ref": data["head"]["sha"]},
-        )
-        return base_url, head_url
-
-    async def get_content(self, link: str):
         try:
             return await self._call_github(
                 link, media_type="application/vnd.github.v3.raw", load_json=False
@@ -120,15 +110,26 @@ async def get_content(self, link: str):
                 raise e
 
     async def get_file_content(self, pr_id: str, filename: str) -> Dict[str, str]:
+        pull_request = await self._get_pull_requests(pr_id)
 
-        base_url, head_url = await self.get_pr_links(pr_id, filename)
-
-        base_content = await self.get_content(base_url)
-        head_content = await self.get_content(head_url)
+        base_content = await self.__get_content(
+            pull_request["base"]["repo"]["url"], filename, pull_request["base"]["sha"]
+        )
+        head_content = await self.__get_content(
+            pull_request["head"]["repo"]["url"], filename, pull_request["head"]["sha"]
+        )
 
         return {
-            "baseContent": base_content,
-            "headContent": head_content,
+            "base": {
+                "label": pull_request["base"]["label"],
+                "sha": pull_request["base"]["sha"],
+                "content": base_content,
+            },
+            "head": {
+                "label": pull_request["head"]["label"],
+                "sha": pull_request["head"]["sha"],
+                "content": head_content,
+            },
         }
 
     # -----------------------------------------------------------------------------

diff --git a/jupyterlab_pullrequests/managers/gitlab.py b/jupyterlab_pullrequests/managers/gitlab.py
@@ -66,7 +66,7 @@ async def _get_file_diff(self, pr_id: str, filename: str) -> List[difflib.Match]
             a = 0
             b = 0
             for diff in diffs:
-                size = diff[1].count('\n')
+                size = diff[1].count("\n")
                 if diff[0] == 0:
                     file_diff.append(difflib.Match(a=a, b=b, size=size))
                     a += size
@@ -194,16 +194,24 @@ async def get_file_content(self, pr_id: str, filename: str) -> Dict[str, str]:
         self._file_diff_cache[(pr_id, filename)] = None
 
         return {
-            "baseContent": await self.__get_content(
-                merge_request["target_project_id"],
-                filename,
-                merge_request["diff_refs"]["base_sha"],
-            ),
-            "headContent": await self.__get_content(
-                merge_request["source_project_id"],
-                filename,
-                merge_request["diff_refs"]["head_sha"],
-            ),
+            "base": {
+                "label": merge_request["target_branch"],
+                "sha": merge_request["diff_refs"]["base_sha"],
+                "content": await self.__get_content(
+                    merge_request["target_project_id"],
+                    filename,
+                    merge_request["diff_refs"]["base_sha"],
+                ),
+            },
+            "head": {
+                "label": merge_request["source_branch"],
+                "sha": merge_request["diff_refs"]["head_sha"],
+                "content": await self.__get_content(
+                    merge_request["source_project_id"],
+                    filename,
+                    merge_request["diff_refs"]["head_sha"],
+                ),
+            },
         }
 
     # -----------------------------------------------------------------------------
@@ -289,9 +297,9 @@ async def post_file_comment(
                     (await self._get_merge_requests(pr_id))["diff_refs"].copy()
                 )
             else:
-                data["commit_id"] = (await self._get_merge_requests(pr_id))["diff_refs"][
-                    "head_sha"
-                ]
+                data["commit_id"] = (await self._get_merge_requests(pr_id))[
+                    "diff_refs"
+                ]["head_sha"]
 
             git_url = url_path_join(pr_id, "discussions")
 

diff --git a/src/components/diff/notebook.ts b/src/components/diff/notebook.ts
@@ -25,7 +25,7 @@ import {
   IThread,
   IThreadCell
 } from '../../tokens';
-import { requestAPI } from '../../utils';
+import { generateNode, requestAPI } from '../../utils';
 import { NotebookCommentDiffWidget } from './NotebookCommentDiffWidget';
 
 /**
@@ -48,7 +48,10 @@ export class NotebookDiff extends Panel {
     super();
     this.addClass(NBDIME_CLASS);
 
-    const header = Private.diffHeader(props);
+    const header = Private.diffHeader(
+      props.diff.base.label,
+      props.diff.head.label
+    );
     this.addWidget(header);
 
     this.scroller = new Panel();
@@ -68,7 +71,7 @@ export class NotebookDiff extends Panel {
       Private.toggleShowUnchanged(this.scroller, false);
     }
 
-    this.computeDiff(props.content.baseContent, props.content.headContent)
+    this.computeDiff(props.diff.base.content, props.diff.head.content)
       .then(data => {
         this.onData(
           props.prId,
@@ -314,21 +317,17 @@ namespace Private {
   /**
    * Create a header widget for the diff view.
    */
-  export function diffHeader(options: IDiffOptions): Widget {
-    // FIXME
-    const baseLabel = '';
-    const remoteLabel = '';
+  export function diffHeader(baseLabel: string, remoteLabel: string): Widget {
+    const node = generateNode('div', { class: 'nbdime-Diff jp-git-diff-root' });
 
-    const node = document.createElement('div');
-    node.className = 'nbdime-Diff';
     node.innerHTML = `
       <div class="nbdime-header-buttonrow">
         <label><input class="nbdime-hide-unchanged" type="checkbox">Hide unchanged cells</label>
         <button class="nbdime-export" style="display: none">Export diff</button>
       </div>
-      <div class=nbdime-header-banner>
-        <span class="nbdime-header-base">${baseLabel}</span>
-        <span class="nbdime-header-remote">${remoteLabel}</span>
+      <div class=jp-git-diff-banner>
+        <span>${baseLabel}</span>
+        <span>${remoteLabel}</span>
       </div>`;
 
     return new Widget({ node });

diff --git a/src/components/diff/plaintext.ts b/src/components/diff/plaintext.ts
@@ -9,7 +9,12 @@ import { CommentThread } from './CommentThread';
 
 export class PlainTextDiff extends Widget {
   constructor(props: IDiffOptions) {
-    super({ node: PlainTextDiff.createNode() });
+    super({
+      node: PlainTextDiff.createNode(
+        props.diff.base.label,
+        props.diff.head.label
+      )
+    });
     this._props = props;
   }
 
@@ -36,8 +41,16 @@ export class PlainTextDiff extends Widget {
   /**
    * Create wrapper node
    */
-  protected static createNode(): HTMLElement {
+  protected static createNode(
+    baseLabel: string,
+    remoteLabel: string
+  ): HTMLElement {
     const head = generateNode('div', { class: 'jp-git-diff-root' });
+    head.innerHTML = `
+    <div class=jp-git-diff-banner>
+      <span>${baseLabel}</span>
+      <span>${remoteLabel}</span>
+    </div>`;
     head.appendChild(
       generateNode('div', {
         class: 'jp-git-PlainText-diff jp-PullRequestTextDiff'
@@ -104,8 +117,8 @@ export class PlainTextDiff extends Widget {
         'jp-git-PlainText-diff'
       )[0] as HTMLElement,
       {
-        value: props.content.headContent,
-        orig: props.content.baseContent,
+        value: props.diff.head.content,
+        orig: props.diff.base.content,
         gutters: [
           'CodeMirror-linenumbers',
           // FIXME without this - the comment decoration does not show up

diff --git a/src/components/tab/PullRequestFileTab.tsx b/src/components/tab/PullRequestFileTab.tsx
@@ -2,7 +2,7 @@ import { Spinner } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Panel } from '@lumino/widgets';
-import { IFileContent, IThread } from '../../tokens';
+import { IFileDiff, IThread } from '../../tokens';
 import { requestAPI } from '../../utils';
 import { NotebookDiff } from '../diff/notebook';
 import { PlainTextDiff } from '../diff/plaintext';
@@ -47,9 +47,9 @@ export class FileDiffWidget extends Panel {
   protected async loadDiff(
     prId: string,
     filename: string
-  ): Promise<[IFileContent, IThread[]]> {
+  ): Promise<[IFileDiff, IThread[]]> {
     return Promise.all([
-      requestAPI<IFileContent>(
+      requestAPI<IFileDiff>(
         `pullrequests/files/content?id=${encodeURIComponent(
           prId
         )}&filename=${encodeURIComponent(filename)}`,
@@ -67,7 +67,7 @@ export class FileDiffWidget extends Panel {
   protected showDiff(
     prId: string,
     filename: string,
-    content: IFileContent,
+    content: IFileDiff,
     threads: IThread[],
     renderMime: IRenderMimeRegistry
   ): void {
@@ -77,7 +77,7 @@ export class FileDiffWidget extends Panel {
         new NotebookDiff({
           prId,
           filename,
-          content,
+          diff: content,
           threads,
           renderMime
         })
@@ -88,7 +88,7 @@ export class FileDiffWidget extends Panel {
           new PlainTextDiff({
             prId,
             filename,
-            content,
+            diff: content,
             threads,
             renderMime
           })

diff --git a/src/tokens.ts b/src/tokens.ts
@@ -24,9 +24,15 @@ export interface IFile {
   status: string;
 }
 
-export interface IFileContent {
-  baseContent: string;
-  headContent: string;
+export interface IDiffContent {
+  label: string;
+  sha: string;
+  content: string;
+}
+
+export interface IFileDiff {
+  base: IDiffContent;
+  head: IDiffContent;
 }
 
 export interface IComment {
@@ -97,7 +103,7 @@ export interface INotebookMapping {
 export interface IDiffOptions {
   prId: string;
   filename: string;
-  content: IFileContent;
+  diff: IFileDiff;
   threads: IThread[];
 
   /**

diff --git a/style/index.css b/style/index.css
@@ -338,6 +338,11 @@ p.jp-PullRequestCommentItemContentTitle {
 }
 
 /* Notebook diff styles */
+.nbdime-Diff .jp-git-diff-banner {
+  width: calc(100% - 52px);
+  margin: 0px 8px;
+}
+
 .jp-PullRequestCellDiff {
   overflow: visible;
   margin: 5px 0px;
@@ -416,3 +421,22 @@ p.jp-PullRequestCommentItemContentTitle {
 .jp-PullRequestCommentDecoration:hover {
   transform: scale(1.2);
 }
+
+.jp-git-diff-banner {
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.jp-git-diff-banner span {
+  margin: 0px 4px;
+  padding: 0px 4px;
+  width: 50%;font-weight: bold;
+}
+
+.jp-git-diff-banner span:first-of-type {
+  background-color: var(--jp-git-diff-deleted-color);
+}
+
+.jp-git-diff-banner span:last-of-type {
+  background-color: var(--jp-git-diff-added-color);
+}