Improve commit amend selection (#994)

* Improve commit amend selection

* Add vertical more icon
Refactor commit message component

* Fix test

* Add documentation

* Fix ResetRevertDialog

Author: fcollonval

package.json

@@ -76,7 +76,6 @@
     "nbdime-jupyterlab": "^2.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-textarea-autosize": "^7.1.2",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "typestyle": "^2.0.1"

src/components/CommitBox.tsx

@@ -1,15 +1,47 @@
 import { TranslationBundle } from '@jupyterlab/translation';
+import { checkIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
 import * as React from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
+import { classes } from 'typestyle';
+import { listItemIconClass } from '../style/BranchMenu';
 import {
   commitButtonClass,
-  commitDescriptionClass,
   commitFormClass,
-  commitSummaryClass,
-  commitInputWrapperClass
+  commitPaperClass,
+  commitRoot,
+  commitVariantSelector,
+  disabledStyle
 } from '../style/CommitBox';
+import { verticalMoreIcon } from '../style/icons';
+import {
+  listItemBoldTitleClass,
+  listItemContentClass,
+  listItemDescClass
+} from '../style/NewBranchDialog';
 import { CommandIDs } from '../tokens';
+import { CommitMessage } from './CommitMessage';
+
+/**
+ * Commit action
+ */
+interface ICommitVariant {
+  /**
+   * Action title
+   */
+  title: string;
+  /**
+   * Action description
+   */
+  description: string;
+}
 
 /**
  * Interface describing component properties.
@@ -46,7 +78,7 @@ export interface ICommitBoxProps {
   description: string;
 
   /**
-   * Whether the "amend" checkbox is checked
+   * Whether commit is amending the previous one or not
    */
   amend: boolean;
 
@@ -79,10 +111,23 @@ export interface ICommitBoxProps {
   onCommit: () => Promise<void>;
 }
 
+/**
+ * CommitBox state
+ */
+export interface ICommitBoxState {
+  /**
+   * Whether the commit variant menu is opened or not.
+   */
+  open: boolean;
+}
+
 /**
  * React component for entering a commit message.
  */
-export class CommitBox extends React.Component<ICommitBoxProps> {
+export class CommitBox extends React.Component<
+  ICommitBoxProps,
+  ICommitBoxState
+> {
   /**
    * Returns a React component for entering a commit message.
    *
@@ -91,6 +136,25 @@ export class CommitBox extends React.Component<ICommitBoxProps> {
    */
   constructor(props: ICommitBoxProps) {
     super(props);
+    this._options.push(
+      {
+        title: this.props.trans.__('Create a new commit'),
+        description: this.props.trans.__(
+          'New commit will be created and show up as a next one after the previous commit (default).'
+        )
+      },
+      {
+        title: this.props.trans.__('Amend previous commit'),
+        description: this.props.trans.__(
+          'Staged changes will be added to the previous commit and its date will be updated.'
+        )
+      }
+    );
+    this._anchorRef = React.createRef<HTMLDivElement>();
+
+    this.state = {
+      open: false
+    };
   }
 
   componentDidMount(): void {
@@ -122,58 +186,92 @@ export class CommitBox extends React.Component<ICommitBoxProps> {
       shortcutHint
     );
     return (
-      <form className={[commitFormClass, 'jp-git-CommitBox'].join(' ')}>
-        <input
-          className={commitSummaryClass}
-          type="text"
-          placeholder={summaryPlaceholder}
-          title={
-            this.props.amend
-              ? this.props.trans.__(
-                  'Amending the commit will re-use the previous commit summary'
-                )
-              : this.props.trans.__(
-                  'Enter a commit message summary (a single line, preferably less than 50 characters)'
-                )
-          }
-          value={this.props.summary}
-          onChange={this._onSummaryChange}
-          onKeyPress={this._onSummaryKeyPress}
+      <div className={classes(commitFormClass, 'jp-git-CommitBox')}>
+        <CommitMessage
+          trans={this.props.trans}
+          summary={this.props.summary}
+          summaryPlaceholder={summaryPlaceholder}
+          description={this.props.description}
           disabled={this.props.amend}
+          setSummary={this.props.setSummary}
+          setDescription={this.props.setDescription}
         />
-        <TextareaAutosize
-          className={commitDescriptionClass}
-          minRows={5}
-          placeholder={this.props.trans.__('Description (optional)')}
-          title={
-            this.props.amend
-              ? this.props.trans.__(
-                  'Amending the commit will re-use the previous commit summary'
-                )
-              : this.props.trans.__('Enter a commit message description')
-          }
-          value={this.props.description}
-          onChange={this._onDescriptionChange}
-          disabled={this.props.amend}
-        />
-        <div className={commitInputWrapperClass}>
-          <input
-            className={commitButtonClass}
-            type="button"
+        <ButtonGroup ref={this._anchorRef} fullWidth={true} size="small">
+          <Button
+            classes={{
+              root: commitButtonClass,
+              disabled: disabledStyle
+            }}
             title={title}
-            value={this.props.label}
             disabled={disabled}
             onClick={this.props.onCommit}
-          />
-          <input
-            type="checkbox"
-            id="commit-amend"
-            onChange={this._onAmendChange}
-            checked={this.props.amend}
-          />
-          <label htmlFor="commit-amend">Amend</label>
-        </div>
-      </form>
+          >
+            {this.props.label}
+          </Button>
+          <Button
+            classes={{
+              root: commitButtonClass
+            }}
+            className={commitVariantSelector}
+            size="small"
+            aria-controls={this.state.open ? 'split-button-menu' : undefined}
+            aria-expanded={this.state.open ? 'true' : undefined}
+            aria-label="select commit variant"
+            aria-haspopup="menu"
+            onClick={this._handleToggle}
+          >
+            <verticalMoreIcon.react tag="span" />
+          </Button>
+        </ButtonGroup>
+        <Popper
+          open={this.state.open}
+          anchorEl={this._anchorRef.current}
+          role={undefined}
+          transition
+          disablePortal
+        >
+          {({ TransitionProps }) => (
+            <Grow {...TransitionProps}>
+              <Paper
+                classes={{ root: commitRoot }}
+                className={commitPaperClass}
+              >
+                <ClickAwayListener onClickAway={this._handleClose}>
+                  <MenuList id="split-button-menu">
+                    {this._options.map((option, index) => (
+                      <MenuItem
+                        key={option.title}
+                        classes={{ root: commitRoot }}
+                        selected={this.props.amend ? index === 1 : index === 0}
+                        onClick={event =>
+                          this._handleMenuItemClick(event, index)
+                        }
+                      >
+                        {(this.props.amend ? index === 1 : index === 0) ? (
+                          <checkIcon.react
+                            className={listItemIconClass}
+                            tag="span"
+                          />
+                        ) : (
+                          <span className={listItemIconClass} />
+                        )}
+                        <div className={listItemContentClass}>
+                          <p className={listItemBoldTitleClass}>
+                            {option.title}
+                          </p>
+                          <p className={listItemDescClass}>
+                            {option.description}
+                          </p>
+                        </div>
+                      </MenuItem>
+                    ))}
+                  </MenuList>
+                </ClickAwayListener>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+      </div>
     );
   }
 
@@ -198,45 +296,39 @@ export class CommitBox extends React.Component<ICommitBoxProps> {
   };
 
   /**
-   * Callback invoked upon updating a commit message description.
-   *
-   * @param event - event object
+   * Close the commit variant menu if needed.
    */
-  private _onDescriptionChange = (event: any): void => {
-    this.props.setDescription(event.target.value);
-  };
+  private _handleClose = (
+    event: React.MouseEvent<Document, MouseEvent>
+  ): void => {
+    if (
+      this._anchorRef.current &&
+      this._anchorRef.current.contains(event.target as HTMLElement)
+    ) {
+      return;
+    }
 
-  /**
-   * Callback invoked upon updating a commit message summary.
-   *
-   * @param event - event object
-   */
-  private _onSummaryChange = (event: any): void => {
-    this.props.setSummary(event.target.value);
+    this.setState({ open: false });
   };
 
   /**
-   * Callback invoked when the amend checkbox is toggled
-   *
-   * @param event - event object
+   * Handle commit variant menu item click
    */
-  private _onAmendChange = (event: any): void => {
-    this.props.setAmend(event.target.checked);
+  private _handleMenuItemClick = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    index: number
+  ): void => {
+    this.setState({
+      open: false
+    });
+    this.props.setAmend(index === 1);
   };
 
   /**
-   * Callback invoked upon a `'keypress'` event when entering a commit message summary.
-   *
-   * ## Notes
-   *
-   * -   Prevents triggering a `'submit'` action when hitting the `ENTER` key while entering a commit message summary.
-   *
-   * @param event - event object
+   * Toggle state of the commit variant menu visibility
    */
-  private _onSummaryKeyPress = (event: React.KeyboardEvent): void => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-    }
+  private _handleToggle = (): void => {
+    this.setState({ open: !this.state.open });
   };
 
   /**
@@ -255,4 +347,7 @@ export class CommitBox extends React.Component<ICommitBoxProps> {
       this.props.onCommit();
     }
   };
+
+  private _anchorRef: React.RefObject<HTMLDivElement>;
+  private _options: ICommitVariant[] = [];
 }