Add tab for all changed files in a pull request

.nycrc.json

@@ -6,6 +6,7 @@
   ],
   "exclude": [
     "lib/views/git-cache-view.js",
-    "lib/views/git-timings-view.js"
+    "lib/views/git-timings-view.js",
+    "lib/relay-network-layer-manager.js"
   ]
 }

docs/react-component-atlas.md

@@ -121,6 +121,13 @@ This is a high-level overview of the structure of the React component tree that
 > > > [`<PrCommitView>`](/lib/views/pr-commit-view.js)
 > > >
 > > > Enumerate the commits associated with a pull request.
+> >
+> > > [`<PullRequestChangedFilesContainer>`](/lib/containers/pr-changed-files-container.js)
+> > >
+> > > Show all the changes, separated by files, introduced in a pull request.
+> > >
+> > > > [`<MultiFilePatchController>`](/lib/controllers/multi-file-patch-controller.js)
+> > > > [`<MultiFilePatchView>`](/lib/views/multi-file-patch-view.js)
 >
 > > [`<InitDialog>`](/lib/views/init-dialog.js)
 > > [`<CloneDialog>`](/lib/views/clone-dialog.js)

lib/containers/current-pull-request-container.js

@@ -4,13 +4,16 @@ import {QueryRenderer, graphql} from 'react-relay';
 import {Disposable} from 'event-kit';
 
 import {autobind} from '../helpers';
