Animate NewTeamModal close

src/browser/components/MainPage.jsx

@@ -309,27 +309,25 @@ const MainPage = React.createClass({
       authServerURL = `${tmpURL.protocol}//${tmpURL.host}`;
       authInfo = this.state.loginQueue[0].authInfo;
     }
-    var modal;
+    var modal = (
-    if (this.state.showNewTeamModal) {
+      <NewTeamModal
-      modal = (
+        show={this.state.showNewTeamModal}
-        <NewTeamModal
+        onClose={() => {
-          onClose={() => {
+          this.setState({
-            this.setState({
+            showNewTeamModal: false
-              showNewTeamModal: false
+          });
-            });
+        }}
-          }}
+        onSave={(newTeam) => {
-          onSave={(newTeam) => {
+          this.props.teams.push(newTeam);
-            this.props.teams.push(newTeam);
+          this.setState({
-            this.setState({
+            showNewTeamModal: false,
-              showNewTeamModal: false,
+            key: this.props.teams.length - 1
-              key: this.props.teams.length - 1
+          });
-            });
+          this.render();
-            this.render();
+          this.props.onTeamConfigChange(this.props.teams);
-            this.props.onTeamConfigChange(this.props.teams);
+        }}
-          }}
+      />
-        />
+    );
-      );
-    }
     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,49 +96,45 @@ const TeamList = React.createClass({
       );
     });
 
-    var addServerForm;
+    var addServerForm = (
-    if (this.props.showAddTeamForm || this.state.showEditTeamForm) {
+      <NewTeamModal
-      addServerForm = (
+        show={this.props.showAddTeamForm || this.state.showEditTeamForm}
-        <NewTeamModal
+        editMode={this.state.showEditTeamForm}
-          editMode={this.state.showEditTeamForm}
+        onClose={() => {
-          onClose={() => {
+          this.setState({
-            this.setState({
+            showEditTeamForm: false,
-              showEditTeamForm: false,
+            team: {
-              team: {
+              name: '',
-                name: '',
+              url: '',
-                url: '',
+              index: false
-                index: false
-              }
-            });
-            this.props.setAddTeamFormVisibility(false);
-          }}
-          onSave={(newTeam) => {
-            var teamData = {
-              name: newTeam.name,
-              url: newTeam.url
-            };
-            if (this.props.showAddTeamForm) {
-              this.props.addServer(teamData);
-            } else {
-              this.props.updateTeam(newTeam.index, teamData);
             }
-            this.setState({
+          });
-              showNewTeamModal: false,
+          this.props.setAddTeamFormVisibility(false);
-              showEditTeamForm: false,
+        }}
-              team: {
+        onSave={(newTeam) => {
-                name: '',
+          var teamData = {
-                url: '',
+            name: newTeam.name,
-                index: false
+            url: newTeam.url
-              }
+          };
-            });
+          if (this.props.showAddTeamForm) {
-            this.render();
+            this.props.addServer(teamData);
-            this.props.setAddTeamFormVisibility(false);
+          } else {
-          }}
+            this.props.updateTeam(newTeam.index, teamData);
-          team={this.state.team}
+          }
-        />);
+          this.setState({
-    } else {
+            showNewTeamModal: false,
-      addServerForm = '';
+            showEditTeamForm: false,
-    }
+            team: {
+              name: '',
+              url: '',
+              index: false
+            }
+          });
+          this.render();
+          this.props.setAddTeamFormVisibility(false);
+        }}
+        team={this.state.team}
+      />);
 
     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,15 +335,16 @@ describe('browser/settings.html', function desc() {
       it('should add the team to the config file', (done) => {
         this.app.client.
           click('#saveNewServerModal').
-          click('#btnSave');
+          pause(1000). // Animation
-        this.app.client.pause(1000).then(() => {
+          click('#btnSave').
-          const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
+          pause(1000).then(() => {
-          savedConfig.teams.should.contain({
+            const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
-            name: 'TestTeam',
+            savedConfig.teams.should.contain({
-            url: 'http://example.org'
+              name: 'TestTeam',
+              url: 'http://example.org'
+            });
+            return done();
           });
-          return done();
-        });
       });
     });
   });