Merge pull request #599 from btel/jlab-2.0-rebased

compatibility with jupyterlab >= 2.0

Author: lresende

.travis.yml

@@ -7,7 +7,7 @@ cache:
     - /home/travis/.yarn-cache/
 before_install:
   - nvm install 10
-install: pip install pytest pytest-asyncio "jupyterlab~=1.1"
+install: pip install --upgrade --upgrade-strategy=eager pytest pytest-asyncio "jupyterlab~=2.0"
 script:
   # Build the sdist (identical to what will be uploaded to eg pypi on release)
   - python setup.py sdist

package.json

@@ -49,30 +49,33 @@
     "schemaDir": "schema"
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.1.0",
-    "@jupyterlab/apputils": "^1.1.0",
-    "@jupyterlab/codemirror": "^1.1.0",
-    "@jupyterlab/console": "^1.1.0",
-    "@jupyterlab/coreutils": "^3.1.0",
-    "@jupyterlab/filebrowser": "^1.1.0",
-    "@jupyterlab/mainmenu": "^1.1.0",
-    "@jupyterlab/services": "^4.1.0",
-    "@jupyterlab/terminal": "^1.1.0",
-    "@jupyterlab/ui-components": "^1.1.0",
+    "@jupyterlab/application": "^2.0.0",
+    "@jupyterlab/apputils": "^2.0.0",
+    "@jupyterlab/codemirror": "^2.0.0",
+    "@jupyterlab/console": "^2.0.0",
+    "@jupyterlab/coreutils": "^4.0.0",
+    "@jupyterlab/filebrowser": "^2.0.0",
+    "@jupyterlab/mainmenu": "^2.0.0",
+    "@jupyterlab/nbformat": "^2.0.0",
+    "@jupyterlab/services": "^5.0.0",
+    "@jupyterlab/settingregistry": "^2.0.0",
+    "@jupyterlab/terminal": "^2.0.0",
+    "@jupyterlab/ui-components": "^2.0.0",
+    "@lumino/polling": "^1.0.4",
+    "@lumino/widgets": "^1.11.1",
     "@material-ui/core": "^4.8.2",
     "@material-ui/icons": "^4.5.1",
-    "@phosphor/widgets": "^1.8.0",
     "diff-match-patch": "^1.0.4",
-    "nbdime": "~5.0.1",
-    "react": "~16.8.4",
-    "react-dom": "~16.8.4",
+    "nbdime": "^6.0.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
     "react-textarea-autosize": "^7.1.2",
     "typestyle": "^2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",
     "@babel/preset-env": "^7.5.0",
-    "@jupyterlab/testutils": "^1.1.0",
+    "@jupyterlab/testutils": "^2.0.0",
     "@types/codemirror": "^0.0.79",
     "@types/diff-match-patch": "^1.0.32",
     "@types/enzyme": "3.1.15",
@@ -96,7 +99,7 @@
     "tslint": "^5.11.0",
     "tslint-config-prettier": "1.18.0",
     "tslint-plugin-prettier": "^2.0.0",
-    "typescript": "~3.5.1",
+    "typescript": "~3.7.1",
     "typescript-tslint-plugin": "^0.5.4"
   },
   "peerDependencies": {

setup.py

@@ -71,14 +71,14 @@ def runPackLabextension():
     ],
     install_requires = [
         'notebook',
-        'nbdime >= 1.1.0, < 2.0.0',
+        'nbdime ~=2.0',
         'pexpect'
     ],
     extras_require = {
         'test': [
             'pytest',
             'pytest-asyncio',
-            'jupyterlab~=1.1',
+            'jupyterlab~=2.0',
         ],
     },
 )

src/components/ActionButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DefaultIconReact } from '@jupyterlab/ui-components';
 import { classes } from 'typestyle';