-import {RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType} from '../prop-types';
+import {
+  RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType, EndpointPropType,
+} from '../prop-types';
 import IssueishListController, {BareIssueishListController} from '../controllers/issueish-list-controller';
 import CreatePullRequestTile from '../views/create-pull-request-tile';
 import RelayNetworkLayerManager from '../relay-network-layer-manager';
 
 export default class CurrentPullRequestContainer extends React.Component {
   static propTypes = {
+    // Relay payload
     repository: PropTypes.shape({
       id: PropTypes.string.isRequired,
       defaultBranchRef: PropTypes.shape({
@@ -19,16 +22,22 @@ export default class CurrentPullRequestContainer extends React.Component {
       }),
     }).isRequired,
 
+    // Connection
+    endpoint: EndpointPropType.isRequired,
     token: PropTypes.string.isRequired,
-    host: PropTypes.string.isRequired,
+
+    // Search constraints
     limit: PropTypes.number,
+
+    // Repository model attributes
     remoteOperationObserver: OperationStateObserverPropType.isRequired,
     remote: RemotePropType.isRequired,
     remotes: RemoteSetPropType.isRequired,
     branches: BranchSetPropType.isRequired,
     aheadCount: PropTypes.number,
     pushInProgress: PropTypes.bool.isRequired,
 
+    // Actions
     onOpenIssueish: PropTypes.func.isRequired,
     onCreatePr: PropTypes.func.isRequired,
   }
@@ -45,7 +54,7 @@ export default class CurrentPullRequestContainer extends React.Component {
   }
 
   render() {
-    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.host, this.props.token);
+    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.endpoint, this.props.token);
 
     const head = this.props.branches.getHeadBranch();
     if (!head.isPresent()) {

lib/containers/issueish-detail-container.js

@@ -3,31 +3,45 @@ import PropTypes from 'prop-types';
 import yubikiri from 'yubikiri';
 import {QueryRenderer, graphql} from 'react-relay';
 
+import {autobind} from '../helpers';
 import RelayNetworkLayerManager from '../relay-network-layer-manager';
-import {GithubLoginModelPropType} from '../prop-types';
+import {GithubLoginModelPropType, ItemTypePropType, EndpointPropType} from '../prop-types';
 import {UNAUTHENTICATED, INSUFFICIENT} from '../shared/keytar-strategy';
 import GithubLoginView from '../views/github-login-view';
 import LoadingView from '../views/loading-view';
 import QueryErrorView from '../views/query-error-view';
 import ObserveModel from '../views/observe-model';
-import IssueishDetailController from '../controllers/issueish-detail-controller';
 import RelayEnvironment from '../views/relay-environment';
-import {autobind} from '../helpers';
+import IssueishDetailController from '../controllers/issueish-detail-controller';
 
 export default class IssueishDetailContainer extends React.Component {
   static propTypes = {
-    host: PropTypes.string,
+    // Connection
+    endpoint: EndpointPropType.isRequired,
+
+    // Issueish selection criteria
     owner: PropTypes.string.isRequired,
     repo: PropTypes.string.isRequired,
     issueishNumber: PropTypes.number.isRequired,
 
+    // Package models
     repository: PropTypes.object.isRequired,
     loginModel: GithubLoginModelPropType.isRequired,
 
+    // Atom environment
+    workspace: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
+    keymaps: PropTypes.object.isRequired,
+    tooltips: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+
+    // Action methods
     switchToIssueish: PropTypes.func.isRequired,
     onTitleChange: PropTypes.func.isRequired,
+    destroy: PropTypes.func.isRequired,
 
-    workspace: PropTypes.object.isRequired,
+    // Item context
+    itemType: ItemTypePropType.isRequired,
   }
 
   constructor(props) {
@@ -42,7 +56,7 @@ export default class IssueishDetailContainer extends React.Component {
 
   fetchToken(loginModel) {
     return yubikiri({
-      token: loginModel.getToken(this.props.host),
+      token: loginModel.getToken(this.props.endpoint.getLoginAccount()),
     });
   }
 
@@ -97,7 +111,7 @@ export default class IssueishDetailContainer extends React.Component {
       return <LoadingView />;
     }
 
-    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.host, token);
+    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.endpoint, token);
     const query = graphql`
       query issueishDetailContainerQuery
       (
@@ -136,13 +150,13 @@ export default class IssueishDetailContainer extends React.Component {
           environment={environment}
           query={query}
           variables={variables}
-          render={queryResult => this.renderWithResult(queryResult, repoData)}
+          render={queryResult => this.renderWithResult(queryResult, repoData, token)}
         />
       </RelayEnvironment.Provider>
     );
   }
 
-  renderWithResult({error, props, retry}, repoData) {
+  renderWithResult({error, props, retry}, repoData, token) {
     if (error) {
       return (
         <QueryErrorView
@@ -164,6 +178,7 @@ export default class IssueishDetailContainer extends React.Component {
       <IssueishDetailController
         {...props}
         {...repoData}
+        localRepository={this.props.repository}
         issueishNumber={this.props.issueishNumber}
         fetch={repository.fetch.bind(repository)}
         checkout={repository.checkout.bind(repository)}
@@ -172,16 +187,27 @@ export default class IssueishDetailContainer extends React.Component {
         onTitleChange={this.props.onTitleChange}
         switchToIssueish={this.props.switchToIssueish}
         workdirPath={repository.getWorkingDirectoryPath()}
+
+        endpoint={this.props.endpoint}
+        token={token}
+
         workspace={this.props.workspace}
+        commands={this.props.commands}
+        keymaps={this.props.keymaps}
+        tooltips={this.props.tooltips}
+        config={this.props.config}
+
+        itemType={this.props.itemType}
+        destroy={this.props.destroy}
       />
     );
   }
 
   handleLogin(token) {
-    return this.props.loginModel.setToken(this.props.host, token);
+    return this.props.loginModel.setToken(this.props.endpoint.getLoginAccount(), token);
   }
 
   handleLogout() {
-    return this.props.loginModel.removeToken(this.props.host);
+    return this.props.loginModel.removeToken(this.props.endpoint.getLoginAccount());
   }
 }

lib/containers/issueish-search-container.js

@@ -4,18 +4,22 @@ import {QueryRenderer, graphql} from 'react-relay';
 import {Disposable} from 'event-kit';
 
 import {autobind} from '../helpers';
-import {SearchPropType, OperationStateObserverPropType} from '../prop-types';
+import {SearchPropType, OperationStateObserverPropType, EndpointPropType} from '../prop-types';
 import IssueishListController, {BareIssueishListController} from '../controllers/issueish-list-controller';
 import RelayNetworkLayerManager from '../relay-network-layer-manager';
 
 export default class IssueishSearchContainer extends React.Component {
   static propTypes = {
+    // Connection information
+    endpoint: EndpointPropType.isRequired,
     token: PropTypes.string.isRequired,
-    host: PropTypes.string.isRequired,
+
+    // Search model
     limit: PropTypes.number,
     search: SearchPropType.isRequired,
     remoteOperationObserver: OperationStateObserverPropType.isRequired,
 
+    // Action methods
     onOpenIssueish: PropTypes.func.isRequired,
     onOpenSearch: PropTypes.func.isRequired,
   }
@@ -32,7 +36,7 @@ export default class IssueishSearchContainer extends React.Component {
   }
 
   render() {
-    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.host, this.props.token);
+    const environment = RelayNetworkLayerManager.getEnvironmentForHost(this.props.endpoint, this.props.token);
 
     if (this.props.search.isNull()) {
       return (

lib/containers/pr-changed-files-container.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {parse as parseDiff} from 'what-the-diff';
+
+import {ItemTypePropType, EndpointPropType} from '../prop-types';
+import MultiFilePatchController from '../controllers/multi-file-patch-controller';
+import LoadingView from '../views/loading-view';
+import ErrorView from '../views/error-view';
+import {buildMultiFilePatch} from '../models/patch';
+
+export default class PullRequestChangedFilesContainer extends React.Component {
+  static propTypes = {
+    // Pull request properties
+    owner: PropTypes.string.isRequired,
+    repo: PropTypes.string.isRequired,
+    number: PropTypes.number.isRequired,
+
+    // Connection properties
+    endpoint: EndpointPropType.isRequired,
+    token: PropTypes.string.isRequired,
+
+    // Item context
+    itemType: ItemTypePropType.isRequired,
+
+    // action methods
+    destroy: PropTypes.func.isRequired,
+
+    // Atom environment
+    workspace: PropTypes.object.isRequired,
+    commands: PropTypes.object.isRequired,
+    keymaps: PropTypes.object.isRequired,
+    tooltips: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+
+    // local repo as opposed to pull request repo
+    localRepository: PropTypes.object.isRequired,
+
+    // refetch diff on refresh
+    shouldRefetch: PropTypes.bool.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {isLoading: true, error: null};
+    this.fetchDiff();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.shouldRefetch && !prevProps.shouldRefetch) {
+      this.setState({isLoading: true, error: null});
+      this.fetchDiff();
+    }
+  }
+
+  // Generate a v3 GitHub API REST URL for the pull request resource.
+  // Example: https://api.github.com/repos/atom/github/pulls/1829
+  getDiffURL() {
+    return this.props.endpoint.getRestURI('repos', this.props.owner, this.props.repo, 'pulls', this.props.number);
+  }
+
+  buildPatch(rawDiff) {
+    const diffs = parseDiff(rawDiff);
+    return buildMultiFilePatch(diffs);
+  }
+
+  async fetchDiff() {
+    const diffError = (message, err = null) => new Promise(resolve => {
+      if (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+      }
+      this.setState({isLoading: false, error: message}, resolve);
+    });
+    const url = this.getDiffURL();
+
+    const response = await fetch(url, {
+      headers: {
+        Accept: 'application/vnd.github.v3.diff',
+        Authorization: `bearer ${this.props.token}`,
+      },
+      // eslint-disable-next-line handle-callback-err
+    }).catch(err => {
+      diffError(`Network error encountered at fetching ${url}`, err);
+    });
+    if (this.state.error) {
+      return;
+    }
+    try {
+      if (response && response.ok) {
+        const rawDiff = await response.text();
+        const multiFilePatch = this.buildPatch(rawDiff);
+        await new Promise(resolve => this.setState({isLoading: false, multiFilePatch}, resolve));
+      } else {
+        diffError(`Unable to fetch diff for this pull request${response ? ': ' + response.statusText : ''}.`);
+      }
+    } catch (err) {
+      diffError('Unable to parse diff for this pull request.', err);
+    }
+  }
+
+  render() {
+    if (this.state.isLoading) {
+      return <LoadingView />;
+    }
+
+    if (this.state.error) {
+      return <ErrorView descriptions={[this.state.error]} />;
+    }
+
+    return (
+      <MultiFilePatchController
+        multiFilePatch={this.state.multiFilePatch}
+        repository={this.props.localRepository}
+        {...this.props}
+      />
+    );
+  }
+}