improve error dialogs (#619)

* make filenames more noticeable in error dialogs

Emphasized the filenames in these dialogs to make it more
immediately obvious what files have conflicts/are being discarded.

* don't prematurely close new branch dialog

if a name wasn't entered or an invalid branch name was entered then the
new branch dialog would close once you hit new branch. This makes it
so the create branch button is disabled when no name has been entered,
and keeps the dialog open until it is clear that branch creation was
successful.

I also removed the 'fatal' from the git error message as it was
redundant with the title of the dialog.

* Use same styling than commit button when disabled

Co-authored-by: Frederic Collonval <[email protected]>

Author: ianhi

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)'
+    }
+  }
 });