Animate NewTeamModal close

src/browser/components/MainPage.jsx

@@ -309,10 +309,9 @@ const MainPage = React.createClass({
       authServerURL = `${tmpURL.protocol}//${tmpURL.host}`;
       authInfo = this.state.loginQueue[0].authInfo;
     }
-    var modal;
-    if (this.state.showNewTeamModal) {
-      modal = (
+    var modal = (
       <NewTeamModal
+        show={this.state.showNewTeamModal}
         onClose={() => {
           this.setState({
             showNewTeamModal: false
@@ -329,7 +328,6 @@ const MainPage = React.createClass({
         }}
       />
     );
-    }
     return (
       <div>
         <LoginModal

src/browser/components/NewTeamModal.jsx

@@ -3,9 +3,10 @@ const {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} = require
 const validUrl = require('valid-url');
 
 class NewTeamModal extends React.Component {
-
   constructor() {
     super();
+
+    this.wasShown = false;
     this.state = {
       teamName: '',
       teamUrl: '',
@@ -14,6 +15,10 @@ class NewTeamModal extends React.Component {
   }
 
   componentWillMount() {
+    this.initializeOnShow();
+  }
+
+  initializeOnShow() {
     this.state = {
       teamName: this.props.team ? this.props.team.name : '',
       teamUrl: this.props.team ? this.props.team.url : '',
@@ -105,9 +110,14 @@ class NewTeamModal extends React.Component {
       'margin-bottom': 0
     };
 
+    if (this.wasShown !== this.props.show && this.props.show) {
+      this.initializeOnShow();
+    }
+    this.wasShown = this.props.show;
+
     return (
       <Modal
-        show={true}
+        show={this.props.show}
         id='newServerModal'
         onHide={this.props.onClose}
         onKeyDown={(e) => {
@@ -193,7 +203,8 @@ NewTeamModal.propTypes = {
   onClose: React.PropTypes.func,
   onSave: React.PropTypes.func,
   team: React.PropTypes.object,
-  editMode: React.PropTypes.boolean
+  editMode: React.PropTypes.boolean,
+  show: React.PropTypes.boolean
 };
 
 module.exports = NewTeamModal;

src/browser/components/TeamList.jsx

@@ -96,10 +96,9 @@ const TeamList = React.createClass({
       );
     });
 
-    var addServerForm;
-    if (this.props.showAddTeamForm || this.state.showEditTeamForm) {
-      addServerForm = (
+    var addServerForm = (
       <NewTeamModal
+        show={this.props.showAddTeamForm || this.state.showEditTeamForm}
         editMode={this.state.showEditTeamForm}
         onClose={() => {
           this.setState({
@@ -136,9 +135,6 @@ const TeamList = React.createClass({
         }}
         team={this.state.team}
       />);
-    } else {
-      addServerForm = '';
-    }
 
     const removeServer = this.props.teams[this.state.indexToRemoveServer];
     const removeServerModal = (

test/specs/browser/settings_test.js

@@ -261,6 +261,7 @@ describe('browser/settings.html', function desc() {
     it('should close the window after clicking cancel', () => {
       return this.app.client.
         click('#cancelNewServerModal').
+        pause(1000). // Animation
         isExisting('#newServerModal').should.eventually.equal(false);
     });
 
@@ -334,8 +335,9 @@ describe('browser/settings.html', function desc() {
       it('should add the team to the config file', (done) => {
         this.app.client.
           click('#saveNewServerModal').
-          click('#btnSave');
-        this.app.client.pause(1000).then(() => {
+          pause(1000). // Animation
+          click('#btnSave').
+          pause(1000).then(() => {
             const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
             savedConfig.teams.should.contain({
               name: 'TestTeam',