+import { LabIcon } from '@jupyterlab/ui-components';
 import { actionButtonStyle } from '../style/ActionButtonStyle';
 
 /**
@@ -44,7 +44,7 @@ export const ActionButton: React.FunctionComponent<IActionButtonProps> = (
       title={props.title}
       onClick={props.onClick}
     >
-      <DefaultIconReact tag="span" name={props.iconName} />
+      <LabIcon.resolveReact icon={props.iconName} />
     </button>
   );
 };

src/components/FileList.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
-import { ISettingRegistry } from '@jupyterlab/coreutils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { Menu } from '@phosphor/widgets';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { Menu } from '@lumino/widgets';
 import { GitExtension } from '../model';
 import { hiddenButtonStyle } from '../style/ActionButtonStyle';
 import { fileListWrapperClass } from '../style/FileListStyle';

src/components/GitPanel.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import { showErrorMessage, showDialog } from '@jupyterlab/apputils';
-import { ISettingRegistry } from '@jupyterlab/coreutils';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { JSONObject } from '@phosphor/coreutils';
+import { JSONObject } from '@lumino/coreutils';
 import { GitExtension } from '../model';
 import {
   panelWrapperClass,

src/components/SinglePastCommitInfo.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { DefaultIconReact } from '@jupyterlab/ui-components';
-import { classes } from 'typestyle';
+import { fileIcon } from '@jupyterlab/ui-components';
+import { insertionsMadeIcon, deletionsMadeIcon } from '../style/icons';
+import { classes } from 'typestyle/';
 import { GitExtension } from '../model';
 import { Git } from '../tokens';
 import {
@@ -159,21 +160,27 @@ export class SinglePastCommitInfo extends React.Component<
       <div>
         <div className={commitClass}>
           <div className={commitOverviewNumbersClass}>
-            <span title="# Files Changed">
-              <DefaultIconReact name="file" className={iconClass} />
+            <span>
+              <fileIcon.react
+                className={iconClass}
+                tag="span"
+                title="# Files Changed"
+              />
               {this.state.numFiles}
             </span>
-            <span title="# Insertions">
-              <DefaultIconReact
-                name="git-insertionsMade"
+            <span>
+              <insertionsMadeIcon.react
                 className={classes(iconClass, insertionsIconClass)}
+                tag="div"
+                title="# Insertions"
               />
               {this.state.insertions}
             </span>
-            <span title="# Deletions">
-              <DefaultIconReact
-                name="git-deletionsMade"
+            <span>
+              <deletionsMadeIcon.react
                 className={classes(iconClass, deletionsIconClass)}
+                tag="div"
+                title="# Deletions"
               />
               {this.state.deletions}
             </span>

src/components/diff/NbDiff.tsx

@@ -1,4 +1,5 @@
-import { nbformat, PathExt } from '@jupyterlab/coreutils';
+import { PathExt } from '@jupyterlab/coreutils';
+import * as nbformat from '@jupyterlab/nbformat';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ServerConnection } from '@jupyterlab/services/lib/serverconnection';
 import { IDiffEntry } from 'nbdime/lib/diff/diffentries';

src/gitMenuCommands.ts

@@ -6,8 +6,8 @@ import {
   showDialog,
   showErrorMessage
 } from '@jupyterlab/apputils';
-import { ISettingRegistry } from '@jupyterlab/coreutils';
 import { FileBrowser } from '@jupyterlab/filebrowser';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITerminal } from '@jupyterlab/terminal';
 import { IGitExtension } from './tokens';
 import { doGitClone } from './widgets/gitClone';

src/index.ts

@@ -3,22 +3,22 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-import { IChangedArgs, ISettingRegistry } from '@jupyterlab/coreutils';
+import { IChangedArgs } from '@jupyterlab/coreutils';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import {
   FileBrowser,
   FileBrowserModel,
   IFileBrowserFactory
 } from '@jupyterlab/filebrowser';
 import { IMainMenu } from '@jupyterlab/mainmenu';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
-import { Menu } from '@phosphor/widgets';
+import { Menu } from '@lumino/widgets';
 import { addCommands, CommandIDs } from './gitMenuCommands';
 import { GitExtension } from './model';
-import { registerGitIcons } from './style/icons';
 import { IGitExtension } from './tokens';
 import { addCloneButton } from './widgets/gitClone';
 import { GitWidget } from './widgets/GitWidget';
+import { gitIcon } from './style/icons';
 
 export { Git, IGitExtension } from './tokens';
 
@@ -68,9 +68,6 @@ async function activate(
 ): Promise<IGitExtension> {
   let settings: ISettingRegistry.ISettings;
 
-  // Register Git icons with the icon registry
-  registerGitIcons(defaultIconRegistry);
-
   // Get a reference to the default file browser extension
   const filebrowser = factory.defaultBrowser;
 
@@ -102,7 +99,7 @@ async function activate(
     // Create the Git widget sidebar
     const gitPlugin = new GitWidget(gitExtension, settings, renderMime);
     gitPlugin.id = 'jp-git-sessions';
-    gitPlugin.title.iconClass = 'jp-SideBar-tabIcon jp-GitIcon';
+    gitPlugin.title.icon = gitIcon;
     gitPlugin.title.caption = 'Git';
 
     // Let the application restorer track the running panel for restoration of

src/model.ts

@@ -1,14 +1,11 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import {
-  IChangedArgs,
-  PathExt,
-  Poll,
-  ISettingRegistry
-} from '@jupyterlab/coreutils';
+import { IChangedArgs, PathExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
-import { CommandRegistry } from '@phosphor/commands';
-import { JSONObject } from '@phosphor/coreutils';
-import { ISignal, Signal } from '@phosphor/signaling';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { CommandRegistry } from '@lumino/commands';
+import { JSONObject } from '@lumino/coreutils';
+import { Poll } from '@lumino/polling';
+import { ISignal, Signal } from '@lumino/signaling';
 import { httpGitRequest } from './git';
 import { IGitExtension, Git } from './tokens';
 import { decodeStage } from './utils';

src/style/GitStageStyle.ts

@@ -54,7 +54,7 @@ export const changeStageButtonStyle = style({
   backgroundColor: 'transparent',
   backgroundPosition: 'center',
   backgroundRepeat: 'no-repeat',
-  backgroundSize: '14px',
+  backgroundSize: '20px',
   transition: 'background-color 0.1s ease',
   height: '13px',
   width: '12px',
@@ -63,9 +63,9 @@ export const changeStageButtonStyle = style({
 });
 
 export const caretdownImageStyle = style({
-  backgroundImage: 'var(--jp-image-caretdown)'
+  backgroundImage: 'var(--jp-icon-caret-down)'
 });
 
 export const caretrightImageStyle = style({
-  backgroundImage: 'var(--jp-image-caretright)'
+  backgroundImage: 'var(--jp-icon-caret-right)'
 });

src/style/PastCommitNode.ts

@@ -77,14 +77,14 @@ export const iconButtonClass = style({
 });
 
 export const expandIconButtonClass = style({
-  backgroundImage: 'var(--jp-icon-caretdown)',
+  backgroundImage: 'var(--jp-icon-caret-down)',
   backgroundSize: '20px',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center'
 });
 
 export const collapseIconButtonClass = style({
-  backgroundImage: 'var(--jp-icon-caretup)',
+  backgroundImage: 'var(--jp-icon-caret-up)',
   backgroundSize: '20px',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center'

src/style/Toolbar.ts

@@ -153,14 +153,14 @@ export const branchIconClass = style({
 });
 
 export const openMenuIconClass = style({
-  backgroundImage: 'var(--jp-icon-caretdown)',
+  backgroundImage: 'var(--jp-icon-caret-down)',
   backgroundSize: '20px',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center'
 });
 
 export const closeMenuIconClass = style({
-  backgroundImage: 'var(--jp-icon-caretup)',
+  backgroundImage: 'var(--jp-icon-caret-up)',
   backgroundSize: '20px',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center'

src/style/icons.ts

@@ -1,4 +1,4 @@
-import { IIconRegistry } from '@jupyterlab/ui-components';
+import { LabIcon } from '@jupyterlab/ui-components';
 
 // icon svg import statements
 import gitSvg from '../../style/images/git-icon.svg';
@@ -10,39 +10,33 @@ import addSvg from '../../style/images/move-file-up.svg';
 import removeSvg from '../../style/images/move-file-down.svg';
 import rewindSvg from '../../style/images/rewind.svg';
 
-export function registerGitIcons(iconRegistry: IIconRegistry) {
-  iconRegistry.addIcon(
-    {
-      name: 'git',
-      svg: gitSvg
-    },
-    {
-      name: 'git-add',
-      svg: addSvg
-    },
-    {
-      name: 'git-deletionsMade',
-      svg: deletionsMadeSvg
-    },
-    {
-      name: 'git-diff',
-      svg: diffSvg
-    },
-    {
-      name: 'git-discard',
-      svg: discardSvg
-    },
-    {
-      name: 'git-insertionsMade',
-      svg: insertionsMadeSvg
-    },
-    {
-      name: 'git-remove',
-      svg: removeSvg
-    },
-    {
-      name: 'git-rewind',
-      svg: rewindSvg
-    }
-  );
-}
+export const gitIcon = new LabIcon({ name: 'git', svgstr: gitSvg });
+export const deletionsMadeIcon = new LabIcon({
+  name: 'git-deletionsMade',
+  svgstr: deletionsMadeSvg
+});
+export const insertionsMadeIcon = new LabIcon({
+  name: 'git-insertionsMade',
+  svgstr: insertionsMadeSvg
+});
+export const addIcon = new LabIcon({
+  name: 'git-add',
+  svgstr: addSvg
+});
+
+export const diffIcon = new LabIcon({
+  name: 'git-diff',
+  svgstr: diffSvg
+});
+export const discardIcon = new LabIcon({
+  name: 'git-discard',
+  svgstr: discardSvg
+});
+export const removeIcon = new LabIcon({
+  name: 'git-remove',
+  svgstr: removeSvg
+});
+export const rewindIcon = new LabIcon({
+  name: 'git-rewind',
+  svgstr: rewindSvg
+});

src/tokens.ts

@@ -1,7 +1,7 @@
 import { IChangedArgs } from '@jupyterlab/coreutils';
-import { Token, JSONObject } from '@phosphor/coreutils';
-import { IDisposable } from '@phosphor/disposable';
-import { ISignal } from '@phosphor/signaling';
+import { Token, JSONObject } from '@lumino/coreutils';
+import { IDisposable } from '@lumino/disposable';
+import { ISignal } from '@lumino/signaling';
 
 export const EXTENSION_ID = 'jupyter.extensions.git_plugin';