Merge with master

.github/issue_template.md

@@ -8,6 +8,7 @@ Welcome! Before creating a new issue:
 * Look at the README *Troubleshooting* section
 * Search for relevant issues
 * Check that you have updated both the jupyterlab extension and the python package to the same version
+Check that you have installed Git version 2 or higher
 -->
 
 ## Description
@@ -35,6 +36,9 @@ Welcome! Before creating a new issue:
 <!-- Results of `conda list jupyterlab-git` or `pip show jupyterlab-git` -->
 - Extension version:
 <!-- Results of `jupyter labextension list` -->
+- Git version:
+<!-- Results of `git --version` -->
+- Operating System and its version:
 
 <details><summary>Command Line Output</summary>
 <pre>

README.md

@@ -108,9 +108,9 @@ cd jupyterlab-git
 pip install -e .[test]
 jupyter serverextension enable --py jupyterlab_git --sys-prefix
 
-# Build the labextension and dev-mode link it to jlab
+# Build and install your development version of the extension
 jlpm
-jupyter labextension link .
+jupyter labextension install .
 ```
 
 To rebuild the package after a change and the JupyterLab app:

binder/environment.yml

@@ -3,4 +3,5 @@ channels:
 dependencies:
 # Jupyter
 - jupyterlab~=2.0
-- nodejs>=11
+- nodejs>=12
+- nbgitpuller

binder/postBuild

@@ -1,2 +1,4 @@
+#!/usr/bin/env bash
 pip install .
-jupyter lab build
+jupyter serverextension enable --sys-prefix --py nbgitpuller
+jupyter lab build

src/components/ActionButton.tsx

@@ -1,6 +1,6 @@
+import { LabIcon } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { classes } from 'typestyle';
-import { LabIcon } from '@jupyterlab/ui-components';
 import { actionButtonStyle } from '../style/ActionButtonStyle';
 
 /**
@@ -16,9 +16,9 @@ export interface IActionButtonProps {
    */
   disabled?: boolean;
   /**
-   * Icon name
+   * Icon
    */
-  iconName: string;
+  icon: LabIcon;
   /**
    * Button title
    */
@@ -37,14 +37,15 @@ export interface IActionButtonProps {
 export const ActionButton: React.FunctionComponent<IActionButtonProps> = (
   props: IActionButtonProps
 ) => {
+  const { disabled, className, title, onClick, icon } = props;
   return (
     <button
-      disabled={props.disabled}
-      className={classes(actionButtonStyle, props.className)}
-      title={props.title}
-      onClick={props.onClick}
+      disabled={disabled}
+      className={classes(actionButtonStyle, className)}
+      title={title}
+      onClick={onClick}
     >
-      <LabIcon.resolveReact icon={props.iconName} />
+      <icon.react elementPosition="center" tag="span" />
     </button>
   );
 };

src/components/BranchMenu.tsx

@@ -1,11 +1,9 @@
-import * as React from 'react';
-import { classes } from 'typestyle';
+import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ClearIcon from '@material-ui/icons/Clear';
-import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
-import { sleep } from '../utils';
-import { Git, IGitExtension, ILogMessage } from '../tokens';
+import * as React from 'react';
+import { classes } from 'typestyle';
 import {
   activeListItemClass,
   filterClass,
@@ -18,9 +16,11 @@ import {
   newBranchButtonClass,
   wrapperClass
 } from '../style/BranchMenu';
+import { Git, IGitExtension, ILogMessage } from '../tokens';
+import { sleep } from '../utils';
+import { Alert } from './Alert';
 import { NewBranchDialog } from './NewBranchDialog';
 import { SuspendModal } from './SuspendModal';
-import { Alert } from './Alert';
 
 const CHANGES_ERR_MSG =
   'The current branch contains files with uncommitted changes. Please commit or discard these changes before switching to or creating another branch.';
@@ -268,18 +268,25 @@ export class BranchMenu extends React.Component<
     if (this.state.filter && !branch.name.includes(this.state.filter)) {
       return null;
     }
+    const isActive = branch.name === this.state.current;
     return (
       <ListItem
         button
         title={`Switch to branch: ${branch.name}`}
         className={classes(
           listItemClass,
-          branch.name === this.state.current ? activeListItemClass : null
+          isActive ? activeListItemClass : null
         )}
         key={branch.name}
         onClick={this._onBranchClickFactory(branch.name)}
       >
-        <span className={listItemIconClass} />
+        <span
+          className={classes(
+            'jp-git-icon',
+            listItemIconClass,
+            isActive && 'jp-git-selected'
+          )}
+        />
         {branch.name}
       </ListItem>
     );

src/components/CommitBox.tsx

@@ -68,6 +68,11 @@ export class CommitBox extends React.Component<
    */
   render(): React.ReactElement {
     const disabled = !(this.props.hasFiles && this.state.summary);
+    const title = !this.props.hasFiles
+      ? 'Disabled: No files are staged for commit'
+      : !this.state.summary
+      ? 'Disabled: No commit message summary'
+      : 'Commit';
     return (
       <form className={commitFormClass}>
         <input
@@ -90,7 +95,7 @@ export class CommitBox extends React.Component<
         <input
           className={commitButtonClass}
           type="button"
-          title="Commit"
+          title={title}
           value="Commit"
           disabled={disabled}
           onClick={this._onCommitClick}

src/components/FileItem.tsx

@@ -74,9 +74,9 @@ export class FileItem extends React.Component<IFileItemProps> {
   }
 
   render() {
-    const status =
-      this.getFileChangedLabel(this.props.file.y as any) ||
-      this.getFileChangedLabel(this.props.file.x as any);
+    const { file } = this.props;
+    const status_code = file.status === 'staged' ? file.x : file.y;
+    const status = this.getFileChangedLabel(status_code as any);
 
     return (
       <li
@@ -110,9 +110,7 @@ export class FileItem extends React.Component<IFileItemProps> {
         />
         {this.props.actions}
         <span className={this.getFileChangedLabelClass(this.props.file.y)}>
-          {this.props.file.y === '?'
-            ? 'U'
-            : this.props.file.y.trim() || this.props.file.x}
+          {this.props.file.y === '?' ? 'U' : status_code}
         </span>
       </li>
     );