Display push/pull progress and success.

* Show a spinner while the operation is in progress (Helps with large commits or slow remotes)
* Show a confirmation in the success case.
* Show error message in the failure case.

Author: Jaipreet Singh

src/components/PathHeader.tsx

@@ -12,7 +12,9 @@ import { classes } from 'typestyle';
 
 import { Git } from '../git';
 
-import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { Dialog } from '@jupyterlab/apputils';
+
+import { GitPullPushDialog, Operation } from '../gitPushPull';
 
 export interface IPathHeaderState {
   refresh: any;
@@ -50,12 +52,24 @@ export class PathHeader extends React.Component<
         <button
           className={classes(gitPullStyle, 'jp-Icon-16')}
           title={'Pull latest changes'}
-          onClick={() => this.executeGitPull()}
+          onClick={() =>
+            this.showGitPushPullDialog(
+              this.props.currentFileBrowserPath,
+              Operation.Pull,
+              'Git Pull'
+            )
+          }
         />
         <button
           className={classes(gitPushStyle, 'jp-Icon-16')}
           title={'Push committed changes'}
-          onClick={() => this.executeGitPush()}
+          onClick={() =>
+            this.showGitPushPullDialog(
+              this.props.currentFileBrowserPath,
+              Operation.Push,
+              'Git Push'
+            )
+          }
         />
         <button
           className={classes(repoRefreshStyle, 'jp-Icon-16')}
@@ -65,46 +79,21 @@ export class PathHeader extends React.Component<
     );
   }
 
-  /**
-   * Execute the `/git/pull` API
-   */
-  private executeGitPull(): void {
-    this.state.gitApi
-      .pull(this.props.currentFileBrowserPath)
-      .then(response => {
-        if (response.code !== 0) {
-          this.showErrorDialog('Pull failed', response.message);
-        }
-      })
-      .catch(() => this.showErrorDialog('Pull failed'));
-  }
-
-  /**
-   * Execute the `/git/push` API
-   */
-  private executeGitPush(): void {
-    this.state.gitApi
-      .push(this.props.currentFileBrowserPath)
-      .then(response => {
-        if (response.code !== 0) {
-          this.showErrorDialog('Push failed', response.message);
-        }
-      })
-      .catch(() => this.showErrorDialog('Push failed'));
-  }
-
   /**
    * Displays the error dialog when the Git Push/Pull operation fails.
    * @param title the title of the error dialog
    * @param body the message to be shown in the body of the modal.
    */
-  private showErrorDialog(title: string, body: string = ''): Promise<void> {
-    return showDialog({
+  private showGitPushPullDialog(
+    currentFileBrowserPath: string,
+    operation: Operation,
+    title: string
+  ): Promise<void> {
+    let dialog = new Dialog({
       title: title,
-      body: body,
-      buttons: [Dialog.warnButton({ label: 'DISMISS' })]
-    }).then(() => {
-      // NO-OP
+      body: new GitPullPushDialog(currentFileBrowserPath, operation),
+      buttons: [Dialog.okButton({ label: 'DISMISS' })]
     });
+    return dialog.launch().then(() => {});
   }
 }

src/gitPushPull.ts

@@ -0,0 +1,108 @@
+import { Spinner } from '@jupyterlab/apputils';
+import { Widget } from '@phosphor/widgets';
+import { Git, IGitPushPullResult } from './git';
+
+export enum Operation {
+  Pull = 'Pull',
+  Push = 'Push'
+}
+
+/**
+ * The UI for the content shown within the Git push/pull modal.
+ */
+export class GitPullPushDialog extends Widget {
+  spinner: Spinner;
+  gitApi: Git;
+  body: HTMLElement;
+  operation: Operation;
+
+  /**
+   * Instantiates the dialog and makes the relevant service API call.
+   */
+  constructor(currentFileBrowserPath: string, operation: Operation) {
+    super();
+    this.operation = operation;
+
+    this.body = this.createBody();
+    this.node.appendChild(this.body);
+
+    this.spinner = new Spinner();
+    this.node.appendChild(this.spinner.node);
+
+    this.gitApi = new Git();
+    this.executeGitApi(currentFileBrowserPath);
+  }
+
+  /**
+   * Executes the relevant service API depending on the operation and handles response and errors.
+   * @param currentFileBrowserPath the path to the current repo
+   */
+  private executeGitApi(currentFileBrowserPath: string) {
+    switch (this.operation) {
+      case Operation.Pull:
+        this.gitApi
+          .pull(currentFileBrowserPath)
+          .then(response => {
+            this.handleResponse(response);
+          })
+          .catch(() => this.handleError());
+        break;
+      case Operation.Push:
+        this.gitApi
+          .push(currentFileBrowserPath)
+          .then(response => {
+            this.handleResponse(response);
+          })
+          .catch(() => this.handleError());
+        break;
+      default:
+        throw new Error(`Invalid operation type: ${this.operation}`);
+    }
+  }
+
+  /**
+   * Handles the response from the server by removing the spinner and showing the appropriate
+   * success or error message.
+   * @param response the response from the server API call
+   */
+  private handleResponse(response: IGitPushPullResult) {
+    this.node.removeChild(this.spinner.node);
+    this.spinner.dispose();
+    if (response.code !== 0) {
+      this.handleError(response.message);
+    } else {
+      this.handleSuccess();
+    }
+  }
+
+  private handleError(
+    message: string = 'Unexpected failure. Please check your Jupyter server logs for more details.'
+  ): void {
+    const label = document.createElement('label');
+    const text = document.createElement('span');
+    text.textContent = `Git ${this.operation} failed with error:`;
+    const errorMessage = document.createElement('span');
+    errorMessage.textContent = message;
+    errorMessage.setAttribute(
+      'style',
+      'background-color:var(--jp-rendermime-error-background)'
+    );
+    label.appendChild(text);
+    label.appendChild(document.createElement('p'));
+    label.appendChild(errorMessage);
+    this.body.appendChild(label);
+  }
+
+  private handleSuccess(): void {
+    const label = document.createElement('label');
+    const text = document.createElement('span');
+    text.textContent = `Git ${this.operation} completed successfully`;
+    label.appendChild(text);
+    this.body.appendChild(label);
+  }
+  private createBody(): HTMLElement {
+    const node = document.createElement('div');
+    node.className = 'jp-RedirectForm';
+    return node;
+  }
+}