jupyterlab · timnlupo · Aug 3, 2019
diff --git a/.gitignore b/.gitignore
@@ -105,3 +105,5 @@ node_modules/
 .vscode/
 
 package-lock.json
+
+.DS_Store
diff --git a/jest.config.js b/jest.config.js
@@ -11,7 +11,8 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/(?!(@jupyterlab/.*)/)'],
   globals: {
     'ts-jest': {
-      tsConfig: 'tsconfig.json'
+      tsConfig: 'tsconfig.json',
+      diagnostics: false
     }
   }
 };
diff --git a/jupyterlab_git/git.py b/jupyterlab_git/git.py
@@ -728,3 +728,53 @@ def _get_tag(self, current_path, commit_sha):
                 )
             )
 
+    def show(self, filename, ref, top_repo_path):
+        """
+        Execute git show<ref:filename> command & return the result.
+        """
+        command = ["git", "show", f'{ref}:{filename}']
+        p = subprocess.Popen(
+            command,
+            stdout=PIPE,
+            stderr=PIPE,
+            cwd=top_repo_path
+        )
+        output, error = p.communicate()
+        if p.returncode == 0:
+            return output.decode('utf-8')
+        elif "fatal: Path '{}' exists on disk, but not in '{}'".format(filename, ref) in error.decode('utf-8'):
+            return ""
+        elif "fatal: Path '{}' does not exist (neither on disk nor in the index)".format(filename) in error.decode('utf-8'):
+            return ""
+        else:
+            raise Exception('Error [{}] occurred while executing [{}] command to retrieve plaintext diff.'.format(
+                error.decode('utf-8'),
+                ' '.join(command)
+            ))
+
+    def less(self, filename, top_repo_path):
+        """
+        Execute less -FX <filename> command & return the result.
+        """
+        my_output = subprocess.check_output(
+            ["less", "-FX", filename], cwd=top_repo_path)
+        return my_output.decode('utf-8')
+
+    def diff_content(self, filename, prev_ref, curr_ref, top_repo_path):
+        """
+        Collect get content of prev and curr and return.
+        """
+        try:
+            prev_content = self.show(filename, prev_ref["git"], top_repo_path)
+            if "special" in curr_ref:
+                if curr_ref["special"] == "WORKING":
+                    curr_content = self.less(filename, top_repo_path)
+                elif curr_ref["special"] == "INDEX":
+                    curr_content = self.show(filename, "", top_repo_path)
+                else:
+                    raise Exception("Error while retrieving plaintext diff, unknown special ref '{}'.".format(curr_ref["specialref"]))
+            else:
+                curr_content = self.show(filename, curr_ref["git"], top_repo_path)
+            return {"prev_content": prev_content, "curr_content": curr_content}
+        except:
+            raise 
diff --git a/jupyterlab_git/handlers.py b/jupyterlab_git/handlers.py
@@ -442,6 +442,25 @@ def post(self):
             self.set_status(201)
         self.finish(json.dumps(response))
 
