diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/user_settings/manage_command_hooks.jsx | 306 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_integrations.jsx | 14 |
2 files changed, 269 insertions, 51 deletions
diff --git a/web/react/components/user_settings/manage_command_hooks.jsx b/web/react/components/user_settings/manage_command_hooks.jsx index 1fb3bf599..bcf0a6c82 100644 --- a/web/react/components/user_settings/manage_command_hooks.jsx +++ b/web/react/components/user_settings/manage_command_hooks.jsx @@ -5,6 +5,43 @@ import LoadingScreen from '../loading_screen.jsx'; import * as Client from '../../utils/client.jsx'; +import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl'; + +const holders = defineMessages({ + requestTypePost: { + id: 'user.settings.cmds.request_type_post', + defaultMessage: 'POST' + }, + requestTypeGet: { + id: 'user.settings.cmds.request_type_get', + defaultMessage: 'GET' + }, + addDisplayNamePlaceholder: { + id: 'user.settings.cmds.add_display_name.placeholder', + defaultMessage: 'Display Name' + }, + addUsernamePlaceholder: { + id: 'user.settings.cmds.add_username.placeholder', + defaultMessage: 'Username' + }, + addTriggerPlaceholder: { + id: 'user.settings.cmds.add_trigger.placeholder', + defaultMessage: 'Command trigger e.g. "hello" not including the slash' + }, + addAutoCompleteDescPlaceholder: { + id: 'user.settings.cmds.auto_complete_desc.placeholder', + defaultMessage: 'A short description of what this commands does.' + }, + addAutoCompleteHintPlaceholder: { + id: 'user.settings.cmds.auto_complete_hint.placeholder', + defaultMessage: '[zipcode]' + }, + adUrlPlaceholder: { + id: 'user.settings.cmds.url.placeholder', + defaultMessage: 'Must start with http:// or https://' + } +}); + export default class ManageCommandCmds extends React.Component { constructor() { super(); @@ -25,6 +62,12 @@ export default class ManageCommandCmds extends React.Component { this.state = {cmds: [], cmd: this.emptyCmd(), getCmdsComplete: false}; } + static propTypes() { + return { + intl: intlShape.isRequired + }; + } + emptyCmd() { var cmd = {}; cmd.url = ''; @@ -207,7 +250,12 @@ export default class ManageCommandCmds extends React.Component { if (cmd.trigger && cmd.trigger.length !== 0) { triggerDiv = ( <div className='padding-top'> - <strong>{'Trigger: '}</strong>{cmd.trigger} + <strong> + <FormattedMessage + id='user.settings.cmds.trigger' + defaultMessage='Trigger: ' + /> + </strong>{cmd.trigger} </div> ); } @@ -218,32 +266,90 @@ export default class ManageCommandCmds extends React.Component { className='webcmd__item' > <div className='padding-top x2'> - <strong>{'Display Name: '}</strong><span className='word-break--all'>{cmd.display_name}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.display_name' + defaultMessage='Display Name: ' + /> + </strong><span className='word-break--all'>{cmd.display_name}</span> </div> <div className='padding-top x2'> - <strong>{'Username: '}</strong><span className='word-break--all'>{cmd.username}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.username' + defaultMessage='Username: ' + /> + </strong><span className='word-break--all'>{cmd.username}</span> </div> <div className='padding-top x2'> - <strong>{'Icon URL: '}</strong><span className='word-break--all'>{cmd.icon_url}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.icon_url' + defaultMessage='Icon URL: ' + /> + </strong><span className='word-break--all'>{cmd.icon_url}</span> </div> <div className='padding-top x2'> - <strong>{'Auto Complete: '}</strong><span className='word-break--all'>{cmd.auto_complete ? 'yes' : 'no'}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.auto_complete' + defaultMessage='Auto Complete: ' + /> + </strong><span className='word-break--all'>{cmd.auto_complete ? 'yes' : 'no'}</span> </div> <div className='padding-top x2'> - <strong>{'Auto Complete Description: '}</strong><span className='word-break--all'>{cmd.auto_complete_desc}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.auto_complete_desc' + defaultMessage='Auto Complete Description: ' + /> + </strong><span className='word-break--all'>{cmd.auto_complete_desc}</span> </div> <div className='padding-top x2'> - <strong>{'Auto Complete Hint: '}</strong><span className='word-break--all'>{cmd.auto_complete_hint}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.auto_complete_hint' + defaultMessage='Auto Complete Hint: ' + /> + </strong><span className='word-break--all'>{cmd.auto_complete_hint}</span> </div> <div className='padding-top x2'> - <strong>{'Request Type: '}</strong><span className='word-break--all'>{cmd.method === 'P' ? 'POST' : 'GET'}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.request_type' + defaultMessage='Request Type: ' + /> + </strong> + <span className='word-break--all'> + { + cmd.method === 'P' ? + <FormattedMessage + id='user.settings.cmds.request_type_post' + defaultMessage='POST' + /> : + <FormattedMessage + id='user.settings.cmds.request_type_get' + defaultMessage='GET' + /> + } + </span> </div> <div className='padding-top x2 webcmd__url'> - <strong>{'URL: '}</strong><span className='word-break--all'>{cmd.url}</span> + <strong> + <FormattedMessage + id='user.settings.cmds.url' + defaultMessage='URL: ' + /> + </strong><span className='word-break--all'>{cmd.url}</span> </div> {triggerDiv} <div className='padding-top'> - <strong>{'Token: '}</strong>{cmd.token} + <strong> + <FormattedMessage + id='user.settings.cmds.token' + defaultMessage='Token: ' + /> + </strong>{cmd.token} </div> <div className='padding-top'> <a @@ -251,7 +357,10 @@ export default class ManageCommandCmds extends React.Component { href='#' onClick={this.regenToken.bind(this, cmd.id)} > - {'Regen Token'} + <FormattedMessage + id='user.settings.cmds.regen' + defaultMessage='Regen Token' + /> </a> <a className='webcmd__remove' @@ -272,12 +381,24 @@ export default class ManageCommandCmds extends React.Component { } else if (cmds.length > 0) { displayCmds = cmds; } else { - displayCmds = <div className='padding-top x2'>{'None'}</div>; + displayCmds = ( + <div className='padding-top x2'> + <FormattedMessage + id='user.settings.cmds.none' + defaultMessage='None' + /> + </div> + ); } const existingCmds = ( <div className='webcmds__container'> - <label className='control-label padding-top x2'>{'Existing commands'}</label> + <label className='control-label padding-top x2'> + <FormattedMessage + id='user.settings.cmds.existing' + defaultMessage='Existing commands' + /> + </label> <div className='padding-top divider-light'></div> <div className='webcmds__list'> {displayCmds} @@ -289,45 +410,61 @@ export default class ManageCommandCmds extends React.Component { return ( <div key='addCommandCmd'> - {'Create commands to send new message events to an external integration. Please see '} - <a - href='http://mattermost.org/commands' - target='_blank' - > - {'http://mattermost.org/commands'} - </a> - {' to learn more.'} + <FormattedHTMLMessage + id='user.settings.cmds.add_desc' + defaultMessage='Create commands to send message events to an external integration. Please see <a href="http://mattermost.org/commands">http://mattermost.org/commands</a> to learn more.' + /> <div><label className='control-label padding-top x2'>{'Add a new command'}</label></div> <div className='padding-top divider-light'></div> <div className='padding-top'> <div className='padding-top x2'> - <label className='control-label'>{'Display Name:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.display_name' + defaultMessage='Display Name: ' + /> + </label> <div className='padding-top'> <input ref='displayName' className='form-control' value={this.state.cmd.display_name} onChange={this.updateDisplayName} - placeholder='Display Name' + placeholder={this.props.intl.formatMessage(holders.addDisplayNamePlaceholder)} /> </div> <div className='padding-top'>{'Command display name.'}</div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Username:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.username' + defaultMessage='Username: ' + /> + </label> <div className='padding-top'> <input ref='username' className='form-control' value={this.state.cmd.username} onChange={this.updateUsername} - placeholder='Username' + placeholder={this.props.intl.formatMessage(holders.addUsernamePlaceholder)} + /> + </div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.username_desc' + defaultMessage='The username to use when overriding the post.' /> </div> - <div className='padding-top'>{'The username to use when overriding the post.'}</div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Icon URL:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.icon_url' + defaultMessage='Icon URL: ' + /> + </label> <div className='padding-top'> <input ref='iconURL' @@ -337,24 +474,43 @@ export default class ManageCommandCmds extends React.Component { placeholder='https://www.example.com/myicon.png' /> </div> - <div className='padding-top'>{'URL to an icon'}</div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.icon_url_desc' + defaultMessage='URL to an icon' + /> + </div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Trigger:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.trigger' + defaultMessage='Trigger: ' + /> + </label> <div className='padding-top'> - {'/'} <input ref='trigger' className='form-control' value={this.state.cmd.trigger} onChange={this.updateTrigger} - placeholder='Command trigger e.g. "hello" not including the slash' + placeholder={this.props.intl.formatMessage(holders.addTriggerPlaceholder)} /> </div> - <div className='padding-top'>{'Word to trigger on'}</div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.trigger_desc' + defaultMessage='Word to trigger on' + /> + {''}</div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Autocomplete:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.auto_complete' + defaultMessage='Auto Complete: ' + /> + </label> <div className='padding-top'> <label> <input @@ -362,39 +518,72 @@ export default class ManageCommandCmds extends React.Component { checked={this.state.cmd.auto_complete} onChange={this.updateAutoComplete} /> - {'A short description of what this commands does'} + <FormattedMessage + id='user.settings.cmds.auto_complete_desc_desc' + defaultMessage='A short description of what this commands does' + /> </label> </div> - <div className='padding-top'>{'Show this command in autocomplete list.'}</div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.auto_complete_help' + defaultMessage='Show this command in autocomplete list.' + /> + </div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Autocomplete Description:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.auto_complete_desc' + defaultMessage='Auto Complete Description: ' + /> + </label> <div className='padding-top'> <input ref='autoCompleteDesc' className='form-control' value={this.state.cmd.auto_complete_desc} onChange={this.updateAutoCompleteDesc} - placeholder='A short description of what this commands does.' + placeholder={this.props.intl.formatMessage(holders.addAutoCompleteDescPlaceholder)} + /> + </div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.auto_complete_desc_desc' + defaultMessage='A short description of what this commands does' /> </div> - <div className='padding-top'>{'A short description of what this commands does.'}</div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Autocomplete Hint:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.auto_complete_hint' + defaultMessage='Auto Complete Hint: ' + /> + </label> <div className='padding-top'> <input ref='autoCompleteHint' className='form-control' value={this.state.cmd.auto_complete_hint} onChange={this.updateAutoCompleteHint} - placeholder='[zipcode]' + placeholder={this.props.intl.formatMessage(holders.addAutoCompleteHintPlaceholder)} + /> + </div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.auto_complete_hint_desc' + defaultMessage='List parameters to be passed to the command.' /> </div> - <div className='padding-top'>{'List parameters to be passed to the command.'}</div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Request Type:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.request_type' + defaultMessage='Request Type: ' + /> + </label> <div className='padding-top'> <select ref='method' @@ -402,14 +591,28 @@ export default class ManageCommandCmds extends React.Component { value={this.state.cmd.method} onChange={this.updateMethod} > - <option value='P'>{'POST'}</option> - <option value='G'>{'GET'}</option> + <option value='P'> + {this.props.intl.formatMessage(holders.requestTypePost)} + </option> + <option value='G'> + {this.props.intl.formatMessage(holders.requestTypeGet)} + </option> </select> </div> - <div className='padding-top'>{'Command request type issued to the callback URL.'}</div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.request_type_desc' + defaultMessage='Command request type issued to the callback URL.' + /> + </div> </div> <div className='padding-top x2'> - <label className='control-label'>{'Callback URL:'}</label> + <label className='control-label'> + <FormattedMessage + id='user.settings.cmds.url' + defaultMessage='URL: ' + /> + </label> <div className='padding-top'> <input ref='URL' @@ -417,10 +620,15 @@ export default class ManageCommandCmds extends React.Component { value={this.state.cmd.url} rows={1} onChange={this.updateURL} - placeholder='Must start with http:// or https://' + placeholder={this.props.intl.formatMessage(holders.adUrlPlaceholder)} /> </div> - <div className='padding-top'>{'URL that will receive the HTTP POST or GET event'}</div> + <div className='padding-top'> + <FormattedMessage + id='user.settings.cmds.url_desc' + defaultMessage='URL that will receive the HTTP POST or GET event' + /> + </div> {addError} </div> <div className='padding-top padding-bottom'> @@ -440,3 +648,5 @@ export default class ManageCommandCmds extends React.Component { ); } } + +export default injectIntl(ManageCommandCmds); diff --git a/web/react/components/user_settings/user_settings_integrations.jsx b/web/react/components/user_settings/user_settings_integrations.jsx index cd9903878..1a9edab03 100644 --- a/web/react/components/user_settings/user_settings_integrations.jsx +++ b/web/react/components/user_settings/user_settings_integrations.jsx @@ -25,6 +25,14 @@ const holders = defineMessages({ outDesc: { id: 'user.settings.integrations.outWebhooksDescription', defaultMessage: 'Manage your outgoing webhooks' + }, + cmdName: { + id: 'user.settings.integrations.commands', + defaultMessage: 'Commands' + }, + cmdDesc: { + id: 'user.settings.integrations.commandsDescription', + defaultMessage: 'Manage your commands' } }); @@ -116,7 +124,7 @@ class UserSettingsIntegrationsTab extends React.Component { commandHooksSection = ( <SettingItemMax - title='Commands' + title={formatMessage(holders.cmdName)} width='medium' inputs={inputs} updateSection={(e) => { @@ -128,9 +136,9 @@ class UserSettingsIntegrationsTab extends React.Component { } else { commandHooksSection = ( <SettingItemMin - title='Commands' + title={formatMessage(holders.cmdName)} width='medium' - describe='Manage your commands' + describe={formatMessage(holders.cmdDesc)} updateSection={() => { this.updateSection('command-hooks'); }} |