improve error dialogs

src/components/BranchMenu.tsx

@@ -3,7 +3,7 @@ import { classes } from 'typestyle';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ClearIcon from '@material-ui/icons/Clear';
-import { showErrorMessage } from '@jupyterlab/apputils';
+import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
 import { Git, IGitExtension } from '../tokens';
 import {
   activeListItemClass,
@@ -314,7 +314,41 @@ export class BranchMenu extends React.Component<
      * @param err - error
      */
     function onError(err: any): void {
-      showErrorMessage('Error switching branch', err.message);
+      if (err.message.includes('following files would be overwritten')) {
+        showDialog({
+          title: 'Unable to switch branch',
+          body: (
+            <React.Fragment>
+              <p>
+                Your changes to the follow files would be overwritten by
+                switching:
+              </p>
+              <List>
+                {err.message
+                  .split('\n')
+                  .slice(1, -3)
+                  .map(renderFileName)}
+              </List>
+              <span>
+                Please commit, stash, or discard your changes before you switch
+                branches.
+              </span>
+            </React.Fragment>
+          ),
+          buttons: [Dialog.okButton({ label: 'Dismiss' })]
+        });
+      } else {
+        showErrorMessage('Error switching branch', err.message);
+      }
+    }
+
+    /**
+     * Render a filename into a list
+     * @param filename
+     * @returns ReactElement
+     */
+    function renderFileName(filename: string): React.ReactElement {
+      return <ListItem key={filename}>{filename}</ListItem>;
     }
   }
 }

src/components/FileList.tsx

@@ -237,7 +237,12 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
   discardChanges = async (file: string) => {
     const result = await showDialog({
       title: 'Discard changes',
-      body: `Are you sure you want to permanently discard changes to ${file}? This action cannot be undone.`,
+      body: (
+        <span>
+          Are you sure you want to permanently discard changes to <b>{file}</b>?
+          This action cannot be undone.
+        </span>
+      ),
       buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Discard' })]
     });
     if (result.button.accept) {

src/components/NewBranchDialog.tsx

@@ -204,6 +204,7 @@ export class NewBranchDialog extends React.Component<
             title="Create a new branch"
             value="Create Branch"
             onClick={this._onCreate}
+            disabled={this.state.name === ''}
           />
         </DialogActions>
       </Dialog>
@@ -397,19 +398,8 @@ export class NewBranchDialog extends React.Component<
    * @param event - event object
    */
   private _onCreate = (): void => {
-    const branch = this.state.name;
-
-    // Close the branch dialog:
-    this.props.onClose();
-
-    // Reset the branch name and filter:
-    this.setState({
-      name: '',
-      filter: ''
-    });
-
     // Create the branch:
-    this._createBranch(branch);
+    this._createBranch(this.state.name);
   };
 
   /**
@@ -418,6 +408,7 @@ export class NewBranchDialog extends React.Component<
    * @param branch - branch name
    */
   private _createBranch(branch: string): void {
+    const self = this;
     const opts = {
       newBranch: true,
       branchname: branch
@@ -436,6 +427,15 @@ export class NewBranchDialog extends React.Component<
     function onResolve(result: any): void {
       if (result.code !== 0) {
         showErrorMessage('Error creating branch', result.message);
+      } else {
+        // Close the branch dialog:
+        self.props.onClose();
+
+        // Reset the branch name and filter:
+        self.setState({
+          name: '',
+          filter: ''
+        });
       }
     }
 
@@ -446,7 +446,10 @@ export class NewBranchDialog extends React.Component<
      * @param err - error
      */
     function onError(err: any): void {
-      showErrorMessage('Error creating branch', err.message);
+      showErrorMessage(
+        'Error creating branch',
+        err.message.replace(/^fatal:/, '')
+      );
     }
   }
 }

src/style/NewBranchDialog.ts

@@ -257,5 +257,12 @@ export const cancelButtonClass = style({
 });
 
 export const createButtonClass = style({
-  backgroundColor: 'var(--jp-brand-color1)'
+  backgroundColor: 'var(--jp-brand-color1)',
+  $nest: {
+    '&:disabled': {
+      cursor: 'default',
+      color: 'var(--jp-ui-inverse-font-color0)',
+      backgroundColor: 'var(--jp-layout-color3)'
+    }
+  }
 });