+class GitDiffContentHandler(GitHandler):
+    """
+    Handler for plain text diffs. Uses git show $REF:$FILE
+    Returns `prev_content` and `curr_content` with content of given file.
+    """
+
+    def post(self):
+        data = self.get_json_body()
+        filename = data["filename"]
+        prev_ref = data["prev_ref"]
+        curr_ref = data["curr_ref"]
+        top_repo_path = data["top_repo_path"]
+        response = self.git.diff_content(filename, prev_ref, curr_ref, top_repo_path)
+        self.finish(
+            json.dumps(
+                response
+            )
+        )
+
 
 def setup_handlers(web_app):
     """
@@ -471,7 +490,8 @@ def setup_handlers(web_app):
         ("/git/clone", GitCloneHandler),
         ("/git/upstream", GitUpstreamHandler),
         ("/git/config", GitConfigHandler),
-        ("/git/changed_files", GitChangedFilesHandler)
+        ("/git/changed_files", GitChangedFilesHandler),
+        ("/git/diffcontent", GitDiffContentHandler)
     ]
 
     # add the baseurl to our paths

diff --git a/package.json b/package.json
@@ -12,10 +12,10 @@
     "jupyterlab-extension"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "webpack && tsc",
     "clean": "rimraf lib",
     "prepublish": "npm run build",
-    "watch": "tsc -w",
+    "watch": "webpack && tsc -w",
     "test": "jest",
     "lint": "tslint --project .",
     "tslint-check": "tslint-config-prettier-check ./tslint.json"
@@ -48,6 +48,7 @@
     "@jupyterlab/services": "^4.0.0",
     "@jupyterlab/terminal": "^1.0.0",
     "@phosphor/widgets": "^1.8.0",
+    "monaco-editor": "^0.17.1",
     "nbdime": "~5.0.1",
     "react": "~16.8.4",
     "react-dom": "~16.8.4",
@@ -56,10 +57,12 @@
   "devDependencies": {
     "@babel/core": "^7.5.0",
     "@babel/preset-env": "^7.5.0",
+    "@types/d3-color": "^1.2.2",
     "@types/enzyme": "3.1.15",
     "@types/jest": "^24",
     "@types/react": "~16.8.13",
     "@types/react-dom": "~16.0.5",
+    "d3-color": "^1.3.0",
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.7.0",
     "husky": "1.3.1",
@@ -75,7 +78,8 @@
     "tslint-config-prettier": "1.18.0",
     "tslint-plugin-prettier": "^2.0.0",
     "typescript": "~3.5.1",
-    "typescript-tslint-plugin": "0.3.1"
+    "webpack": "^4.39.1",
+    "webpack-cli": "^3.3.6"
   },
   "directories": {
     "lib": "lib"

diff --git a/src/components/FileItem.tsx b/src/components/FileItem.tsx
@@ -28,7 +28,7 @@ import { classes } from 'typestyle';
 
 import * as React from 'react';
 
-import { showDialog, Dialog } from '@jupyterlab/apputils';
+import { showDialog, Dialog, IThemeManager } from '@jupyterlab/apputils';
 import { ISpecialRef } from './diff/model';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { isDiffSupported } from './diff/Diff';
@@ -60,6 +60,7 @@ export interface IFileItemProps {
   toggleDisableFiles: Function;
   sideBarExpanded: boolean;
   renderMime: IRenderMimeRegistry;
+  themeManager: IThemeManager;
 }
 
 export class FileItem extends React.Component<IFileItemProps, {}> {
@@ -328,12 +329,14 @@ export class FileItem extends React.Component<IFileItemProps, {}> {
         onClick={() => {
           openDiffView(
             this.props.file.to,
+            this.props.topRepoPath,
             this.props.app,
             {
               previousRef: { gitRef: 'HEAD' },
               currentRef: { specialRef: currentRef.specialRef }
             },
-            this.props.renderMime
+            this.props.renderMime,
+            this.props.themeManager
           );
         }}
       />

diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
@@ -1,4 +1,4 @@
-import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { Dialog, showDialog, IThemeManager } from '@jupyterlab/apputils';
 
 import { JupyterFrontEnd } from '@jupyterlab/application';
 
@@ -79,6 +79,7 @@ export interface IFileListProps {
   sideBarExpanded: boolean;
   display: boolean;
   renderMime: IRenderMimeRegistry;
+  themeManager: IThemeManager;
 }
 
 export class FileList extends React.Component<IFileListProps, IFileListState> {
@@ -132,12 +133,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
         execute: () => {
           openDiffView(
             this.state.contextMenuFile,
+            this.props.topRepoPath,
             this.props.app,
             {
               currentRef: { specialRef: 'WORKING' },
               previousRef: { gitRef: 'HEAD' }
             },
-            this.props.renderMime
+            this.props.renderMime,
+            this.props.themeManager
           );
         }
       });
@@ -150,12 +153,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
         execute: () => {
           openDiffView(
             this.state.contextMenuFile,
+            this.props.topRepoPath,
             this.props.app,
             {
               currentRef: { specialRef: 'INDEX' },
               previousRef: { gitRef: 'HEAD' }
             },
-            this.props.renderMime
+            this.props.renderMime,
+            this.props.themeManager
           );
         }
       });
@@ -531,6 +536,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
               isDisabled={this.state.disableStaged}
               sideBarExpanded={this.props.sideBarExpanded}
               renderMime={this.props.renderMime}
+              themeManager={this.props.themeManager}
             />
             <GitStage
               heading={'Changed'}
@@ -565,6 +571,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
               isDisabled={this.state.disableUnstaged}
               sideBarExpanded={this.props.sideBarExpanded}
               renderMime={this.props.renderMime}
+              themeManager={this.props.themeManager}
             />
             <GitStage
               heading={'Untracked'}
@@ -599,6 +606,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
               isDisabled={this.state.disableUntracked}
               sideBarExpanded={this.props.sideBarExpanded}
               renderMime={this.props.renderMime}
+              themeManager={this.props.themeManager}
             />
           </div>
         )}

diff --git a/src/components/GitPanel.tsx b/src/components/GitPanel.tsx
@@ -28,6 +28,7 @@ import {
   findRepoButtonStyle
 } from '../componentsStyle/GitPanelStyle';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IThemeManager } from '@jupyterlab/apputils';
 
 /** Interface for GitPanel component state */
 export interface IGitSessionNodeState {
@@ -56,6 +57,7 @@ export interface IGitSessionNodeProps {
   app: JupyterFrontEnd;
   diff: IDiffCallback;
   renderMime: IRenderMimeRegistry;
+  themeManager: IThemeManager;
 }
 
 /** A React component for the git extension's main display */
@@ -241,6 +243,7 @@ export class GitPanel extends React.Component<
             refresh={this.refresh}
             diff={this.props.diff}
             renderMime={this.props.renderMime}
+            themeManager={this.props.themeManager}
           />
           <PastCommits
             currentFileBrowserPath={this.state.currentFileBrowserPath}
@@ -255,6 +258,7 @@ export class GitPanel extends React.Component<
             diff={this.props.diff}
             sideBarExpanded={this.state.sideBarExpanded}
             renderMime={this.props.renderMime}
+            themeManager={this.props.themeManager}
           />
         </div>
       );

diff --git a/src/components/GitStage.tsx b/src/components/GitStage.tsx
@@ -20,7 +20,7 @@ import { classes } from 'typestyle';
 
 import * as React from 'react';
 
-import { showDialog, Dialog } from '@jupyterlab/apputils';
+import { showDialog, Dialog, IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 export interface IGitStageProps {
@@ -56,6 +56,7 @@ export interface IGitStageProps {
   disableOthers: Function;
   sideBarExpanded: boolean;
   renderMime: IRenderMimeRegistry;
+  themeManager: IThemeManager;
 }
 
 export interface IGitStageState {
@@ -190,6 +191,7 @@ export class GitStage extends React.Component<IGitStageProps, IGitStageState> {
                     toggleDisableFiles={this.props.toggleDisableFiles}
                     sideBarExpanded={this.props.sideBarExpanded}
                     renderMime={this.props.renderMime}
+                    themeManager={this.props.themeManager}
                   />
                 );
               }

diff --git a/src/components/GitWidget.tsx b/src/components/GitWidget.tsx
@@ -19,6 +19,7 @@ import { gitWidgetStyle } from '../componentsStyle/GitWidgetStyle';
 import { IDiffCallback } from '../git';
 
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IThemeManager } from '@jupyterlab/apputils';
 /**
  * An options object for creating a running sessions widget.
  */
@@ -71,14 +72,20 @@ export class GitWidget extends Widget {
     app: JupyterFrontEnd,
     options: IOptions,
     diffFunction: IDiffCallback,
-    renderMime: IRenderMimeRegistry
+    renderMime: IRenderMimeRegistry,
+    themeManager: IThemeManager
   ) {
     super({
       node: (options.renderer || defaultRenderer).createNode()
     });
     this.addClass(gitWidgetStyle);
     const element = (
-      <GitPanel app={app} diff={diffFunction} renderMime={renderMime} />
+      <GitPanel
+        app={app}
+        diff={diffFunction}
+        renderMime={renderMime}
+        themeManager={themeManager}
+      />
     );
     this.component = ReactDOM.render(element, this.node);
     this.component.refresh();

diff --git a/src/components/HistorySideBar.tsx b/src/components/HistorySideBar.tsx
@@ -4,6 +4,7 @@ import { historySideBarStyle } from '../componentsStyle/HistorySideBarStyle';
 import { IGitBranchResult, ISingleCommitInfo, IDiffCallback } from '../git';
 import { PastCommitNode } from './PastCommitNode';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IThemeManager } from '@jupyterlab/apputils';
 
 /** Interface for PastCommits component props */
 export interface IHistorySideBarProps {
@@ -15,6 +16,7 @@ export interface IHistorySideBarProps {
   refresh: () => void;
   diff: IDiffCallback;
   renderMime: IRenderMimeRegistry;
+  themeManager: IThemeManager;
 }
 
 export class HistorySideBar extends React.Component<IHistorySideBarProps, {}> {
@@ -35,6 +37,7 @@ export class HistorySideBar extends React.Component<IHistorySideBarProps, {}> {
               refresh={this.props.refresh}
               diff={this.props.diff}
               renderMime={this.props.renderMime}
+              themeManager={this.props.themeManager}
             />
           )
         )}

diff --git a/src/components/PastCommitNode.tsx b/src/components/PastCommitNode.tsx
@@ -17,6 +17,7 @@ import {
 import { IGitBranchResult, ISingleCommitInfo, IDiffCallback } from '../git';
 import { SinglePastCommitInfo } from './SinglePastCommitInfo';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IThemeManager } from '@jupyterlab/apputils';
 
 export interface IPastCommitNodeProps {
   pastCommit: ISingleCommitInfo;
@@ -26,6 +27,7 @@ export interface IPastCommitNodeProps {
   diff: IDiffCallback;
   refresh: () => void;
   renderMime: IRenderMimeRegistry;
+  themeManager: IThemeManager;
 }
 
 export interface IPastCommitNodeState {
@@ -118,6 +120,7 @@ export class PastCommitNode extends React.Component<
                 diff={this.props.diff}
                 refresh={this.props.refresh}
                 renderMime={this.props.renderMime}
+                themeManager={this.props.themeManager}
               />
               <div className={collapseStyle} onClick={() => this.collapse()}>
                 Collapse
Original file line number	Diff line number	Diff line change
Expand Up		@@ -105,3 +105,5 @@ node_modules/
		.vscode/

		package-lock.json

		.DS_Store