Create or add remote repository [WIP]

lib/controllers/github-tab-controller.js

@@ -4,6 +4,7 @@ import {autobind} from 'core-decorators';
 import yubikiri from 'yubikiri';
 
 import RemotePrController from './remote-pr-controller';
+import RemoteRepoController from './remote-repo-controller';
 import GithubLoginModel from '../models/github-login-model';
 import ObserveModel from '../views/observe-model';
 import {RemotePropType} from '../prop-types';
@@ -114,7 +115,12 @@ export default class GithubTabController extends React.Component {
               selectRemote={this.handleRemoteSelect}
             />
           }
-          {!remote && !manyRemotesAvailable && this.renderNoRemotes()}
+          {!remote && !manyRemotesAvailable &&
+            <RemoteRepoController
+              host="https://api.github.com"
+              loginModel={this.loginModel}
+            />
+          }
         </div>
       </div>
     );
@@ -154,14 +160,6 @@ export default class GithubTabController extends React.Component {
     return this.props.repository.getWorkingDirectoryPath();
   }
 
-  renderNoRemotes() {
-    return (
-      <div className="github-GithubTabController-no-remotes">
-        This repository does not have any remotes hosted at github.com.
-      </div>
-    );
-  }
-
   @autobind
   handleRemoteSelect(e, remote) {
     e.preventDefault();

lib/controllers/remote-repo-controller.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {autobind} from 'core-decorators';
+import yubikiri from 'yubikiri';
+
+import ObserveModelDecorator from '../decorators/observe-model';
+import GithubLoginView from '../views/github-login-view';
+import {UNAUTHENTICATED} from '../models/github-login-model';
+import {nullRemote} from '../models/remote';
+import RemoteRepoInputBox from '../views/remote-repo-input-box';
+import RemoteCreateForm from '../views/remote-create-form';
+import Octicon from '../views/octicon';
+
+@ObserveModelDecorator({
+  getModel: props => props.loginModel,
+  fetchData: (loginModel, {host}) => {
+    return yubikiri({
+      token: loginModel.getToken(host),
+    });
+  },
+})
+export default class RemoteRepoController extends React.Component {
+  static propTypes = {
+    loginModel: PropTypes.object.isRequired,
+    host: PropTypes.string, // fully qualified URI to the API endpoint, e.g. 'https://api.github.com'
+    token: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.symbol,
+    ]),
+  }
+
+  static defaultProps = {
+    host: 'https://api.github.com',
+    remote: nullRemote,
+    token: null,
+  }
+
+  render() {
+    const {token} = this.props;
+    return (
+      <div className="github-RemoteRepoController">
+        {token && token !== UNAUTHENTICATED &&
+          <div className="github-RemoteRepoController-Container">
+            <div className="github-RemoteRepoController-Subview">
+              <Octicon icon="octoface" />
+              <p>This repository does not have any remotes hosted at github.com.</p>
+
+              <RemoteRepoInputBox>
+                <p>You can manually add a remote to the current repo by entering its URL:</p>
+              </RemoteRepoInputBox>
+              <RemoteCreateForm>
+                <p>You can also create a new GitHub repo:</p>
+              </RemoteCreateForm>
+            </div>
+          </div>
+        }
+        {(!token || token === UNAUTHENTICATED) && <GithubLoginView onLogin={this.handleLogin} />}
+      </div>
+    );
+  }
+
+  @autobind
+  handleLogin(token) {
+    this.props.loginModel.setToken(this.props.host, token);
+  }
+}

lib/views/remote-create-form.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {autobind} from 'core-decorators';
+
+export default class RemoteCreateForm extends React.Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    children: PropTypes.node,
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      repo: '',
+      description: '',
+      isPrivate: false,
+    };
+  }
+
+  render() {
+    return (
+      <form className="github-RemoteCreateForm-Subview" onSubmit={this.handleSubmitUrl}>
+        {this.props.children}
+        <input
+          type="text"
+          className="input-text native-key-bindings"
+          placeholder="e.g. owner/repo"
+          value={this.state.url}
+          onChange={this.handleUrlChange}
+        />
+        <input
+          type="text"
+          className="input-text native-key-bindings"
+          placeholder="Description"
+          value={this.state.url}
+          onChange={this.handleUrlChange}
+        />
+        <label className="input-label">
+          <input
+            type="checkbox"
+            className="input-checkbox"
+            onClick={this.handleIsPrivateBoxClick}
+            checked={this.state.isPrivate}
+          /> Private
+        </label>
+        <div>
+          <input
+            type="submit"
+            value="Submit"
+            onClick={this.handleSubmitFormClick} className="btn btn-primary icon icon-check inline-block-tight"
+          />
+        </div>
+      </form>
+    );
+  }
+
+  @autobind
+  handleSubmitFormClick(e) {
+    e.preventDefault();
+    this.handleSubmitForm();
+  }
+
+  @autobind
+  handleSubmitForm() {
+    this.props.onSubmit(this.state.repo, this.state.description, this.state.private);
+  }
+
+  @autobind
+  handleRepoChange(e) {
+    this.setState({repo: e.target.value});
+  }
+
+  @autobind
+  handleDescriptionChange(e) {
+    this.setState({url: e.target.value});
+  }
+
+  @autobind
+  handleIsPrivateBoxClick(e) {
+    this.setState({isPrivate: e.target.value});
+  }
+}

lib/views/remote-repo-input-box.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {autobind} from 'core-decorators';
+
+export default class RemoteRepoInputBox extends React.Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    children: PropTypes.node,
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      repo: '',
+    };
+  }
+
+  render() {
+    return (
+      <form className="github-RemoteRepoInputBox-Subview" onSubmit={this.handleSubmitRepo}>
+        {this.props.children}
+        <input
+          type="text"
+          className="input-text native-key-bindings"
+          placeholder="e.g. https://github.com/owner/repo"
+          value={this.state.repo}
+          onChange={this.handleRepoChange}
+        />
+        <div>
+          <input
+            type="submit"
+            value="Submit"
+            onClick={this.handleSubmitRepoClick} className="btn btn-primary icon icon-check inline-block-tight"
+          />
+        </div>
+      </form>
+    );
+  }
+
+  @autobind
+  handleSubmitRepoClick(e) {
+    e.preventDefault();
+    this.handleSubmitRepo();
+  }
+
+  @autobind
+  handleSubmitRepo() {
+    this.props.onSubmit(this.state.url);
+  }
+
+  @autobind
+  handleRepoChange(e) {
+    this.setState({repo: e.target.value});
+  }
+}

styles/remote-repo-controller.less

@@ -0,0 +1,49 @@
+
+@import "variables";
+
+.github-RemoteRepoController {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+
+  // TODO: Simplify selector
+  // Only add padding when inside this container
+  .github-RemoteRepoController-Subview {
+    padding: @component-padding * 2;
+  }
+
+  .github-RemoteCreateForm-Subview {
+    margin-top: @component-padding * 2;
+  }
+
+  &-Container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    button, input[type=text], .btn, .input-label {
+      margin: @component-padding 0;
+    }
+
+    .icon-octoface:before {
+      width: auto;
+      font-size: 48px;
+      color: @text-color-subtle;
+    }
+
+    p {
+      font-size: 1.1em;
+      line-height: 1.5;
+      -webkit-user-select: none;
+      cursor: default;
+
+      a {
+        color: @text-color-info;
+      }
+    }
+
+    input[type=text] {
+      width: 100%;
+    }
+  }
+}