PLT-7: Refactoring frontend (chunk 8)

- Sidebar and related components
- Small Tweak to demotion and add msg for terminal cmd
Этот коммит содержится в:
Elias Nahum
2016-01-31 22:03:30 -03:00
родитель 4a214cdaa2
Коммит a6102e27d4
23 изменённых файлов: 1307 добавлений и 224 удалений

Просмотреть файл

@@ -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);