Merge pull request #474 from atom/mkt-gql-login

Show login window in GH panel

Author: Michelle Tilley

lib/controllers/git-controller.js

@@ -12,6 +12,7 @@ import PaneItem from '../views/pane-item';
 import Resizer from '../views/resizer';
 import Tabs from '../views/tabs';
 import Commands, {Command} from '../views/commands';
+import GithubController from './github-controller';
 import FilePatchController from './file-patch-controller';
 import GitPanelController from './git-panel-controller';
 import StatusBarTileController from './status-bar-tile-controller';
@@ -44,6 +45,7 @@ export default class GitController extends React.Component {
     return {
       gitPanelActive: this.state.gitPanelActive,
       panelSize: this.state.panelSize,
+      activeTab: this.state.activeTab,
     };
   }
 
@@ -54,7 +56,7 @@ export default class GitController extends React.Component {
       amending: false,
       gitPanelActive: !!props.savedState.gitPanelActive,
       panelSize: props.savedState.panelSize || 400,
-      activeTab: 0,
+      activeTab: props.savedState.activeTab || 0,
     };
 
     this.repositoryStateRegistry = new ModelStateRegistry(GitController, {
@@ -154,7 +156,7 @@ export default class GitController extends React.Component {
             </Tabs.Panel>
             {this.props.githubEnabled && (
               <Tabs.Panel title="Hub">
-                Hello from Hub
+                <GithubController repository={this.props.repository} />
               </Tabs.Panel>
             )}
           </Tabs>

lib/controllers/github-controller.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import {autobind} from 'core-decorators';
+
+import RemotePrController from './remote-pr-controller';
+import Repository from '../models/repository';
+import GithubLoginModel from '../models/github-login-model';
+import ObserveModel from '../decorators/observe-model';
+import {RemotePropType} from '../prop-types';
+
+class RemoteSelector extends React.Component {
+  static propTypes = {
+    remotes: React.PropTypes.arrayOf(RemotePropType).isRequired,
+    currentBranch: React.PropTypes.string.isRequired,
+    selectRemote: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {remotes, currentBranch, selectRemote} = this.props;
+    return (
+      <div className="github-RemoteSelector">
+        <p>
+          This repository has multiple remotes hosted at GitHub.com.
+          Select a remote to see pull requests associated
+          with the <strong>{currentBranch}</strong> branch.
+        </p>
+        <ul>
+          {remotes.map(remote => (
+            <li key={remote.name}>
+              <a href="#" onClick={e => selectRemote(e, remote)}>
+                {remote.name} ({remote.info.owner}/{remote.info.name})
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+
+@ObserveModel({
+  getModel: props => props.repository,
+  fetchData: async repo => {
+    let remotes = await repo.getRemotes();
+    const currentBranch = await repo.getCurrentBranch();
+    const selectedRemote = await repo.getConfig('atomGithub.currentRemote');
+    remotes = remotes.map(({name, url}) => ({name, url, info: Repository.githubInfoFromRemote(url)}))
+      .filter(remote => remote.info.githubRepo);
+    return {remotes, currentBranch, selectedRemote};
+  },
+})
+export default class GithubController extends React.Component {
+  static propTypes = {
+    repository: React.PropTypes.object,
+    remotes: React.PropTypes.arrayOf(RemotePropType.isRequired),
+    currentBranch: React.PropTypes.string,
+    selectedRemote: React.PropTypes.string,
+  }
+
+  static defaultProps = {
+    remotes: null,
+    currentBranch: '',
+    selectedRemote: null,
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    this.loginModel = new GithubLoginModel();
+  }
+
+  render() {
+    if (!this.props.repository || !this.props.remotes) {
+      return null;
+    }
+
+    let remote = this.props.remotes.find(r => r.name === this.props.selectedRemote);
+    let remotesAvailable = false;
+    if (!remote && this.props.remotes.length === 1) {
+      remote = this.props.remotes[0];
+    } else if (!remote && this.props.remotes.length > 1) {
+      remotesAvailable = true;
+    }
+
+    return (
+      <div className="github-GithubController">
+        <div className="github-GithubController-content">
+          {/* only supporting GH.com for now, hardcoded values */}
+          {remote &&
+            <RemotePrController
+              instance="github.com"
+              endpoint="https://api.github.com/"
+              loginModel={this.loginModel}
+              remote={remote}
+              currentBranch={this.props.currentBranch}
+            />
+          }
+          {!remote && remotesAvailable &&
+            <RemoteSelector
+              remotes={this.props.remotes}
+              currentBranch={this.props.currentBranch}
+              selectRemote={this.handleRemoteSelect}
+            />
+          }
+          {!remote && !remotesAvailable && this.renderNoRemotes()}
+        </div>
+      </div>
+    );
+  }
+
+  renderNoRemotes() {
+    return (
+      <div className="github-GithubController-no-remotes">
+        This repository does not have any remotes hosted at GitHub.com.
+      </div>
+    );
+  }
+
+  componentWillUnmount() {
+    this.loginModel.destroy();
+  }
+
+  @autobind
+  handleRemoteSelect(e, remote) {
+    e.preventDefault();
+    this.props.repository.setConfig('atomGithub.currentRemote', remote.name);
+  }
+}

lib/controllers/remote-pr-controller.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {autobind} from 'core-decorators';
+
+import {RemotePropType} from '../prop-types';
+import ObserveModel from '../decorators/observe-model';
+import GithubLoginView from '../views/github-login-view';
+
+@ObserveModel({
+  getModel: props => props.loginModel,
+  fetchData: async (loginModel, {instance}) => {
+    return {
+      token: await loginModel.getToken(instance),
+    };
+  },
+})
+export default class RemotePrController extends React.Component {
+  static propTypes = {
+    loginModel: React.PropTypes.object.isRequired,
+    instance: React.PropTypes.string, // string that identifies the instance, e.g. 'github.com'
+    endpoint: React.PropTypes.string, // fully qualified URI to the API endpoint, e.g. 'https://api.github.com/'
+    remote: RemotePropType.isRequired,
+    token: React.PropTypes.string,
+    currentBranch: React.PropTypes.string.isRequired,
+  }
+
+  static defaultProps = {
+    instance: 'github.com',
+    endpoint: 'https://api.github.com/',
+    token: null,
+  }
+
+  render() {
+    return (
+      <div className="github-RemotePrController">
+        {this.props.token && <span>you gots a token! {this.props.token}</span>}
+        {!this.props.token && <GithubLoginView onLogin={this.handleLogin} />}
+      </div>
+    );
+  }
+
+  @autobind
+  handleLogin(token) {
+    this.props.loginModel.setToken(this.props.instance, token);
+  }
+}

lib/decorators/observe-model.js

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import ModelObserver from '../models/model-observer';
+
+/**
+ * Wraps a component in a HOC that watches for a model to change
+ * and passes data to the wrapped component as props.
+ * Utilizes `ModelObserver` to watch for model changes.
+ *
+ *   @ObserveModel({
+ *     // getModel takes the props passed to the outer component
+ *     // and should return the model to watch; defaults to `props.model`
+ *     getModel: props => props.repository,
+ *     // fetchData takes the model instance and the props passed
+ *     // to the outer component and should return an object (or promise
+ *     // of an object) specifying the data to be passed to the
+ *     // inner component as props
+ *     fetchModel: (repo, props) => ({ stuff: repo.getStuff() }),
+ *   })
+ *   class MyComponent extends React.Component { ... }
+ */
+export default function ObserveModel(spec) {
+  const getModel = spec.getModel || (props => props.model);
+  const fetchData = spec.fetchData || (() => {});
+
+  return function(Target) {
+    return class extends React.Component {
+      static displayName = `ObserveModel(${Target.name})`
+
+      constructor(props, context) {
+        super(props, context);
+        this.mounted = true;
+        this.state = {
+          modelData: {},
+        };
+
+        this.modelObserver = new ModelObserver({
+          fetchData: model => fetchData(model, this.props),
+          didUpdate: () => {
+            if (this.mounted) {
+              this.setState({modelData: this.modelObserver.getActiveModelData()});
+            }
+          },
+        });
+      }
+
+      componentWillMount() {
+        this.modelObserver.setActiveModel(getModel(this.props));
+      }
+
+      componentWillReceiveProps(nextProps) {
+        this.modelObserver.setActiveModel(getModel(nextProps));
+      }
+
+      render() {
+        const data = this.state.modelData;
+        return <Target {...data} {...this.props} />;
+      }
+
+      componentWillUnmount() {
+        this.mounted = false;
+        this.modelObserver.destroy();
+      }
+    };
+  };
+}

lib/git-shell-out-strategy.js

@@ -402,6 +402,49 @@ export default class GitShellOutStrategy {
     return output.trim().split(LINE_ENDING_REGEX)
       .map(branchName => branchName.trim().replace(/^\* /, ''));
   }
+
+  async getConfig(option, {local} = {}) {
+    let output;
+    try {
+      let args = ['config'];
+      if (local) { args.push('--local'); }
+      args = args.concat(option);
+      output = await this.exec(args);
+    } catch (err) {
+      if (err.code === 1 && err.stdErr === '') {
+        // No matching config found
+        return null;
+      } else {
+        throw err;
+      }
+    }
+
+    return output.trim();
+  }
+
+  setConfig(option, value, {replaceAll} = {}) {
+    let args = ['config'];
+    if (replaceAll) { args.push('--replace-all'); }
+    args = args.concat(option, value);
+    return this.exec(args);
+  }
+
+  async getRemotes() {
+    let output = await this.getConfig(['--get-regexp', '^remote..*.url$'], {local: true});
+    if (output) {
+      output = output.trim();
+      if (!output.length) { return []; }
+      return output.split('\n').map(line => {
+        const match = line.match(/^remote\.(.*)\.url (.*)$/);
+        return {
+          name: match[1],
+          url: match[2],
+        };
+      });
+    } else {
+      return [];
+    }
+  }
 }
 
 function buildAddedFilePatch(filePath, contents, stats) {

lib/index.js

@@ -27,6 +27,17 @@ function versionMismatch() {
 function startPackage() {
   var GithubPackage = require('./github-package').default;
 
+  if (atom.inDevMode()) {
+    // Let's install some devTools
+    try {
+      const electronDevtoolsInstaller = require('electron-devtools-installer');
+      const installExtension = electronDevtoolsInstaller.default;
+      installExtension(electronDevtoolsInstaller.REACT_DEVELOPER_TOOLS);
+    } catch (_e) {
+      // Nothing
+    }
+  }
+
   return new GithubPackage(
     atom.workspace, atom.project, atom.commands, atom.notifications, atom.config,
   );

lib/models/github-login-model.js

@@ -0,0 +1,36 @@
+import {getPassword, replacePassword, deletePassword} from 'keytar';
+
+import {Emitter} from 'atom';
+
+// TOOD: Fall back to shelling out to `security` on unsigned-macOS builds
+export default class GithubLoginModel {
+  constructor() {
+    this.emitter = new Emitter();
+  }
+
+  getToken(account) {
+    return Promise.resolve(getPassword('atom-github', account));
+  }
+
+  setToken(account, token) {
+    replacePassword('atom-github', account, token);
+    this.didUpdate();
+  }
+
+  removeToken(account) {
+    deletePassword('atom-github', account);
+    this.didUpdate();
+  }
+
+  didUpdate() {
+    this.emitter.emit('did-update');
+  }
+
+  onDidUpdate(cb) {
+    return this.emitter.on('did-update', cb);
+  }
+
+  destroy() {
+    this.emitter.destroy();
+  }
+}