Create pull request

lib/containers/pr-selection-by-branch-container.js

@@ -6,21 +6,40 @@ import {autobind} from 'core-decorators';
 import PrInfoContainer from './pr-info-container';
 import PrUrlInputBox from '../views/pr-url-input-box';
 import Octicon from '../views/octicon';
+import {RemotePropType, BranchSetPropType} from '../prop-types';
 
 export class PrSelectionByBranch extends React.Component {
   static propTypes = {
     repository: PropTypes.shape({
+      defaultBranchRef: PropTypes.shape({
+        prefix: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+      }),
       pullRequests: PropTypes.shape({
-        totalCount: PropTypes.number,
+        totalCount: PropTypes.number.isRequired,
+        edges: PropTypes.arrayOf(PropTypes.shape({
+          node: PropTypes.shape({
+            id: PropTypes.string.isRequired,
+            number: PropTypes.number.isRequired,
+            title: PropTypes.string.isRequired,
+            url: PropTypes.string.isRequired,
+          }).isRequired,
+        })).isRequired,
       }),
     }),
     onSelectPr: PropTypes.func.isRequired,
     onUnpinPr: PropTypes.func.isRequired,
+    onCreatePr: PropTypes.func.isRequired,
+    onSearchAgain: PropTypes.func.isRequired,
     variables: PropTypes.shape({
       repoOwner: PropTypes.string.isRequired,
       repoName: PropTypes.string.isRequired,
       branchName: PropTypes.string.isRequired,
     }),
+    remote: RemotePropType,
+    aheadCount: PropTypes.number,
+    branches: BranchSetPropType.isRequired,
+    pushInProgress: PropTypes.bool.isRequired,
   }
 
   constructor(props, context) {
@@ -40,20 +59,7 @@ export class PrSelectionByBranch extends React.Component {
     const repo = this.props.repository;
     const {variables} = this.props;
     if (!repo || !repo.pullRequests.edges.length) {
-      return (
-        <div className="github-PrUrlInputBox-Container">
-          <PrUrlInputBox onSubmit={this.props.onSelectPr}>
-            <p className="icon icon-git-pull-request" />
-            <p>
-              No pull request could be found for the branch <span className="highlight">{variables.branchName}</span>
-              on the repository <span className="highlight">{variables.repoOwner}/{variables.repoName}</span>.
-            </p>
-            <p>
-              You can manually pin a GitHub pull request to the current branch by entering its URL:
-            </p>
-          </PrUrlInputBox>
-        </div>
-      );
+      return this.renderCreatePr();
     }
 
     const edges = repo.pullRequests.edges;
@@ -89,9 +95,110 @@ export class PrSelectionByBranch extends React.Component {
     return this.renderPrSelectionList(edges, repo.pullRequests.totalCount);
   }
 
-  @autobind
-  toggleInputBoxVisibility() {
-    this.setState({displayInputBox: !this.state.displayInputBox});
+  renderCreatePr() {
+    return (
+      <div className="github-PrSelectionByBranch-container">
+        <div className="github-PrSelectionByBranch-cell">
+          <div className="github-CreatePr">
+            <Octicon className="github-CreatePr-icon" icon="git-pull-request" />
+            <h1 className="github-CreatePr-title">New Pull Request</h1>
+            {this.renderCreatePrControl()}
+          </div>
+        </div>
+        <hr className="github-PrSelectionByBranch-divider" />
+        <div className="github-PrSelectionByBranch-cell">
+          <PrUrlInputBox onSubmit={this.props.onSelectPr}>
+            <p>
+              <a className="github-PrSelectionByBranch-searchAgain" onClick={this.props.onSearchAgain}>Search again </a>
+              to discover an existing pull request, or manually link a GitHub pull request to the current branch by
+              entering its URL:
+            </p>
+          </PrUrlInputBox>
+        </div>
+      </div>
+    );
+  }
+
+  renderCreatePrControl() {
+    if (!this.props.repository) {
+      return (
+        <div className="github-PrSelectionByBranch-message">
+          <strong>Repository not found</strong> for the remote <code>{this.props.remote.getName()}</code>.
+          Do you need to update your remote URL?
+        </div>
+      );
+    }
+
+    if (this.isDetachedHead()) {
+      return (
+        <div className="github-PrSelectionByBranch-message">
+          You are not currently on any branch.
+          &nbsp;<strong>Create a new branch</strong>&nbsp;
+          to share your work with a pull request.
+        </div>
+      );
+    }
+
+    if (!this.props.repository.defaultBranchRef) {
+      return (
+        <div className="github-PrSelectionByBranch-message">
+          The repository at remote <code>{this.props.remote.getName()}</code> is
+          empty. Push a main branch to begin sharing your work.
+        </div>
+      );
+    }
+
+    if (this.isOnDefaultRef()) {
+      return (
+        <div className="github-PrSelectionByBranch-message">
+          You are currently on your repository's default branch.
+          &nbsp;<strong>Create a new branch</strong>&nbsp;
+          to share your work with a pull request.
+        </div>
+      );
+    }
+
+    if (this.isSameAsDefaultRef()) {
+      return (
+        <div className="github-PrSelectionByBranch-message">
+          Your current branch has not moved from the repository's default branch.
+          &nbsp;<strong>Make some commits</strong>&nbsp;
+          to share your work with a pull request.
+        </div>
+      );
+    }
+
+    let message = 'Open new pull request';
+    let disable = false;
+    const differentRemote = this.pushesToDifferentRemote();
+    if (this.props.pushInProgress) {
+      message = 'Pushing...';
+      disable = true;
+    } else if (!this.hasUpstreamBranch() || differentRemote) {
+      message = 'Publish + open new pull request';
+    } else if (this.props.aheadCount > 0) {
+      message = 'Push + open new pull request';
+    }
+
+    return (
+      <div>
+        {differentRemote &&
+          <div className="github-PrSelectionByBranch-message">
+            Your current branch is configured to push to the remote
+            <code>{this.props.branches.getHeadBranch().getPush().getRemoteName()}</code>.
+            Publish it to <code>{this.props.remote.getName()}</code> instead?
+          </div>
+        }
+        <p className="github-CreatePr-controls">
+          <button
+            className="github-PrSelectionByBranch-createPr btn btn-primary"
+            onClick={this.props.onCreatePr}
+            disabled={disable}>
+            {message}
+          </button>
+        </p>
+      </div>
+    );
   }
 
   renderPrSelectionList(edges, totalCount) {
@@ -109,21 +216,26 @@ export class PrSelectionByBranch extends React.Component {
           <PrUrlInputBox onSubmit={this.props.onSelectPr} />
         </div>
         <ul className="github-PrSelectionByBranch-list">
-          {edges.map(this.displayPullRequestItem)}
+          {edges.map(this.renderPrItem)}
         </ul>
       </div>
     );
   }
 
   @autobind
-  displayPullRequestItem({node}) {
+  renderPrItem({node}) {
     return (
       <li key={node.id} onClick={e => this.selectPullRequest(e, node)}>
         #{node.number}: {node.title}
       </li>
     );
   }
 
+  @autobind
+  toggleInputBoxVisibility() {
+    this.setState({displayInputBox: !this.state.displayInputBox});
+  }
+
   @autobind
   setPr(prLink) {
     this.props.onSelectPr(prLink);
@@ -134,11 +246,52 @@ export class PrSelectionByBranch extends React.Component {
     event.preventDefault();
     this.setPr(node.url);
   }
+
+  getDefaultBranchRef() {
+    const ref = this.props.repository.defaultBranchRef;
+    return `${ref.prefix}${ref.name}`;
+  }
+
+  isDetachedHead() {
+    return !this.props.branches.getHeadBranch().isPresent();
+  }
+
+  isOnDefaultRef() {
+    if (!this.props.repository) { return false; }
+
+    const currentBranch = this.props.branches.getHeadBranch();
+    return currentBranch.getPush().getRemoteRef() === this.getDefaultBranchRef();
+  }
+
+  isSameAsDefaultRef() {
+    if (!this.props.repository) { return false; }
+
+    const currentBranch = this.props.branches.getHeadBranch();
+    const mainBranches = this.props.branches.getPushSources(this.props.remote.getName(), this.getDefaultBranchRef());
+    return mainBranches.some(branch => branch.getSha() === currentBranch.getSha());
+  }
+
+  pushesToDifferentRemote() {
+    const p = this.props.branches.getHeadBranch().getPush();
+    if (!p.isRemoteTracking()) { return false; }
+
+    const pushRemoteName = p.getRemoteName();
+    return pushRemoteName !== this.props.remote.getName();
+  }
+
+  hasUpstreamBranch() {
+    return this.props.branches.getHeadBranch().getUpstream().isPresent();
+  }
 }
 
 export default createFragmentContainer(PrSelectionByBranch, {
   repository: graphql`
     fragment prSelectionByBranchContainer_repository on Repository {
+      defaultBranchRef {
+        prefix
+        name
+      }
+
       pullRequests(first: 30, headRefName: $branchName) {
         totalCount
         edges {