Remote changes notification

schema/plugin.json

@@ -64,6 +64,12 @@
       "title": "Trigger push on commit",
       "description": "Whether to trigger or not a push for each commit.",
       "default": false
+    },
+    "openFilesBehindWarning": {
+        "type": "boolean",
+        "title": "Open files behind warning",
+        "description": "If true, a popup dialog will be displayed if a user opens a file that is behind the remote branch, or if an open file is updated on the remote branch.",
+        "default": true
     }
   },
   "jupyter.lab.shortcuts": [

src/components/FileItem.tsx

@@ -22,6 +22,7 @@ export const STATUS_CODES = {
   R: 'Renamed',
   C: 'Copied',
   U: 'Updated',
+  B: 'Behind',
   '?': 'Untracked',
   '!': 'Ignored'
 };

src/components/FileList.tsx

@@ -17,7 +17,7 @@ import {
   openIcon,
   removeIcon
 } from '../style/icons';
-import { ContextCommandIDs, Git } from '../tokens';
+import { ContextCommandIDs, CommandIDs, Git } from '../tokens';
 import { ActionButton } from './ActionButton';
 import { FileItem } from './FileItem';
 import { GitStage } from './GitStage';
@@ -58,6 +58,7 @@ export const CONTEXT_COMMANDS: ContextCommands = {
     ContextCommandIDs.gitFileDiff,
     ContextCommandIDs.gitFileHistory
   ],
+  'remote-changed': [ContextCommandIDs.gitFileOpen],
   unstaged: [
     ContextCommandIDs.gitFileOpen,
     ContextCommandIDs.gitFileStage,
@@ -90,6 +91,7 @@ const SIMPLE_CONTEXT_COMMANDS: ContextCommands = {
     ContextCommandIDs.gitFileDiff,
     ContextCommandIDs.gitFileHistory
   ],
+  'remote-changed': [ContextCommandIDs.gitFileOpen],
   staged: [
     ContextCommandIDs.gitFileOpen,
     ContextCommandIDs.gitFileDiscard,
@@ -257,6 +259,10 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     this.setState({ selectedFile: file });
   };
 
+  pullFromRemote = async (event: React.MouseEvent): Promise<void> => {
+    await this.props.commands.execute(CommandIDs.gitPull, {});
+  };
+
   get markedFiles(): Git.IStatusFile[] {
     return this.props.files.filter(file => this.props.model.getMark(file.to));
   }
@@ -277,6 +283,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
       const stagedFiles: Git.IStatusFile[] = [];
       const unstagedFiles: Git.IStatusFile[] = [];
       const untrackedFiles: Git.IStatusFile[] = [];
+      const remoteChangedFiles: Git.IStatusFile[] = [];
       const unmergedFiles: Git.IStatusFile[] = [];
 
       this.props.files.forEach(file => {
@@ -303,6 +310,9 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
           case 'unmerged':
             unmergedFiles.push(file);
             break;
+          case 'remote-changed':
+            remoteChangedFiles.push(file);
+            break;
           default:
             break;
         }
@@ -319,6 +329,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
                 {this._renderUnmerged(unmergedFiles, height)}
                 {this._renderStaged(stagedFiles, height)}
                 {this._renderChanged(unstagedFiles, height)}
+                {this._renderRemoteChanged(remoteChangedFiles, height)}
                 {this._renderUntracked(untrackedFiles, height)}
               </>
             )}
@@ -665,6 +676,82 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     );
   }
 
+  /**
+   * Render the remote changed list.
+   *
+   * Note: This is actually a React.FunctionComponent but defined as
+   * a private method as it needs access to FileList properties.
+   *
+   * @param rowProps Row properties
+   */
+  private _renderRemoteChangedRow = (
+    rowProps: ListChildComponentProps
+  ): JSX.Element => {
+    const doubleClickDiff = this.props.settings.get('doubleClickDiff')
+      .composite as boolean;
+    const { data, index, style } = rowProps;
+    const file = data[index] as Git.IStatusFile;
+    return (
+      <FileItem
+        trans={this.props.trans}
+        actions={
+          <React.Fragment>
+            <ActionButton
+              className={hiddenButtonStyle}
+              icon={openIcon}
+              title={this.props.trans.__('Open this file')}
+              onClick={() => {
+                this.props.commands.execute(ContextCommandIDs.gitFileOpen, {
+                  files: [file]
+                } as CommandArguments.IGitContextAction as any);
+              }}
+            />
+          </React.Fragment>
+        }
+        file={file}
+        contextMenu={this.openContextMenu}
+        model={this.props.model}
+        onDoubleClick={() => {
+          if (!doubleClickDiff) {
+            this.props.commands.execute(ContextCommandIDs.gitFileOpen, {
+              files: [file]
+            } as CommandArguments.IGitContextAction as any);
+          }
+        }}
+        selected={this._isSelectedFile(file)}
+        selectFile={this.updateSelectedFile}
+        style={style}
+      />
+    );
+  };
+
+  /**
+   * Render the a file that has changed on remote to files list.
+   *
+   * @param files Untracked files
+   * @param height Height of the HTML element
+   */
+  private _renderRemoteChanged(files: Git.IStatusFile[], height: number) {
+    return (
+      <GitStage
+        actions={
+          <ActionButton
+            className={hiddenButtonStyle}
+            disabled={files.length === 0}
+            icon={addIcon}
+            title={this.props.trans.__('Pull from remote branch')}
+            onClick={this.pullFromRemote}
+          />
+        }
+        collapsible
+        heading={this.props.trans.__('Remote Changes')}
+        height={height}
+        files={files}
+        rowRenderer={this._renderRemoteChangedRow}
+      />
+    );
+  }
+
   /**
    * Render a modified file in simple mode.
    *

src/components/GitPanel.tsx

@@ -1,4 +1,4 @@
-import { showDialog } from '@jupyterlab/apputils';
+import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
 import { FileBrowserModel } from '@jupyterlab/filebrowser';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
@@ -86,6 +86,8 @@ export interface IGitPanelState {
    */
   files: Git.IStatusFile[];
 
