Remote changes notification

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

@@ -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,10 @@ const SIMPLE_CONTEXT_COMMANDS: ContextCommands = {
     ContextCommandIDs.gitFileDiff,
     ContextCommandIDs.gitFileHistory
   ],
+  'remote-changed': [
+    ContextCommandIDs.gitFileOpen,
+    ContextCommandIDs.gitFileDiff
+  ],
   staged: [
     ContextCommandIDs.gitFileOpen,
     ContextCommandIDs.gitFileDiscard,
@@ -257,6 +262,11 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     this.setState({ selectedFile: file });
   };
 
+  pullFromRemote = async (event: React.MouseEvent): Promise<void> => {
+    event.stopPropagation();
+    await this.props.model.pull();
+  };
+
   get markedFiles(): Git.IStatusFile[] {
     return this.props.files.filter(file => this.props.model.getMark(file.to));
   }
@@ -277,6 +287,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 +314,9 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
           case 'unmerged':
             unmergedFiles.push(file);
             break;
+          case 'remote-changed':
+            remoteChangedFiles.push(file);
+            break;
           default:
             break;
         }
@@ -320,6 +334,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
                 {this._renderStaged(stagedFiles, height)}
                 {this._renderChanged(unstagedFiles, height)}
                 {this._renderUntracked(untrackedFiles, height)}
+                {this._renderRemoteChanged(remoteChangedFiles, height)}
               </>
             )}
           </AutoSizer>
@@ -665,6 +680,84 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     );
   }
 
+  /**
+   * Render a untracked file.
+   *
+   * 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;
+    // const diffButton = this._createDiffButton(file);
+    return (
+      <FileItem
+        trans={this.props.trans}
+        actions={
+          <React.Fragment>
+            {/** diffButton */}
+            <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

@@ -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
       });
@@ -651,10 +656,10 @@ 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;

src/model.ts

@@ -1,4 +1,5 @@
 import { IChangedArgs, PathExt, URLExt } from '@jupyterlab/coreutils';
+import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
@@ -909,19 +910,19 @@ export class GitExtension implements IGitExtension {
           );
         }
       );
-
+      const files = data.files?.map(file => {
+        return {
+          ...file,
+          status: decodeStage(file.x, file.y),
+          type: this._resolveFileType(file.to)
+        };
+      });
       this._setStatus({
         branch: data.branch || null,
         remote: data.remote || null,
         ahead: data.ahead || 0,
         behind: data.behind || 0,
-        files: data.files?.map(file => {
-          return {
-            ...file,
-            status: decodeStage(file.x, file.y),
-            type: this._resolveFileType(file.to)
-          };
-        })
+        files: files
       });
     } catch (err) {
       // TODO we should notify the user
@@ -931,6 +932,75 @@ export class GitExtension implements IGitExtension {
     }
   }
 
+  /**
+   * Collects files that have changed on the remote branch.
+   *
+   */
+  async remoteChangedFiles(): Promise<Git.IStatusFile[]> {
+    // if a file is changed on remote add it to list of files with appropriate status.
+    this._remoteChangedFiles = [];
+    let remoteChangedFiles: null | string[] = null;
+    if (this.status.remote && this.status.behind > 0) {
+      remoteChangedFiles = (
+        await this._changedFiles('WORKING', this.status.remote)
+      ).files;
+      remoteChangedFiles?.forEach(element => {
+        this._remoteChangedFiles.push({
+          status: 'remote-changed',
+          type: this._resolveFileType(element),
+          x: '?',
+          y: 'B',
+          to: element,
+          from: '?',
+          is_binary: false
+        });
+      });
+    }
+    return this._remoteChangedFiles;
+  }
+
+  /**
+   * Notifies user is a file that is attached has is behind changes in the remote branch with a pop-up Dialog
+   *
+   */
+  async checkRemoteChangeNotified(): Promise<void> {
+    if (this.status.remote && this.status.behind > 0) {
+      for (const val of this._remoteChangedFiles) {
+        const docWidget = this._docmanager.findWidget(
+          this.getRelativeFilePath(val.to)
+        );
+        const notifiedIndex = this._changeUpstreamNotified.findIndex(
+          notified =>
+            notified.from === val.from &&
+            notified.to === val.to &&
+            notified.x === val.x &&
+            notified.y === val.y
+        );
+        if (docWidget !== undefined) {
+          if (docWidget.isAttached) {
+            // notify if the user hasn't been notified yet
+            if (notifiedIndex === -1) {
+              showDialog({
+                title: `${val.to} is out of date with your remote branch: ${this._currentBranch.upstream}`,
+                body: `You may want to pull from ${this._currentBranch.upstream} before editing this file.`,
+                buttons: [Dialog.okButton({ label: 'OK' })]
+              });
+              // add the file to the notified array
+              this._changeUpstreamNotified.push(val);
+            }
+          }
+        } else {
+          // remove from notified array if document is closed
+          if (notifiedIndex > -1) {
+            this._changeUpstreamNotified.splice(notifiedIndex, 1);
+          }
+        }
+      }
+    } else {
+      this._changeUpstreamNotified = [];
+    }
+  }
+
   /**
    * Move files from the "staged" to the "unstaged" area.
    *
@@ -1367,6 +1437,7 @@ export class GitExtension implements IGitExtension {
       try {
         await this.refreshBranch();
         await this.refreshStatus();
+        await this.checkRemoteChangeNotified();
       } catch (error) {
         console.error('Failed to refresh git status', error);
       }
@@ -1427,6 +1498,8 @@ export class GitExtension implements IGitExtension {
   private _standbyCondition: () => boolean = () => false;
   private _statusPoll: Poll;
   private _taskHandler: TaskHandler<IGitExtension>;
+  private _remoteChangedFiles: Git.IStatusFile[] = [];
+  private _changeUpstreamNotified: Git.IStatusFile[] = [];
   private _selectedHistoryFile: Git.IStatusFile | null = null;
 
   private _headChanged = new Signal<IGitExtension, void>(this);

src/tokens.ts

@@ -365,6 +365,16 @@ export interface IGitExtension extends IDisposable {
    */
   refreshStatus(): Promise<void>;
 
+  /**
+   * gets a list of files that have changed in the remote branch
+   */
+  remoteChangedFiles(): Promise<Git.IStatusFile[]>;
+
+  /**
+   * Notifies user is a file that is attached has is behind changes in the remote branch with a pop-up Dialog
+   */
+  checkRemoteChangeNotified(): Promise<void>;
+
   /**
    * Register a new diff provider for specified file types
    *
@@ -894,6 +904,7 @@ export namespace Git {
     | 'staged'
     | 'unstaged'
     | 'partially-staged'
+    | 'remote-changed'
     | 'unmodified'
     | 'unmerged'
     | null;