Commit Preview

docs/react-component-atlas.md

@@ -66,12 +66,24 @@ This is a high-level overview of the structure of the React component tree that
 > > > > > >
 > > > > > > Render a list of issueish results as rows within the result list of a specific search.
 >
-> > [`<FilePatchController>`](/lib/controllers/file-patch-controller.js)
-> > [`<FilePatchView>`](/lib/views/file-patch-view.js)
+> > [`<ChangedFileItem>`](/lib/items/changed-file-item.js)
+> > [`<ChangedFileContainer>`](/lib/containers/changed-file-container.js)
 > >
 > > The workspace-center pane that appears when looking at the staged or unstaged changes associated with a file.
 > >
-> > :construction: Being rewritten in [#1712](https://github.com/atom/github/pull/1512) :construction:
+> > > [`<MultiFilePatchController>`](/lib/controllers/multi-file-patch-controller.js)
+> > > [`<MultiFilePatchView>`](/lib/views/multi-file-patch-view.js)
+> > >
+> > > Render a sequence of git-generated file patches within a TextEditor, using decorations to include contextually
+> > > relevant controls.
+>
+> > [`<CommitPreviewItem>`](/lig/items/commit-preview-item.js)
+> > [`<CommitPreviewContainer>`](/lib/containers/commit-preview-container.js)
+> >
+> > The workspace-center pane that appears when looking at _all_ the staged changes that will be going into the next commit.
+> >
+> > > [`<MultiFilePatchController>`](/lib/controllers/multi-file-patch-controller.js)
+> > > [`<MultiFilePatchView>`](/lib/views/multi-file-patch-view.js)
 >
 > > [`<IssueishDetailItem>`](/lib/items/issueish-detail-item.js)
 > > [`<IssueishDetailContainer>`](/lib/containers/issueish-detail-container.js)

docs/react-component-classification.md

@@ -6,7 +6,7 @@ This is a high-level summary of the organization and implementation of our React
 
 **Items** are intended to be used as top-level components within subtrees that are rendered into some [Portal](https://reactjs.org/docs/portals.html) and passed to the Atom API, like pane items, dock items, or tooltips. They are mostly responsible for implementing the [Atom "item" contract](https://github.com/atom/atom/blob/a3631f0dafac146185289ac5e37eaff17b8b0209/src/workspace.js#L29-L174).
 
-These live within [`lib/items/`](/lib/items), are tested within [`test/items/`](/test/items), and are named with an `Item` suffix. Examples: `PullRequestDetailItem`, `FilePatchItem`.
+These live within [`lib/items/`](/lib/items), are tested within [`test/items/`](/test/items), and are named with an `Item` suffix. Examples: `PullRequestDetailItem`, `ChangedFileItem`.
 
 ## Containers
 

keymaps/git.cson

@@ -24,8 +24,13 @@
 '.github-StagingView':
   'tab': 'core:focus-next'
   'shift-tab': 'core:focus-previous'
-  'o': 'github:open-file'
+  'o': 'github:jump-to-file'
   'left': 'core:move-left'
+  'cmd-left': 'core:move-left'
+
+'.github-CommitView button':
+  'tab': 'core:focus-next'
+  'shift-tab': 'core:focus-previous'
 
 '.github-StagingView.unstaged-changes-focused':
   'cmd-backspace': 'github:discard-changes-in-selected-files'
@@ -36,17 +41,22 @@
   'ctrl-enter': 'github:commit'
   'shift-tab': 'core:focus-previous'
 
+'.github-CommitView-commitPreview':
+  'cmd-left': 'github:dive'
+  'ctrl-left': 'github:dive'
+  'enter': 'native!'
+
 '.github-FilePatchView atom-text-editor:not([mini])':
   'cmd-/': 'github:toggle-patch-selection-mode'
   'ctrl-/': 'github:toggle-patch-selection-mode'
   'cmd-backspace': 'github:discard-selected-lines'
   'ctrl-backspace': 'github:discard-selected-lines'
   'cmd-enter': 'core:confirm'
   'ctrl-enter': 'core:confirm'
-  'cmd-right': 'github:surface-file'
-  'ctrl-right': 'github:surface-file'
-  'cmd-o': 'github:open-file'
-  'ctrl-o': 'github:open-file'
+  'cmd-right': 'github:surface'
+  'ctrl-right': 'github:surface'
+  'cmd-o': 'github:jump-to-file'
+  'ctrl-o': 'github:jump-to-file'
 
 '.github-FilePatchView--hunkMode atom-text-editor:not([mini])':
   'down': 'github:select-next-hunk'

lib/atom/decoration.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import {Disposable} from 'event-kit';
+import cx from 'classnames';
 
 import {createItem, autobind, extractProps} from '../helpers';
 import {RefHolderPropType} from '../prop-types';
@@ -49,7 +50,7 @@ class BareDecoration extends React.Component {
     this.item = null;
     if (['gutter', 'overlay', 'block'].includes(this.props.type)) {
       this.domNode = document.createElement('div');
-      this.domNode.className = 'react-atom-decoration';
+      this.domNode.className = cx('react-atom-decoration', this.props.className);
     }
   }
 

lib/atom/uri-pattern.js

@@ -246,7 +246,7 @@ function dashEscape(raw) {
  * Reverse the escaping performed by `dashEscape` by un-doubling `-` characters.
  */
 function dashUnescape(escaped) {
-  return escaped.replace('--', '-');
+  return escaped.replace(/--/g, '-');
 }
 
 /**

lib/containers/file-patch-container.js → lib/containers/changed-file-container.js

@@ -5,9 +5,9 @@ import yubikiri from 'yubikiri';
 import {autobind} from '../helpers';
 import ObserveModel from '../views/observe-model';
 import LoadingView from '../views/loading-view';
-import FilePatchController from '../controllers/file-patch-controller';
+import ChangedFileController from '../controllers/changed-file-controller';
 
-export default class FilePatchContainer extends React.Component {
+export default class ChangedFileContainer extends React.Component {
   static propTypes = {
     repository: PropTypes.object.isRequired,
     stagingStatus: PropTypes.oneOf(['staged', 'unstaged']),
@@ -30,8 +30,10 @@ export default class FilePatchContainer extends React.Component {
   }
 
   fetchData(repository) {
+    const staged = this.props.stagingStatus === 'staged';
+
     return yubikiri({
-      filePatch: repository.getFilePatchForPath(this.props.relPath, {staged: this.props.stagingStatus === 'staged'}),
+      multiFilePatch: repository.getFilePatchForPath(this.props.relPath, {staged}),
       isPartiallyStaged: repository.isPartiallyStaged(this.props.relPath),
       hasUndoHistory: repository.hasDiscardHistory(this.props.relPath),
     });
@@ -51,10 +53,8 @@ export default class FilePatchContainer extends React.Component {
     }
 
     return (
-      <FilePatchController
-        filePatch={data.filePatch}
-        isPartiallyStaged={data.isPartiallyStaged}
-        hasUndoHistory={data.hasUndoHistory}
+      <ChangedFileController
+        {...data}
         {...this.props}
       />
     );

lib/containers/commit-preview-container.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import yubikiri from 'yubikiri';
+
+import ObserveModel from '../views/observe-model';
+import LoadingView from '../views/loading-view';
+import CommitPreviewController from '../controllers/commit-preview-controller';
+
+export default class CommitPreviewContainer extends React.Component {
+  static propTypes = {
+    repository: PropTypes.object.isRequired,
+  }
+
+  fetchData = repository => {
+    return yubikiri({
+      multiFilePatch: repository.getStagedChangesPatch(),
+    });
+  }
+
+  render() {
+    return (
+      <ObserveModel model={this.props.repository} fetchData={this.fetchData}>
+        {this.renderResult}
+      </ObserveModel>
+    );
+  }
+
+  renderResult = data => {
+    if (this.props.repository.isLoading() || data === null) {
+      return <LoadingView />;
+    }
+
+    return (
+      <CommitPreviewController
+        stagingStatus={'staged'}
+        {...data}
+        {...this.props}
+      />
+    );
+  }
+}

lib/controllers/changed-file-controller.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import MultiFilePatchController from './multi-file-patch-controller';
+
+export default class ChangedFileController extends React.Component {
+  static propTypes = {
+    repository: PropTypes.object.isRequired,
+    stagingStatus: PropTypes.oneOf(['staged', 'unstaged']),
+    relPath: PropTypes.string.isRequired,
+
+    workspace: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
+    keymaps: PropTypes.object.isRequired,
+    tooltips: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+
+    destroy: PropTypes.func.isRequired,
+    undoLastDiscard: PropTypes.func.isRequired,
+    surfaceFileAtPath: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return (
+      <MultiFilePatchController
+        surface={this.surface}
+        {...this.props}
+      />
+    );
+  }
+
+  surface = () => this.props.surfaceFileAtPath(this.props.relPath, this.props.stagingStatus)
+}

lib/controllers/commit-controller.js

@@ -8,7 +8,9 @@ import fs from 'fs-extra';
 
 import CommitView from '../views/commit-view';
 import RefHolder from '../models/ref-holder';
+import CommitPreviewItem from '../items/commit-preview-item';
 import {AuthorPropType, UserStorePropType} from '../prop-types';
+import {watchWorkspaceItem} from '../watch-workspace-item';
 import {autobind} from '../helpers';
 import {addEvent} from '../reporter-proxy';
 
@@ -42,7 +44,8 @@ export default class CommitController extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    autobind(this, 'commit', 'handleMessageChange', 'toggleExpandedCommitMessageEditor', 'grammarAdded');
+    autobind(this, 'commit', 'handleMessageChange', 'toggleExpandedCommitMessageEditor', 'grammarAdded',
+      'toggleCommitPreview');
 
     this.subscriptions = new CompositeDisposable();
     this.refCommitView = new RefHolder();
@@ -51,6 +54,14 @@ export default class CommitController extends React.Component {
     this.subscriptions.add(
       this.commitMessageBuffer.onDidChange(this.handleMessageChange),
     );
+
+    this.previewWatcher = watchWorkspaceItem(
+      this.props.workspace,
+      CommitPreviewItem.buildURI(this.props.repository.getWorkingDirectoryPath()),
+      this,
+      'commitPreviewActive',
+    );
+    this.subscriptions.add(this.previewWatcher);
   }
 
   componentDidMount() {
@@ -105,12 +116,21 @@ export default class CommitController extends React.Component {
         userStore={this.props.userStore}
         selectedCoAuthors={this.props.selectedCoAuthors}
         updateSelectedCoAuthors={this.props.updateSelectedCoAuthors}
+        toggleCommitPreview={this.toggleCommitPreview}
+        activateCommitPreview={this.activateCommitPreview}
+        commitPreviewActive={this.state.commitPreviewActive}
       />
     );
   }
 
   componentDidUpdate(prevProps) {
     this.commitMessageBuffer.setTextViaDiff(this.getCommitMessage());
+
+    if (prevProps.repository !== this.props.repository) {
+      this.previewWatcher.setPattern(
+        CommitPreviewItem.buildURI(this.props.repository.getWorkingDirectoryPath()),
+      );
+    }
   }
 
   componentWillUnmount() {
@@ -240,12 +260,31 @@ export default class CommitController extends React.Component {
     return this.refCommitView.map(view => view.setFocus(focus)).getOr(false);
   }
 
-  hasFocus() {
-    return this.refCommitView.map(view => view.hasFocus()).getOr(false);
+  advanceFocus(...args) {
+    return this.refCommitView.map(view => view.advanceFocus(...args)).getOr(false);
+  }
+
+  retreatFocus(...args) {
+    return this.refCommitView.map(view => view.retreatFocus(...args)).getOr(false);
+  }
+
+  hasFocusAtBeginning() {
+    return this.refCommitView.map(view => view.hasFocusAtBeginning()).getOr(false);
+  }
+
+  toggleCommitPreview() {
+    addEvent('toggle-commit-preview', {package: 'github'});
+    const uri = CommitPreviewItem.buildURI(this.props.repository.getWorkingDirectoryPath());
+    if (this.props.workspace.hide(uri)) {
+      return Promise.resolve();
+    } else {
+      return this.props.workspace.open(uri, {searchAllPanes: true, pending: true});
+    }
   }
 
-  hasFocusEditor() {
-    return this.refCommitView.map(view => view.hasFocusEditor()).getOr(false);
+  activateCommitPreview = () => {
+    const uri = CommitPreviewItem.buildURI(this.props.repository.getWorkingDirectoryPath());
+    return this.props.workspace.open(uri, {searchAllPanes: true, pending: true, activate: true});
   }
 }
 

lib/controllers/commit-preview-controller.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import MultiFilePatchController from './multi-file-patch-controller';
+
+export default class CommitPreviewController extends React.Component {
+  static propTypes = {
+    repository: PropTypes.object.isRequired,
+    stagingStatus: PropTypes.oneOf(['staged', 'unstaged']),
+
+    workspace: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
+    keymaps: PropTypes.object.isRequired,
+    tooltips: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+
+    destroy: PropTypes.func.isRequired,
+    undoLastDiscard: PropTypes.func.isRequired,
+    surfaceToCommitPreviewButton: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return (
+      <MultiFilePatchController
+        surface={this.props.surfaceToCommitPreviewButton}
+        {...this.props}
+      />
+    );
+  }
+}

lib/controllers/git-tab-controller.js

@@ -348,6 +348,10 @@ export default class GitTabController extends React.Component {
     return this.refView.map(view => view.focusAndSelectStagingItem(filePath, stagingStatus)).getOr(null);
   }
 
+  focusAndSelectCommitPreviewButton() {
+    return this.refView.map(view => view.focusAndSelectCommitPreviewButton());
+  }
+
   quietlySelectItem(filePath, stagingStatus) {
     return this.refView.map(view => view.quietlySelectItem(filePath, stagingStatus)).getOr(null);
   }

lib/controllers/github-tab-controller.js

@@ -19,7 +19,7 @@ export default class GitHubTabController extends React.Component {
     allRemotes: RemoteSetPropType.isRequired,
     branches: BranchSetPropType.isRequired,
     selectedRemoteName: PropTypes.string,
-    aheadCount: PropTypes.number.isRequired,
+    aheadCount: PropTypes.number,
     pushInProgress: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
   }