import React from 'react';
import PropTypes from 'prop-types';

import {RemoteSetPropType, BranchPropType} from '../prop-types';

export default class RemoteSelectorView extends React.Component {
  static propTypes = {
    remotes: RemoteSetPropType.isRequired,
    currentBranch: BranchPropType.isRequired,
    selectRemote: PropTypes.func.isRequired,
  }

  render() {
    const {remotes, currentBranch, selectRemote} = this.props;
    // todo: ask Ash how to test this before merging.
    return (
      <div className="github-RemoteSelector">
        <div className="github-GitHub-LargeIcon icon icon-mirror" />
        <h1>Multiple Remotes</h1>
        <div className="initialize-repo-description">
          <span>This repository has multiple remotes hosted at GitHub.com.
          Select a remote to see pull requests associated
          with the <strong>{currentBranch.getName()}</strong> branch:</span>
        </div>

        <ul>
          {Array.from(remotes, remote => (
            <li key={remote.getName()}>
              <button className="btn btn-primary" onClick={e => selectRemote(e, remote)}>
                {remote.getName()} ({remote.getOwner()}/{remote.getRepo()})
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

import React from 'react';
import PropTypes from 'prop-types';

import {RemoteSetPropType, BranchPropType} from '../prop-types';

export default class RemoteSelectorView extends React.Component {
  static propTypes = {
    remotes: RemoteSetPropType.isRequired,
    currentBranch: BranchPropType.isRequired,
    selectRemote: PropTypes.func.isRequired,
  }

  render() {
    const {remotes, currentBranch, selectRemote} = this.props;
    // todo: ask Ash how to test this before merging.
    return (
      <div className="github-RemoteSelector">
        <div className="github-GitHub-LargeIcon icon icon-mirror" />
        <h1>Select a Remote</h1>
        <div className="initialize-repo-description">
          <span>This repository has multiple remotes hosted at GitHub.com.
          Select a remote to see pull requests associated
          with the <strong>{currentBranch.getName()}</strong> branch:</span>
        </div>

        <ul>
          {Array.from(remotes, remote => (
            <li key={remote.getName()}>
              <button className="btn btn-primary" onClick={e => selectRemote(e, remote)}>
                {remote.getName()} ({remote.getOwner()}/{remote.getRepo()})
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Update heading on Remote Selector to use imperative tone
Update heading on Remote Selector to use imperative tone

Previously the heading looked like an "error" message, however, this is really just a regular state that the user can appear in, and in future revisions this screen could be used for changing the remote directly from within the Github package, therefore an imperative tone fits better with the user's intent.