+  remoteChangedFiles: Git.IStatusFile[];
+
   /**
    * Number of commits ahead
    */
@@ -140,6 +142,7 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
       branches: branches,
       currentBranch: currentBranch ? currentBranch.name : 'master',
       files: [],
+      remoteChangedFiles: [],
       nCommitsAhead: 0,
       nCommitsBehind: 0,
       pastCommits: [],
@@ -163,9 +166,11 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
       });
       this.refreshView();
     }, this);
-    model.statusChanged.connect(() => {
+    model.statusChanged.connect(async () => {
+      const remotechangedFiles = await model.remoteChangedFiles();
       this.setState({
         files: model.status.files,
+        remoteChangedFiles: remotechangedFiles,
         nCommitsAhead: model.status.ahead,
         nCommitsBehind: model.status.behind
       });
@@ -181,6 +186,7 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
       this.refreshHistory();
     }, this);
     model.markChanged.connect(() => this.forceUpdate(), this);
+    model.notifyRemoteChanges.connect((_, args) => this.warningDialog(args));
 
     settings.changed.connect(this.refreshView, this);
   }
@@ -651,11 +657,74 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
    * List of sorted modified files.
    */
   private get _sortedFiles(): Git.IStatusFile[] {
-    const { files } = this.state;
-
-    files.sort((a, b) => a.to.localeCompare(b.to));
-    return files;
+    const { files, remoteChangedFiles } = this.state;
+    const sfiles = files.concat(remoteChangedFiles);
+    sfiles.sort((a, b) => a.to.localeCompare(b.to));
+    return sfiles;
   }
 
   private _previousRepoPath: string = null;
+
+  /**
+   * Show a dialog when a notifyRemoteChanges signal is emitted from the model.
+   */
+  private async warningDialog(
+    options: Git.IRemoteChangedNotification
+  ): Promise<void> {
+    const title = `One or more open files are behind ${this.props.model.status.remote}`;
+    const dialog = new Dialog({
+      title: this.props.trans.__(title),
+      body: this._renderBody(options.notNotified, options.notified),
+      buttons: [
+        Dialog.createButton({
+          label: this.props.trans.__('OK'),
+          accept: false
+        }),
+        Dialog.warnButton({
+          label: this.props.trans.__('Pull'),
+          caption: this.props.trans.__('Git Pull from Remote Branch')
+        })
+      ]
+    });
+    dialog.launch().then(async result => {
+      console.log(result);
+      if (result.button.accept) {
+        await this.props.commands.execute(CommandIDs.gitPull, {});
+      }
+    });
+  }
+
+  /**
+   * renders the body to be used in the remote changes warning dialog
+   */
+  private _renderBody(
+    notNotifiedList: Git.IStatusFile[],
+    notifiedList: Git.IStatusFile[] = []
+  ): JSX.Element {
+    const listedItems = notNotifiedList.map((item: Git.IStatusFile) => {
+      console.log(item.to);
+      const item_val = this.props.trans.__(item.to);
+      return <li key={item_val}>{item_val}</li>;
+    });
+    let elem: JSX.Element = <ul>{listedItems}</ul>;
+    if (notifiedList.length > 0) {
+      const remaining = this.props.trans.__(
+        'The following open files remain behind:'
+      );
+      const alreadyListedItems = notifiedList.map((item: Git.IStatusFile) => {
+        console.log(item.to);
+        const item_val = this.props.trans.__(item.to);
+        return <li key={item_val}>{item_val}</li>;
+      });
+      const full: JSX.Element = (
+        <div>
+          {elem}
+          {remaining}
+          <ul>{alreadyListedItems}</ul>
+        </div>
+      );
+      elem = full;
+    }
+    return <div>{elem}</div>;
+  }
 }