Add an add team button to the TabBar

src/browser/components/MainPage.jsx

@@ -10,6 +10,8 @@ const MattermostView = require('./MattermostView.jsx');
 const TabBar = require('./TabBar.jsx');
 const HoveringURL = require('./HoveringURL.jsx');
 
+const NewTeamModal = require('./NewTeamModal.jsx');
+
 // Todo: Need to consider better way to apply styles
 const styles = {
   hoveringURL: {
@@ -237,6 +239,11 @@ const MainPage = React.createClass({
       this.setState({targetURL});
     }
   },
+  addTeam() {
+    this.setState({
+      showNewTeamModal: true
+    });
+  },
   render() {
     var self = this;
 
@@ -253,6 +260,7 @@ const MainPage = React.createClass({
             mentionAtActiveCounts={this.state.mentionAtActiveCounts}
             activeKey={this.state.key}
             onSelect={this.handleSelect}
+            onAddTeam={this.addTeam}
           />
         </Row>
       );
@@ -296,6 +304,25 @@ const MainPage = React.createClass({
       authServerURL = `${tmpURL.protocol}//${tmpURL.host}`;
       authInfo = this.state.loginQueue[0].authInfo;
     }
+    var modal;
+    if (this.state.showNewTeamModal) {
+      modal = (
+        <NewTeamModal
+          onClose={() => {
+            this.setState({
+              showNewTeamModal: false
+            });
+          }}
+          onSave={(newTeam) => {
+            this.setState({
+              showNewTeamModal: false
+            });
+            this.props.teams.push(newTeam);
+            this.render();
+          }}
+        />
+      );
+    }
     return (
       <div>
         <LoginModal
@@ -323,6 +350,9 @@ const MainPage = React.createClass({
               targetURL={this.state.targetURL}
             /> }
         </ReactCSSTransitionGroup>
+        <div>
+          { modal }
+        </div>
       </div>
     );
   }

src/browser/components/NewTeamModal.jsx

@@ -0,0 +1,115 @@
+const React = require('react');
+const {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} = require('react-bootstrap');
+const validUrl = require('valid-url');
+
+class NewTeamModal extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      teamName: '',
+      teamUrl: ''
+    };
+  }
+
+  shouldComponentUpdate() {
+    return true;
+  }
+
+  getTeamNameValidationState() {
+    return this.state.teamName.length > 0 ? '' : 'error';
+  }
+
+  handleTeamNameChange(e) {
+    this.setState({
+      teamName: e.target.value
+    });
+  }
+
+  getTeamUrlValidationState() {
+    if (this.state.teamUrl.length === 0) {
+      return 'error';
+    }
+    if (!validUrl.isUri(this.state.teamUrl)) {
+      return 'error';
+    }
+    return '';
+  }
+
+  handleTeamUrlChange(e) {
+    this.setState({
+      teamUrl: e.target.value
+    });
+  }
+
+  validateForm() {
+    return this.getTeamNameValidationState() === '' &&
+           this.getTeamUrlValidationState() === '';
+  }
+
+  render() {
+    return (
+      <Modal.Dialog>
+        <Modal.Header>
+          <Modal.Title>{'Add a new Team'}</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          {'Please specify a team name and a valid Mattermost URL'}
+          <form>
+            <FormGroup
+              validationState={this.getTeamNameValidationState()}
+            >
+              <ControlLabel>{'Team Display Name'}</ControlLabel>
+              <FormControl
+                type='text'
+                value={this.state.teamName}
+                placeholder='Team Name'
+                onChange={this.handleTeamNameChange.bind(this)}
+              />
+              <FormControl.Feedback/>
+              <HelpBlock>{'Team Name must not be empty'}</HelpBlock>
+            </FormGroup>
+            <FormGroup
+              validationState={this.getTeamUrlValidationState()}
+            >
+              <ControlLabel>{'Team URL'}</ControlLabel>
+              <FormControl
+                type='text'
+                value={this.state.teamUrl}
+                placeholder='https://example.org'
+                onChange={this.handleTeamUrlChange.bind(this)}
+              />
+              <FormControl.Feedback/>
+              <HelpBlock>{'Must be a valid URL'}</HelpBlock>
+            </FormGroup>
+          </form>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button
+            onClick={this.props.onClose}
+          >{'Cancel'}</Button>
+          <Button
+            onClick={() => {
+              this.props.onSave({
+                url: this.state.teamUrl,
+                name: this.state.teamName
+              });
+            }}
+            disabled={!this.validateForm()}
+            bsStyle='primary'
+          >{'Add'}</Button>
+        </Modal.Footer>
+
+      </Modal.Dialog>
+    );
+  }
+}
+
+NewTeamModal.propTypes = {
+  onClose: React.PropTypes.func,
+  onSave: React.PropTypes.func
+};
+
+module.exports = NewTeamModal;

src/browser/components/TabBar.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const {Nav, NavItem} = require('react-bootstrap');
+const {Nav, NavItem, Button} = require('react-bootstrap');
 
 class TabBar extends React.Component {
   render() {
@@ -75,16 +75,29 @@ class TabBar extends React.Component {
         onSelect={this.props.onSelect}
       >
         { tabs }
+        { this.renderAddTeamButton() }
       </Nav>
     );
   }
+
+  renderAddTeamButton() {
+    return (
+      <Button
+        onClick={this.props.onAddTeam}
+        bsStyle='tabButton'
+      >
+        {'+'}
+      </Button>
+    );
+  }
 }
 
 TabBar.propTypes = {
   activeKey: React.PropTypes.number,
   id: React.PropTypes.string,
   onSelect: React.PropTypes.func,
-  teams: React.PropTypes.array
+  teams: React.PropTypes.array,
+  onAddTeam: React.PropTypes.func
 };
 
 module.exports = TabBar;

src/browser/config/AppConfig.js

@@ -0,0 +1,12 @@
+const settings = require('../../common/settings');
+const {remote} = require('electron');
+
+var config;
+try {
+  const configFile = remote.app.getPath('userData') + '/config.json';
+  config = settings.readFileSync(configFile);
+} catch (e) {
+  config = {};
+}
+
+module.exports = config;

src/browser/css/index.css

@@ -16,3 +16,16 @@
   opacity: 0.01;
   transition: opacity 500ms ease-in-out;
 }
+
+.btn-tabButton {
+  margin-top: 3px;
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.btn-tabButton:hover {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}

src/browser/index.jsx

@@ -9,19 +9,12 @@ const ReactDOM = require('react-dom');
 const {remote, ipcRenderer} = require('electron');
 const MainPage = require('./components/MainPage.jsx');
 
-const settings = require('../common/settings');
+const AppConfig = require('./config/AppConfig.js');
 const badge = require('./js/badge');
 
 remote.getCurrentWindow().removeAllListeners('focus');
 
-var config;
-try {
-  const configFile = remote.app.getPath('userData') + '/config.json';
-  config = settings.readFileSync(configFile);
-} catch (e) {
-  window.location = 'settings.html';
-}
-if (config.teams.length === 0) {
+if (AppConfig.teams.length === 0) {
   window.location = 'settings.html';
 }