From a6102e27d48d00fcc733c4d16754961903a239e0 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Sun, 31 Jan 2016 22:03:30 -0300
Subject: PLT-7: Refactoring frontend (chunk 8) - Sidebar and related
 components - Small Tweak to demotion and add msg for terminal cmd

---
 web/react/components/team_general_tab.jsx | 176 ++++++++++++++++++++++++------
 1 file changed, 143 insertions(+), 33 deletions(-)

(limited to 'web/react/components/team_general_tab.jsx')

diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx
index b6fb3389f..0656d3b03 100644
--- a/web/react/components/team_general_tab.jsx
+++ b/web/react/components/team_general_tab.jsx
@@ -8,7 +8,56 @@ import * as Client from '../utils/client.jsx';
 import * as Utils from '../utils/utils.jsx';
 import TeamStore from '../stores/team_store.jsx';
 
-export default class GeneralTab extends React.Component {
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    dirDisabled: {
+        id: 'general_tab.dirDisabled',
+        defaultMessage: 'Team Directory has been disabled.  Please ask a System Admin to enable the Team Directory in the System Console team settings.'
+    },
+    required: {
+        id: 'general_tab.required',
+        defaultMessage: 'This field is required'
+    },
+    chooseName: {
+        id: 'general_tab.chooseName',
+        defaultMessage: 'Please choose a new name for your team'
+    },
+    includeDirTitle: {
+        id: 'general_tab.includeDirTitle',
+        defaultMessage: 'Include this team in the Team Directory'
+    },
+    yes: {
+        id: 'general_tab.yes',
+        defaultMessage: 'Yes'
+    },
+    no: {
+        id: 'general_tab.no',
+        defaultMessage: 'No'
+    },
+    dirOff: {
+        id: 'general_tab.dirOff',
+        defaultMessage: 'Team directory is turned off for this system.'
+    },
+    openInviteTitle: {
+        id: 'general_tab.openInviteTitle',
+        defaultMessage: 'Allow anyone to sign-up from login page'
+    },
+    codeTitle: {
+        id: 'general_tab.codeTitle',
+        defaultMessage: 'Invite Code'
+    },
+    codeDesc: {
+        id: 'general_tab.codeDesc',
+        defaultMessage: "Click 'Edit' to regenerate Invite Code."
+    },
+    teamNameInfo: {
+        id: 'general_tab.teamNameInfo',
+        defaultMessage: 'Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.'
+    }
+});
+
+class GeneralTab extends React.Component {
     constructor(props) {
         super(props);
 
@@ -66,7 +115,7 @@ export default class GeneralTab extends React.Component {
 
     handleTeamListingRadio(listing) {
         if (global.window.mm_config.EnableTeamListing !== 'true' && listing) {
-            this.setState({clientError: 'Team Directory has been disabled.  Please ask a System Admin to enable the Team Directory in the System Console team settings.'});
+            this.setState({clientError: this.props.intl.formatMessage(holders.dirDisabled)});
         } else {
             this.setState({allow_team_listing: listing});
         }
@@ -118,12 +167,13 @@ export default class GeneralTab extends React.Component {
         var state = {serverError: '', clientError: ''};
         let valid = true;
 
+        const {formatMessage} = this.props.intl;
         const name = this.state.name.trim();
         if (!name) {
-            state.clientError = 'This field is required';
+            state.clientError = formatMessage(holders.required);
             valid = false;
         } else if (name === this.props.team.display_name) {
-            state.clientError = 'Please choose a new name for your team';
+            state.clientError = formatMessage(holders.chooseName);
             valid = false;
         } else {
             state.clientError = '';
@@ -160,7 +210,7 @@ export default class GeneralTab extends React.Component {
         if (inviteId) {
             state.clientError = '';
         } else {
-            state.clientError = 'This field is required';
+            state.clientError = this.props.intl.fromatMessage(holders.required);
             valid = false;
         }
 
@@ -260,6 +310,7 @@ export default class GeneralTab extends React.Component {
         }
 
         const enableTeamListing = global.window.mm_config.EnableTeamListing === 'true';
+        const {formatMessage} = this.props.intl;
 
         let teamListingSection;
         if (this.props.activeSection === 'team_listing') {
@@ -279,7 +330,10 @@ export default class GeneralTab extends React.Component {
                                     defaultChecked={this.state.allow_team_listing}
                                     onChange={this.handleTeamListingRadio.bind(this, true)}
                                 />
-                                {'Yes'}
+                                <FormattedMessage
+                                    id='general_tab.yes'
+                                    defaultMessage='Yes'
+                                />
                             </label>
                             <br/>
                         </div>
@@ -292,24 +346,39 @@ export default class GeneralTab extends React.Component {
                                     defaultChecked={!this.state.allow_team_listing}
                                     onChange={this.handleTeamListingRadio.bind(this, false)}
                                 />
-                                {'No'}
+                                <FormattedMessage
+                                    id='general_tab.no'
+                                    defaultMessage='No'
+                                />
                             </label>
                             <br/>
                         </div>
-                        <div><br/>{'Including this team will display the team name from the Team Directory section of the Home Page, and provide a link to the sign-in page.'}</div>
+                        <div>
+                            <br/>
+                            <FormattedMessage
+                                id='general_tab.includeDirDesc'
+                                defaultMessage='Including this team will display the team name from the Team Directory section of the Home Page, and provide a link to the sign-in page.'
+                            />
+                        </div>
                     </div>
                 );
             } else {
                 inputs.push(
                     <div key='userTeamListingOptions'>
-                        <div><br/>{'Contact your system administrator to turn on the team directory on the system home page.'}</div>
+                        <div>
+                            <br/>
+                            <FormattedMessage
+                                id='general_tab.dirContact'
+                                defaultMessage='Contact your system administrator to turn on the team directory on the system home page.'
+                            />
+                        </div>
                     </div>
                 );
             }
 
             teamListingSection = (
                 <SettingItemMax
-                    title='Include this team in the Team Directory'
+                    title={formatMessage(holders.includeDirTitle)}
                     inputs={inputs}
                     submit={submitHandle}
                     server_error={serverError}
@@ -322,17 +391,17 @@ export default class GeneralTab extends React.Component {
 
             if (enableTeamListing) {
                 if (this.state.allow_team_listing === true) {
-                    describe = 'Yes';
+                    describe = formatMessage(holders.yes);
                 } else {
-                    describe = 'No';
+                    describe = formatMessage(holders.no);
                 }
             } else {
-                describe = 'Team directory is turned off for this system.';
+                describe = formatMessage(holders.dirOff);
             }
 
             teamListingSection = (
                 <SettingItemMin
-                    title='Include this team in the Team Directory'
+                    title={formatMessage(holders.includeDirTitle)}
                     describe={describe}
                     updateSection={this.onUpdateTeamListingSection}
                 />
@@ -351,7 +420,10 @@ export default class GeneralTab extends React.Component {
                                 defaultChecked={this.state.allow_open_invite}
                                 onChange={this.handleOpenInviteRadio.bind(this, true)}
                             />
-                            {'Yes'}
+                            <FormattedMessage
+                                id='general_tab.yes'
+                                defaultMessage='Yes'
+                            />
                         </label>
                         <br/>
                     </div>
@@ -363,17 +435,26 @@ export default class GeneralTab extends React.Component {
                                 defaultChecked={!this.state.allow_open_invite}
                                 onChange={this.handleOpenInviteRadio.bind(this, false)}
                             />
-                            {'No'}
+                            <FormattedMessage
+                                id='general_tab.no'
+                                defaultMessage='No'
+                            />
                         </label>
                         <br/>
                     </div>
-                    <div><br/>{'When allowed, a link to account creation will be included on the sign-in page of this team and allow any visitor to sign-up.'}</div>
+                    <div>
+                        <br/>
+                        <FormattedMessage
+                            id='general_tab.openInviteDesc'
+                            defaultMessage='When allowed, a link to account creation will be included on the sign-in page of this team and allow any visitor to sign-up.'
+                        />
+                    </div>
                 </div>
             ];
 
             openInviteSection = (
                 <SettingItemMax
-                    title='Allow anyone to sign-up from login page'
+                    title={formatMessage(holders.openInviteTitle)}
                     inputs={inputs}
                     submit={this.handleOpenInviteSubmit}
                     server_error={serverError}
@@ -383,14 +464,14 @@ export default class GeneralTab extends React.Component {
         } else {
             let describe = '';
             if (this.state.allow_open_invite === true) {
-                describe = 'Yes';
+                describe = formatMessage(holders.yes);
             } else {
-                describe = 'No';
+                describe = formatMessage(holders.no);
             }
 
             openInviteSection = (
                 <SettingItemMin
-                    title='Allow anyone to sign-up from login page'
+                    title={formatMessage(holders.openInviteTitle)}
                     describe={describe}
                     updateSection={this.onUpdateOpenInviteSection}
                 />
@@ -405,7 +486,12 @@ export default class GeneralTab extends React.Component {
             inputs.push(
                 <div key='teamInviteSetting'>
                     <div className='row'>
-                        <label className='col-sm-5 control-label'>{'Invite Code'}</label>
+                        <label className='col-sm-5 control-label'>
+                            <FormattedMessage
+                                id='general_tab.codeTitle'
+                                defaultMessage='Invite Code'
+                            />
+                        </label>
                         <div className='col-sm-7'>
                             <input
                                 className='form-control'
@@ -419,18 +505,26 @@ export default class GeneralTab extends React.Component {
                                     href='#'
                                     onClick={this.handleGenerateInviteId}
                                 >
-                                    {'Re-Generate'}
+                                    <FormattedMessage
+                                        id='general_tab.regenerate'
+                                        defaultMessage='Re-Generate'
+                                    />
                                 </a>
                             </div>
                         </div>
                     </div>
-                    <div className='setting-list__hint'>{'The Invite Code is used as part of the URL in the team invitation link created by **Get Team Invite Link** in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.'}</div>
+                    <div className='setting-list__hint'>
+                        <FormattedMessage
+                            id='general_tab.codeLongDesc'
+                            defaultMessage='The Invite Code is used as part of the URL in the team invitation link created by **Get Team Invite Link** in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.'
+                        />
+                    </div>
                 </div>
             );
 
             inviteSection = (
                 <SettingItemMax
-                    title={`Invite Code`}
+                    title={formatMessage(holders.codeTitle)}
                     inputs={inputs}
                     submit={this.handleInviteIdSubmit}
                     server_error={serverError}
@@ -441,8 +535,8 @@ export default class GeneralTab extends React.Component {
         } else {
             inviteSection = (
                 <SettingItemMin
-                    title={`Invite Code`}
-                    describe={`Click 'Edit' to regenerate Invite Code.`}
+                    title={formatMessage(holders.codeTitle)}
+                    describe={formatMessage(holders.codeDesc)}
                     updateSection={this.onUpdateInviteIdSection}
                 />
             );
@@ -453,7 +547,12 @@ export default class GeneralTab extends React.Component {
         if (this.props.activeSection === 'name') {
             const inputs = [];
 
-            let teamNameLabel = 'Team Name';
+            let teamNameLabel = (
+                <FormattedMessage
+                    id='general_tab.teamName'
+                    defaultMessage='Team Name'
+                />
+            );
             if (Utils.isMobile()) {
                 teamNameLabel = '';
             }
@@ -478,13 +577,13 @@ export default class GeneralTab extends React.Component {
 
             nameSection = (
                 <SettingItemMax
-                    title={`Team Name`}
+                    title={formatMessage({id: 'general_tab.teamName'})}
                     inputs={inputs}
                     submit={this.handleNameSubmit}
                     server_error={serverError}
                     client_error={clientError}
                     updateSection={this.onUpdateNameSection}
-                    extraInfo='Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.'
+                    extraInfo={formatMessage(holders.teamNameInfo)}
                 />
             );
         } else {
@@ -492,7 +591,7 @@ export default class GeneralTab extends React.Component {
 
             nameSection = (
                 <SettingItemMin
-                    title={`Team Name`}
+                    title={formatMessage({id: 'general_tab.teamName'})}
                     describe={describe}
                     updateSection={this.onUpdateNameSection}
                 />
@@ -515,14 +614,22 @@ export default class GeneralTab extends React.Component {
                         ref='title'
                     >
                         <i className='modal-back'></i>
-                        {'General Settings'}
+                        <FormattedMessage
+                            id='general_tab.title'
+                            defaultMessage='General Settings'
+                        />
                     </h4>
                 </div>
                 <div
                     ref='wrapper'
                     className='user-settings'
                 >
-                    <h3 className='tab-header'>{'General Settings'}</h3>
+                    <h3 className='tab-header'>
+                        <FormattedMessage
+                            id='general_tab.title'
+                            defaultMessage='General Settings'
+                        />
+                    </h3>
                     <div className='divider-dark first'/>
                     {nameSection}
                     <div className='divider-light'/>
@@ -539,7 +646,10 @@ export default class GeneralTab extends React.Component {
 }
 
 GeneralTab.propTypes = {
+    intl: intlShape.isRequired,
     updateSection: React.PropTypes.func.isRequired,
     team: React.PropTypes.object.isRequired,
     activeSection: React.PropTypes.string.isRequired
 };
+
+export default injectIntl(GeneralTab);
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22

