Use new team modal in settings view as defined in #400

src/browser/components/NewTeamModal.jsx

@@ -55,20 +55,20 @@ class NewTeamModal extends React.Component {
         </Modal.Header>
 
         <Modal.Body>
-          {'Please specify a team name and a valid Mattermost URL'}
+          {'Please specify a server name and a valid Mattermost URL'}
           <form>
             <FormGroup
               validationState={this.getTeamNameValidationState()}
             >
-              <ControlLabel>{'Team Display Name'}</ControlLabel>
+              <ControlLabel>{'Server Display Name'}</ControlLabel>
               <FormControl
                 type='text'
                 value={this.state.teamName}
-                placeholder='Team Name'
+                placeholder='Server Name'
                 onChange={this.handleTeamNameChange.bind(this)}
               />
               <FormControl.Feedback/>
-              <HelpBlock>{'Team Name must not be empty'}</HelpBlock>
+              <HelpBlock>{'The name of the server displayed on your desktop app tab bar.'}</HelpBlock>
             </FormGroup>
             <FormGroup
               validationState={this.getTeamUrlValidationState()}
@@ -81,7 +81,7 @@ class NewTeamModal extends React.Component {
                 onChange={this.handleTeamUrlChange.bind(this)}
               />
               <FormControl.Feedback/>
-              <HelpBlock>{'Must be a valid URL'}</HelpBlock>
+              <HelpBlock>{'The URL of your Mattermost server. Must start with http:// or https://.'}</HelpBlock>
             </FormGroup>
           </form>
         </Modal.Body>

src/browser/components/SettingsPage.jsx

@@ -159,6 +159,7 @@ const SettingsPage = React.createClass({
           <TeamList
             teams={this.state.teams}
             showAddTeamForm={this.state.showAddTeamForm}
+            toggleAddTeamForm={this.toggleShowTeamForm}
             onTeamsChange={this.handleTeamsChange}
           />
         </Col>
@@ -351,6 +352,7 @@ const SettingsPage = React.createClass({
               <p className='text-right'>
                 <a
                   style={settingsPage.sectionHeadingLink}
+                  id='addNewServer'
                   href='#'
                   onClick={this.toggleShowTeamForm}
                 >{'⊞ Add new team'}</a>

src/browser/components/TeamList.jsx

@@ -1,14 +1,15 @@
 const React = require('react');
 const {ListGroup} = require('react-bootstrap');
 const TeamListItem = require('./TeamListItem.jsx');
-const TeamListItemNew = require('./TeamListItemNew.jsx');
+const NewTeamModal = require('./NewTeamModal.jsx');
 const RemoveServerModal = require('./RemoveServerModal.jsx');
 
 const TeamList = React.createClass({
   propTypes: {
     onTeamsChange: React.PropTypes.func,
     showAddTeamForm: React.PropTypes.bool,
-    teams: React.PropTypes.array
+    teams: React.PropTypes.array,
+    toggleAddTeamForm: React.PropTypes.func
   },
 
   getInitialState() {
@@ -95,12 +96,17 @@ const TeamList = React.createClass({
     var addTeamForm;
     if (this.props.showAddTeamForm || this.state.showTeamListItemNew) {
       addTeamForm = (
-        <TeamListItemNew
-          key={this.state.team.index}
-          onTeamAdd={this.handleTeamAdd}
-          teamIndex={this.state.team.index}
-          teamName={this.state.team.name}
-          teamUrl={this.state.team.url}
+        <NewTeamModal
+          onClose={this.props.toggleAddTeamForm}
+          onSave={(newTeam) => {
+            this.setState({
+              showNewTeamModal: false
+            });
+            this.props.teams.push(newTeam);
+            this.render();
+
+            this.props.onTeamsChange(this.props.teams);
+          }}
         />);
     } else {
       addTeamForm = '';