diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/backstage/add_command.jsx | 509 | ||||
-rw-r--r-- | webapp/components/backstage/add_integration.jsx | 22 | ||||
-rw-r--r-- | webapp/components/backstage/backstage_sidebar.jsx | 9 | ||||
-rw-r--r-- | webapp/components/backstage/installed_command.jsx | 97 | ||||
-rw-r--r-- | webapp/components/backstage/installed_incoming_webhook.jsx | 10 | ||||
-rw-r--r-- | webapp/components/backstage/installed_integrations.jsx | 104 | ||||
-rw-r--r-- | webapp/components/user_settings/manage_command_hooks.jsx | 681 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings.jsx | 15 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_integrations.jsx | 126 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_modal.jsx | 17 |
10 files changed, 740 insertions, 850 deletions
diff --git a/webapp/components/backstage/add_command.jsx b/webapp/components/backstage/add_command.jsx new file mode 100644 index 000000000..93ff66271 --- /dev/null +++ b/webapp/components/backstage/add_command.jsx @@ -0,0 +1,509 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import * as AsyncClient from 'utils/async_client.jsx'; +import {browserHistory} from 'react-router'; +import * as Utils from 'utils/utils.jsx'; + +import {FormattedMessage} from 'react-intl'; +import FormError from 'components/form_error.jsx'; +import {Link} from 'react-router'; +import SpinnerButton from 'components/spinner_button.jsx'; + +const REQUEST_POST = 'P'; +const REQUEST_GET = 'G'; + +export default class AddCommand extends React.Component { + constructor(props) { + super(props); + + this.handleSubmit = this.handleSubmit.bind(this); + + this.updateDisplayName = this.updateDisplayName.bind(this); + this.updateDescription = this.updateDescription.bind(this); + this.updateTrigger = this.updateTrigger.bind(this); + this.updateUrl = this.updateUrl.bind(this); + this.updateMethod = this.updateMethod.bind(this); + this.updateUsername = this.updateUsername.bind(this); + this.updateIconUrl = this.updateIconUrl.bind(this); + this.updateAutocomplete = this.updateAutocomplete.bind(this); + this.updateAutocompleteHint = this.updateAutocompleteHint.bind(this); + this.updateAutocompleteDescription = this.updateAutocompleteDescription.bind(this); + + this.state = { + displayName: '', + description: '', + trigger: '', + url: '', + method: REQUEST_POST, + username: '', + iconUrl: '', + autocomplete: false, + autocompleteHint: '', + autocompleteDescription: '', + saving: false, + serverError: '', + clientError: null + }; + } + + handleSubmit(e) { + e.preventDefault(); + + if (this.state.saving) { + return; + } + + this.setState({ + saving: true, + serverError: '', + clientError: '' + }); + + const command = { + display_name: this.state.displayName, + description: this.state.description, + trigger: this.state.trigger.trim(), + url: this.state.url.trim(), + method: this.state.method, + username: this.state.username, + icon_url: this.state.iconUrl, + auto_complete: this.state.autocomplete + }; + + if (command.auto_complete) { + command.auto_complete_desc = this.state.autocompleteDescription; + command.auto_complete_hint = this.state.autocompleteHint; + } + + if (!command.trigger) { + this.setState({ + saving: false, + clientError: ( + <FormattedMessage + id='add_command.triggerRequired' + defaultMessage='A trigger word is required' + /> + ) + }); + } + + if (!command.url) { + this.setState({ + saving: false, + clientError: ( + <FormattedMessage + id='add_command.urlRequired' + defaultMessage='A request URL is required' + /> + ) + }); + } + + AsyncClient.addCommand( + command, + () => { + browserHistory.push('/settings/integrations/installed'); + }, + (err) => { + this.setState({ + saving: false, + serverError: err.message + }); + } + ); + } + + updateDisplayName(e) { + this.setState({ + displayName: e.target.value + }); + } + + updateDescription(e) { + this.setState({ + description: e.target.value + }); + } + + updateTrigger(e) { + this.setState({ + trigger: e.target.value + }); + } + + updateUrl(e) { + this.setState({ + url: e.target.value + }); + } + + updateMethod(e) { + this.setState({ + method: e.target.value + }); + } + + updateUsername(e) { + this.setState({ + username: e.target.value + }); + } + + updateIconUrl(e) { + this.setState({ + iconUrl: e.target.value + }); + } + + updateAutocomplete(e) { + this.setState({ + autocomplete: e.target.checked + }); + } + + updateAutocompleteHint(e) { + this.setState({ + autocompleteHint: e.target.value + }); + } + + updateAutocompleteDescription(e) { + this.setState({ + autocompleteDescription: e.target.value + }); + } + + render() { + let autocompleteFields = null; + if (this.state.autocomplete) { + autocompleteFields = [( + <div + key='autocompleteHint' + className='form-group' + > + <label + className='control-label col-sm-3' + htmlFor='autocompleteHint' + > + <FormattedMessage + id='add_command.autocompleteHint' + defaultMessage='Autocomplete Hint' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='autocompleteHint' + type='text' + maxLength='1024' + className='form-control' + value={this.state.autocompleteHint} + onChange={this.updateAutocompleteHint} + placeholder={Utils.localizeMessage('add_command.autocompleteHint.placeholder', 'Example: [Patient Name]')} + /> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.autocompleteDescription.help' + defaultMessage='Optional hint in the autocomplete list about command parameters' + /> + </div> + </div> + </div> + ), + ( + <div + key='autocompleteDescription' + className='form-group' + > + <label + className='control-label col-sm-3' + htmlFor='autocompleteDescription' + > + <FormattedMessage + id='add_command.autocompleteDescription' + defaultMessage='Autocomplete Description' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='description' + type='text' + maxLength='128' + className='form-control' + value={this.state.autocompleteDescription} + onChange={this.updateAutocompleteDescription} + placeholder={Utils.localizeMessage('add_command.autocompleteDescription.placeholder', 'Example: "Returns search results for patient records"')} + /> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.autocompleteDescription.help' + defaultMessage='Optional short description of slash command for the autocomplete list.' + /> + </div> + </div> + </div> + )]; + } + + return ( + <div className='backstage-content row'> + <div className='add-command'> + <div className='backstage-header'> + <h1> + <FormattedMessage + id='add_command.header' + defaultMessage='Add Slash Command' + /> + </h1> + </div> + </div> + <div className='backstage-form'> + <form className='form-horizontal'> + <div className='form-group'> + <label + className='control-label col-sm-3' + htmlFor='displayName' + > + <FormattedMessage + id='add_command.displayName' + defaultMessage='Display Name' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='displayName' + type='text' + maxLength='64' + className='form-control' + value={this.state.displayName} + onChange={this.updateDisplayName} + /> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-3' + htmlFor='description' + > + <FormattedMessage + id='add_command.description' + defaultMessage='Description' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='description' + type='text' + maxLength='128' + className='form-control' + value={this.state.description} + onChange={this.updateDescription} + /> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-3' + htmlFor='trigger' + > + <FormattedMessage + id='add_command.trigger' + defaultMessage='Command Trigger Word' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='trigger' + type='text' + maxLength='128' + className='form-control' + value={this.state.trigger} + onChange={this.updateTrigger} + placeholder={Utils.localizeMessage('add_command.trigger.placeholder', 'Command trigger e.g. "hello" not including the slash')} + /> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.trigger.help1' + defaultMessage='Examples: /patient, /client /employee' + /> + </div> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.trigger.help2' + defaultMessage='Reserved: /echo, /join, /logout, /me, /shrug' + /> + </div> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-3' + htmlFor='url' + > + <FormattedMessage + id='add_command.url' + defaultMessage='Request URL' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='url' + type='text' + maxLength='1024' + className='form-control' + value={this.state.url} + onChange={this.updateUrl} + placeholder={Utils.localizeMessage('add_command.url.placeholder', 'Must start with http:// or https://')} + /> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.url.help' + defaultMessage='The callback URL to receive the HTTP POST or GET event request when the slash command is run.' + /> + </div> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-3' + htmlFor='method' + > + <FormattedMessage + id='add_command.method' + defaultMessage='Request Method' + /> + </label> + <div className='col-md-5 col-sm-9'> + <select + id='method' + className='form-control' + value={this.state.method} + onChange={this.updateMethod} + > + <option value={REQUEST_POST}> + {Utils.localizeMessage('add_command.method.post', 'POST')} + </option> + <option value={REQUEST_GET}> + {Utils.localizeMessage('add_command.method.get', 'GET')} + </option> + </select> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.method.help' + defaultMessage='The type of command request issued to the Request URL.' + /> + </div> + </div> + </div> + <div className='form-group'> + <label + className='control-lavel col-sm-3' + htmlFor='username' + > + <FormattedMessage + id='add_command.username' + defaultMessage='Response Username' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='username' + type='text' + maxLength='64' + className='form-control' + value={this.state.username} + onChange={this.updateUsername} + placholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')} + /> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.username.help' + defaultMessage='Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and the symbols "-", "_", and ".".' + /> + </div> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-3' + htmlFor='iconUrl' + > + <FormattedMessage + id='add_command.iconUrl' + defaultMessage='Response Icon' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + id='iconUrl' + type='text' + maxLength='1024' + className='form-control' + value={this.state.iconUrl} + onChange={this.updateIconUrl} + placeholder={Utils.localizeMessage('add_command.iconUrl.placeholder', 'https://www.example.com/myicon.png')} + /> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.iconUrl.help' + defaultMessage='Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.' + /> + </div> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-3' + htmlFor='autocomplete' + > + <FormattedMessage + id='add_command.autocomplete' + defaultMessage='Autocomplete' + /> + </label> + <div className='col-md-5 col-sm-9'> + <input + type='checkbox' + checked={this.state.autocomplete} + onChange={this.updateAutocomplete} + /> + <div className='add-integration__help'> + <FormattedMessage + id='add_command.autocomplete.help' + defaultMessage='Show this command in the autocomplete list' + /> + </div> + </div> + </div> + {autocompleteFields} + <div className='backstage-form__footer'> + <FormError errors={[this.state.serverError, this.state.clientError]}/> + <Link + className='btn btn-sm' + to={'/settings/integrations/add'} + > + <FormattedMessage + id='add_command.cancel' + defaultMessage='Cancel' + /> + </Link> + <SpinnerButton + className='btn btn-primary' + type='submit' + spinning={this.state.saving} + onClick={this.handleSubmit} + > + <FormattedMessage + id='add_command.save' + defaultMessage='Save' + /> + </SpinnerButton> + </div> + </form> + </div> + </div> + ); + } +} diff --git a/webapp/components/backstage/add_integration.jsx b/webapp/components/backstage/add_integration.jsx index 5f4a69bfe..0ab36e101 100644 --- a/webapp/components/backstage/add_integration.jsx +++ b/webapp/components/backstage/add_integration.jsx @@ -56,6 +56,28 @@ export default class AddIntegration extends React.Component { ); } + if (window.mm_config.EnableCommands === 'true') { + options.push( + <AddIntegrationOption + key='command' + image={WebhookIcon} + title={ + <FormattedMessage + id='add_integration.command.title' + defaultMessage='Slash Command' + /> + } + description={ + <FormattedMessage + id='add_integration.command.description' + defaultMessage='Create slash commands to send events to external integrations and receive a response.' + /> + } + link={'/settings/integrations/add/command'} + /> + ); + } + return ( <div className='backstage-content row'> <div className='backstage-header'> diff --git a/webapp/components/backstage/backstage_sidebar.jsx b/webapp/components/backstage/backstage_sidebar.jsx index 13c4f8b50..172119b32 100644 --- a/webapp/components/backstage/backstage_sidebar.jsx +++ b/webapp/components/backstage/backstage_sidebar.jsx @@ -59,6 +59,15 @@ export default class BackstageSidebar extends React.Component { /> )} /> + <BackstageSection + name='command' + title={( + <FormattedMessage + id='backstage_sidebar.integrations.add.command' + defaultMessage='Slash Command' + /> + )} + /> </BackstageSection> </BackstageCategory> </ul> diff --git a/webapp/components/backstage/installed_command.jsx b/webapp/components/backstage/installed_command.jsx new file mode 100644 index 000000000..51adce160 --- /dev/null +++ b/webapp/components/backstage/installed_command.jsx @@ -0,0 +1,97 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import * as Utils from 'utils/utils.jsx'; + +import {FormattedMessage} from 'react-intl'; + +export default class InstalledCommand extends React.Component { + static get propTypes() { + return { + command: React.PropTypes.object.isRequired, + onRegenToken: React.PropTypes.func.isRequired, + onDelete: React.PropTypes.func.isRequired + }; + } + + constructor(props) { + super(props); + + this.handleRegenToken = this.handleRegenToken.bind(this); + this.handleDelete = this.handleDelete.bind(this); + } + + handleRegenToken(e) { + e.preventDefault(); + + this.props.onRegenToken(this.props.command); + } + + handleDelete(e) { + e.preventDefault(); + + this.props.onDelete(this.props.command); + } + + render() { + const command = this.props.command; + + return ( + <div className='backstage-list__item'> + <div className='item-details'> + <div className='item-details__row'> + <span className='item-details__name'> + {command.display_name} + </span> + <span className='item-details__type'> + <FormattedMessage + id='installed_integrations.commandType' + defaultMessage='(Slash Command)' + /> + </span> + </div> + <div className='item-details__row'> + <span className='item-details__description'> + {command.description} + </span> + </div> + <div className='item-details__row'> + <span className='item-details__creation'> + <FormattedMessage + id='installed_integrations.creation' + defaultMessage='Created by {creator} on {createAt, date, full}' + values={{ + creator: Utils.displayUsername(command.creator_Id), + createAt: command.create_at + }} + /> + </span> + </div> + </div> + <div className='item-actions'> + <a + href='#' + onClick={this.handleRegenToken} + > + <FormattedMessage + id='installed_integrations.regenToken' + defaultMessage='Regen Token' + /> + </a> + {' - '} + <a + href='#' + onClick={this.handleDelete} + > + <FormattedMessage + id='installed_integrations.delete' + defaultMessage='Delete' + /> + </a> + </div> + </div> + ); + } +} diff --git a/webapp/components/backstage/installed_incoming_webhook.jsx b/webapp/components/backstage/installed_incoming_webhook.jsx index 95a303edc..cd9a6d761 100644 --- a/webapp/components/backstage/installed_incoming_webhook.jsx +++ b/webapp/components/backstage/installed_incoming_webhook.jsx @@ -12,20 +12,20 @@ export default class InstalledIncomingWebhook extends React.Component { static get propTypes() { return { incomingWebhook: React.PropTypes.object.isRequired, - onDeleteClick: React.PropTypes.func.isRequired + onDelete: React.PropTypes.func.isRequired }; } constructor(props) { super(props); - this.handleDeleteClick = this.handleDeleteClick.bind(this); + this.handleDelete = this.handleDelete.bind(this); } - handleDeleteClick(e) { + handleDelete(e) { e.preventDefault(); - this.props.onDeleteClick(this.props.incomingWebhook); + this.props.onDelete(this.props.incomingWebhook); } render() { @@ -69,7 +69,7 @@ export default class InstalledIncomingWebhook extends React.Component { <div className='item-actions'> <a href='#' - onClick={this.handleDeleteClick} + onClick={this.handleDelete} > <FormattedMessage id='installed_integrations.delete' diff --git a/webapp/components/backstage/installed_integrations.jsx b/webapp/components/backstage/installed_integrations.jsx index fe84ae81a..e353b7f29 100644 --- a/webapp/components/backstage/installed_integrations.jsx +++ b/webapp/components/backstage/installed_integrations.jsx @@ -11,6 +11,7 @@ import * as Utils from 'utils/utils.jsx'; import {FormattedMessage} from 'react-intl'; import InstalledIncomingWebhook from './installed_incoming_webhook.jsx'; import InstalledOutgoingWebhook from './installed_outgoing_webhook.jsx'; +import InstalledCommand from './installed_command.jsx'; import {Link} from 'react-router'; export default class InstalledIntegrations extends React.Component { @@ -24,10 +25,13 @@ export default class InstalledIntegrations extends React.Component { this.deleteIncomingWebhook = this.deleteIncomingWebhook.bind(this); this.regenOutgoingWebhookToken = this.regenOutgoingWebhookToken.bind(this); this.deleteOutgoingWebhook = this.deleteOutgoingWebhook.bind(this); + this.regenCommandToken = this.regenCommandToken.bind(this); + this.deleteCommand = this.deleteCommand.bind(this); this.state = { incomingWebhooks: [], outgoingWebhooks: [], + commands: [], typeFilter: '', filter: '' }; @@ -55,6 +59,16 @@ export default class InstalledIntegrations extends React.Component { AsyncClient.listOutgoingHooks(); } } + + if (window.mm_config.EnableCommands === 'true') { + if (IntegrationStore.hasReceivedCommands()) { + this.setState({ + commands: IntegrationStore.getCommands() + }); + } else { + AsyncClient.listTeamCommands(); + } + } } componentWillUnmount() { @@ -62,10 +76,24 @@ export default class InstalledIntegrations extends React.Component { } handleIntegrationChange() { + const incomingWebhooks = IntegrationStore.getIncomingWebhooks(); + const outgoingWebhooks = IntegrationStore.getOutgoingWebhooks(); + const commands = IntegrationStore.getCommands(); + this.setState({ - incomingWebhooks: IntegrationStore.getIncomingWebhooks(), - outgoingWebhooks: IntegrationStore.getOutgoingWebhooks() + incomingWebhooks, + outgoingWebhooks, + commands }); + + // reset the type filter if we were viewing a category that is now empty + if ((this.state.typeFilter === 'incomingWebhooks' && incomingWebhooks.length === 0) || + (this.state.typeFilter === 'outgoingWebhooks' && outgoingWebhooks.length === 0) || + (this.state.typeFilter === 'commands' && commands.length === 0)) { + this.setState({ + typeFilter: '' + }); + } } updateTypeFilter(e, typeFilter) { @@ -94,10 +122,18 @@ export default class InstalledIntegrations extends React.Component { AsyncClient.deleteOutgoingHook(outgoingWebhook.id); } - renderTypeFilters(incomingWebhooks, outgoingWebhooks) { + regenCommandToken(command) { + AsyncClient.regenCommandToken(command.id); + } + + deleteCommand(command) { + AsyncClient.deleteCommand(command.id); + } + + renderTypeFilters(incomingWebhooks, outgoingWebhooks, commands) { const fields = []; - if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0) { + if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0 || commands.length > 0) { let filterClassName = 'filter-sort'; if (this.state.typeFilter === '') { filterClassName += ' filter-sort--active'; @@ -187,6 +223,39 @@ export default class InstalledIntegrations extends React.Component { ); } + if (commands.length > 0) { + fields.push( + <span + key='commandsDivider' + className='divider' + > + {'|'} + </span> + ); + + let filterClassName = 'filter-sort'; + if (this.state.typeFilter === 'commands') { + filterClassName += ' filter-sort--active'; + } + + fields.push( + <a + key='commandsFilter' + className={filterClassName} + href='#' + onClick={(e) => this.updateTypeFilter(e, 'commands')} + > + <FormattedMessage + id='installed_integrations.commandsFilter' + defaultMessage='Slash Commands ({count})' + values={{ + count: commands.length + }} + /> + </a> + ); + } + return ( <div className='backstage-filters__sort'> {fields} @@ -197,7 +266,9 @@ export default class InstalledIntegrations extends React.Component { render() { const incomingWebhooks = this.state.incomingWebhooks; const outgoingWebhooks = this.state.outgoingWebhooks; + const commands = this.state.commands; + // TODO description, name, creator filtering const filter = this.state.filter.toLowerCase(); const integrations = []; @@ -215,7 +286,7 @@ export default class InstalledIntegrations extends React.Component { <InstalledIncomingWebhook key={incomingWebhook.id} incomingWebhook={incomingWebhook} - onDeleteClick={this.deleteIncomingWebhook} + onDelete={this.deleteIncomingWebhook} /> ); } @@ -242,6 +313,27 @@ export default class InstalledIntegrations extends React.Component { } } + if (!this.state.typeFilter || this.state.typeFilter === 'commands') { + for (const command of commands) { + if (filter) { + const channel = ChannelStore.get(command.channel_id); + + if (!channel || channel.name.toLowerCase().indexOf(filter) === -1) { + continue; + } + } + + integrations.push( + <InstalledCommand + key={command.id} + command={command} + onRegenToken={this.regenCommandToken} + onDelete={this.deleteCommand} + /> + ); + } + } + return ( <div className='backstage-content row'> <div className='installed-integrations'> @@ -270,7 +362,7 @@ export default class InstalledIntegrations extends React.Component { </Link> </div> <div className='backstage-filters'> - {this.renderTypeFilters(this.state.incomingWebhooks, this.state.outgoingWebhooks)} + {this.renderTypeFilters(incomingWebhooks, outgoingWebhooks, commands)} <div className='backstage-filter__search'> <i className='fa fa-search'></i> <input diff --git a/webapp/components/user_settings/manage_command_hooks.jsx b/webapp/components/user_settings/manage_command_hooks.jsx deleted file mode 100644 index ce353ad64..000000000 --- a/webapp/components/user_settings/manage_command_hooks.jsx +++ /dev/null @@ -1,681 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import LoadingScreen from '../loading_screen.jsx'; - -import * as Client from 'utils/client.jsx'; - -import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-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: 'Example: "Search patient records"' - }, - 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: 'Example: "Returns search results for patient records"' - }, - addAutoCompleteHintPlaceholder: { - id: 'user.settings.cmds.auto_complete_hint.placeholder', - defaultMessage: 'Example: [Patient Name]' - }, - adUrlPlaceholder: { - id: 'user.settings.cmds.url.placeholder', - defaultMessage: 'Must start with http:// or https://' - }, - autocompleteYes: { - id: 'user.settings.cmds.auto_complete.yes', - defaultMessage: 'yes' - }, - autocompleteNo: { - id: 'user.settings.cmds.auto_complete.no', - defaultMessage: 'no' - } -}); - -import React from 'react'; - -export default class ManageCommandCmds extends React.Component { - constructor() { - super(); - - this.getCmds = this.getCmds.bind(this); - this.addNewCmd = this.addNewCmd.bind(this); - this.emptyCmd = this.emptyCmd.bind(this); - this.updateTrigger = this.updateTrigger.bind(this); - this.updateURL = this.updateURL.bind(this); - this.updateMethod = this.updateMethod.bind(this); - this.updateUsername = this.updateUsername.bind(this); - this.updateIconURL = this.updateIconURL.bind(this); - this.updateDisplayName = this.updateDisplayName.bind(this); - this.updateAutoComplete = this.updateAutoComplete.bind(this); - this.updateAutoCompleteDesc = this.updateAutoCompleteDesc.bind(this); - this.updateAutoCompleteHint = this.updateAutoCompleteHint.bind(this); - - this.state = {cmds: [], cmd: this.emptyCmd(), getCmdsComplete: false}; - } - - static propTypes() { - return { - intl: intlShape.isRequired - }; - } - - emptyCmd() { - var cmd = {}; - cmd.url = ''; - cmd.trigger = ''; - cmd.method = 'P'; - cmd.username = ''; - cmd.icon_url = ''; - cmd.auto_complete = false; - cmd.auto_complete_desc = ''; - cmd.auto_complete_hint = ''; - cmd.display_name = ''; - return cmd; - } - - componentDidMount() { - this.getCmds(); - } - - addNewCmd(e) { - e.preventDefault(); - - if (this.state.cmd.trigger === '' || this.state.cmd.url === '') { - return; - } - - var cmd = this.state.cmd; - if (cmd.trigger.length !== 0) { - cmd.trigger = cmd.trigger.trim(); - } - cmd.url = cmd.url.trim(); - - Client.addCommand( - cmd, - (data) => { - let cmds = Object.assign([], this.state.cmds); - if (!cmds) { - cmds = []; - } - cmds.push(data); - this.setState({cmds, addError: null, cmd: this.emptyCmd()}); - }, - (err) => { - this.setState({addError: err.message}); - } - ); - } - - removeCmd(id) { - const data = {}; - data.id = id; - - Client.deleteCommand( - data, - () => { - const cmds = this.state.cmds; - let index = -1; - for (let i = 0; i < cmds.length; i++) { - if (cmds[i].id === id) { - index = i; - break; - } - } - - if (index !== -1) { - cmds.splice(index, 1); - } - - this.setState({cmds}); - }, - (err) => { - this.setState({editError: err.message}); - } - ); - } - - regenToken(id) { - const regenData = {}; - regenData.id = id; - - Client.regenCommandToken( - regenData, - (data) => { - const cmds = Object.assign([], this.state.cmds); - for (let i = 0; i < cmds.length; i++) { - if (cmds[i].id === id) { - cmds[i] = data; - break; - } - } - - this.setState({cmds, editError: null}); - }, - (err) => { - this.setState({editError: err.message}); - } - ); - } - - getCmds() { - Client.listTeamCommands( - (data) => { - if (data) { - this.setState({cmds: data, getCmdsComplete: true, editError: null}); - } - }, - (err) => { - this.setState({editError: err.message}); - } - ); - } - - updateTrigger(e) { - var cmd = this.state.cmd; - cmd.trigger = e.target.value; - this.setState(cmd); - } - - updateURL(e) { - var cmd = this.state.cmd; - cmd.url = e.target.value; - this.setState(cmd); - } - - updateMethod(e) { - var cmd = this.state.cmd; - cmd.method = e.target.value; - this.setState(cmd); - } - - updateUsername(e) { - var cmd = this.state.cmd; - cmd.username = e.target.value; - this.setState(cmd); - } - - updateIconURL(e) { - var cmd = this.state.cmd; - cmd.icon_url = e.target.value; - this.setState(cmd); - } - - updateDisplayName(e) { - var cmd = this.state.cmd; - cmd.display_name = e.target.value; - this.setState(cmd); - } - - updateAutoComplete(e) { - var cmd = this.state.cmd; - cmd.auto_complete = e.target.checked; - this.setState(cmd); - } - - updateAutoCompleteDesc(e) { - var cmd = this.state.cmd; - cmd.auto_complete_desc = e.target.value; - this.setState(cmd); - } - - updateAutoCompleteHint(e) { - var cmd = this.state.cmd; - cmd.auto_complete_hint = e.target.value; - this.setState(cmd); - } - - render() { - let addError; - if (this.state.addError) { - addError = <label className='has-error'>{this.state.addError}</label>; - } - - let editError; - if (this.state.editError) { - addError = <label className='has-error'>{this.state.editError}</label>; - } - - const cmds = []; - this.state.cmds.forEach((cmd) => { - let triggerDiv; - if (cmd.trigger && cmd.trigger.length !== 0) { - triggerDiv = ( - <div className='padding-top x2'> - <strong> - <FormattedMessage - id='user.settings.cmds.trigger' - defaultMessage='Command Trigger Word: ' - /> - </strong>{cmd.trigger} - </div> - ); - } - - cmds.push( - <div - key={cmd.id} - className='webhook__item webcmd__item' - > - {triggerDiv} - <div className='padding-top x2 webcmd__url'> - <strong> - <FormattedMessage - id='user.settings.cmds.url' - defaultMessage='Request URL: ' - /> - </strong><span className='word-break--all'>{cmd.url}</span> - </div> - <div className='padding-top x2'> - <strong> - <FormattedMessage - id='user.settings.cmds.request_type' - defaultMessage='Request Method: ' - /> - </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'> - <strong> - <FormattedMessage - id='user.settings.cmds.username' - defaultMessage='Response Username: ' - /> - </strong><span className='word-break--all'>{cmd.username}</span> - </div> - <div className='padding-top x2'> - <strong> - <FormattedMessage - id='user.settings.cmds.icon_url' - defaultMessage='Response Icon: ' - /> - </strong><span className='word-break--all'>{cmd.icon_url}</span> - </div> - <div className='padding-top x2'> - <strong> - <FormattedMessage - id='user.settings.cmds.auto_complete' - defaultMessage='Autocomplete: ' - /> - </strong><span className='word-break--all'>{cmd.auto_complete ? this.props.intl.formatMessage(holders.autocompleteYes) : this.props.intl.formatMessage(holders.autocompleteNo)}</span> - </div> - <div className='padding-top x2'> - <strong> - <FormattedMessage - id='user.settings.cmds.auto_complete_hint' - defaultMessage='Autocomplete Hint: ' - /> - </strong><span className='word-break--all'>{cmd.auto_complete_hint}</span> - </div> - <div className='padding-top x2'> - <strong> - <FormattedMessage - id='user.settings.cmds.auto_complete_desc' - defaultMessage='Autocomplete Description: ' - /> - </strong><span className='word-break--all'>{cmd.auto_complete_desc}</span> - </div> - <div className='padding-top x2'> - <strong> - <FormattedMessage - id='user.settings.cmds.display_name' - defaultMessage='Descriptive Label: ' - /> - </strong><span className='word-break--all'>{cmd.display_name}</span> - </div> - <div className='padding-top'> - <strong> - <FormattedMessage - id='user.settings.cmds.token' - defaultMessage='Token: ' - /> - </strong>{cmd.token} - </div> - <div className='padding-top'> - <a - className='text-danger' - href='#' - onClick={this.regenToken.bind(this, cmd.id)} - > - <FormattedMessage - id='user.settings.cmds.regen' - defaultMessage='Regen Token' - /> - </a> - <a - className='webhook__remove webcmd__remove' - href='#' - onClick={this.removeCmd.bind(this, cmd.id)} - > - <span aria-hidden='true'>{'×'}</span> - </a> - </div> - <div className='padding-top x2 divider-light'></div> - </div> - ); - }); - - let displayCmds; - if (!this.state.getCmdsComplete) { - displayCmds = <LoadingScreen/>; - } else if (cmds.length > 0) { - displayCmds = cmds; - } else { - displayCmds = ( - <div className='padding-top x2'> - <FormattedMessage - id='user.settings.cmds.none' - defaultMessage='None' - /> - </div> - ); - } - - const existingCmds = ( - <div className='webhooks__container webcmds__container'> - <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='webhooks__list webcmds__list'> - {displayCmds} - </div> - </div> - ); - - const disableButton = this.state.cmd.trigger === '' || this.state.cmd.url === ''; - - return ( - <div key='addCommandCmd'> - <FormattedHTMLMessage - id='user.settings.cmds.add_desc' - defaultMessage='Create slash commands to send events to external integrations and receive a response. For example typing `/patient Joe Smith` could bring back search results from your internal health records management system for the name “Joe Smith”. Please see <a href="http://docs.mattermost.com/developer/slash-commands.html">Slash commands documentation</a> for detailed instructions. View all slash commands configured on this team below.' - /> - <div><label className='control-label padding-top x2'> - <FormattedMessage - id='user.settings.cmds.add_new' - defaultMessage='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'> - <FormattedMessage - id='user.settings.cmds.trigger' - defaultMessage='Command Trigger Word: ' - /> - </label> - <div className='padding-top'> - <input - ref='trigger' - className='form-control' - value={this.state.cmd.trigger} - onChange={this.updateTrigger} - placeholder={this.props.intl.formatMessage(holders.addTriggerPlaceholder)} - /> - </div> - <div className='padding-top'> - <FormattedMessage - id='user.settings.cmds.trigger_desc' - defaultMessage='Examples: /patient, /client, /employee Reserved: /echo, /join, /logout, /me, /shrug' - /> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.url' - defaultMessage='Request URL: ' - /> - </label> - <div className='padding-top'> - <input - ref='URL' - className='form-control' - value={this.state.cmd.url} - rows={1} - onChange={this.updateURL} - placeholder={this.props.intl.formatMessage(holders.adUrlPlaceholder)} - /> - </div> - <div className='padding-top'> - <FormattedMessage - id='user.settings.cmds.url_desc' - defaultMessage='The callback URL to receive the HTTP POST or GET event request when the slash command is run.' - /> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.request_type' - defaultMessage='Request Method: ' - /> - </label> - <div className='padding-top'> - <select - ref='method' - className='form-control' - value={this.state.cmd.method} - onChange={this.updateMethod} - > - <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'> - <FormattedMessage - id='user.settings.cmds.request_type_desc' - defaultMessage='The type of command request issued to the Request URL.' - /> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.username' - defaultMessage='Response Username: ' - /> - </label> - <div className='padding-top'> - <input - ref='username' - className='form-control' - value={this.state.cmd.username} - onChange={this.updateUsername} - placeholder={this.props.intl.formatMessage(holders.addUsernamePlaceholder)} - /> - </div> - <div className='padding-top'> - <FormattedMessage - id='user.settings.cmds.username_desc' - defaultMessage='Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and they symbols "-", "_", and "." .' - /> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.icon_url' - defaultMessage='Response Icon: ' - /> - </label> - <div className='padding-top'> - <input - ref='iconURL' - className='form-control' - value={this.state.cmd.icon_url} - onChange={this.updateIconURL} - placeholder='https://www.example.com/myicon.png' - /> - </div> - <div className='padding-top'> - <FormattedMessage - id='user.settings.cmds.icon_url_desc' - defaultMessage='Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.' - /> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.auto_complete' - defaultMessage='Autocomplete: ' - /> - </label> - <div className='padding-top'> - <div className='checkbox'> - <label> - <input - type='checkbox' - checked={this.state.cmd.auto_complete} - onChange={this.updateAutoComplete} - /> - <FormattedMessage - id='user.settings.cmds.auto_complete_help' - defaultMessage=' Show this command in the autocomplete list.' - /> - </label> - </div> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.auto_complete_hint' - defaultMessage='Autocomplete Hint: ' - /> - </label> - <div className='padding-top'> - <input - ref='autoCompleteHint' - className='form-control' - value={this.state.cmd.auto_complete_hint} - onChange={this.updateAutoCompleteHint} - placeholder={this.props.intl.formatMessage(holders.addAutoCompleteHintPlaceholder)} - /> - </div> - <div className='padding-top'> - <FormattedMessage - id='user.settings.cmds.auto_complete_hint_desc' - defaultMessage='Optional hint in the autocomplete list about parameters needed for command.' - /> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.auto_complete_desc' - defaultMessage='Autocomplete Description: ' - /> - </label> - <div className='padding-top'> - <input - ref='autoCompleteDesc' - className='form-control' - value={this.state.cmd.auto_complete_desc} - onChange={this.updateAutoCompleteDesc} - placeholder={this.props.intl.formatMessage(holders.addAutoCompleteDescPlaceholder)} - /> - </div> - <div className='padding-top'> - <FormattedMessage - id='user.settings.cmds.auto_complete_desc_desc' - defaultMessage='Optional short description of slash command for the autocomplete list.' - /> - </div> - </div> - - <div className='padding-top x2'> - <label className='control-label'> - <FormattedMessage - id='user.settings.cmds.display_name' - defaultMessage='Descriptive Label: ' - /> - </label> - <div className='padding-top'> - <input - ref='displayName' - className='form-control' - value={this.state.cmd.display_name} - onChange={this.updateDisplayName} - placeholder={this.props.intl.formatMessage(holders.addDisplayNamePlaceholder)} - /> - </div> - <div className='padding-top'> - <FormattedMessage - id='user.settings.cmds.cmd_display_name' - defaultMessage='Brief description of slash command to show in listings.' - /> - </div> - {addError} - </div> - - <div className='padding-top x2 padding-bottom'> - <a - className={'btn btn-sm btn-primary'} - href='#' - disabled={disableButton} - onClick={this.addNewCmd} - > - <FormattedMessage - id='user.settings.cmds.add' - defaultMessage='Add' - /> - </a> - </div> - </div> - {existingCmds} - {editError} - </div> - ); - } -} - -export default injectIntl(ManageCommandCmds); diff --git a/webapp/components/user_settings/user_settings.jsx b/webapp/components/user_settings/user_settings.jsx index 904232da9..d89298cfb 100644 --- a/webapp/components/user_settings/user_settings.jsx +++ b/webapp/components/user_settings/user_settings.jsx @@ -7,7 +7,6 @@ import NotificationsTab from './user_settings_notifications.jsx'; import SecurityTab from './user_settings_security.jsx'; import GeneralTab from './user_settings_general.jsx'; import DeveloperTab from './user_settings_developer.jsx'; -import IntegrationsTab from './user_settings_integrations.jsx'; import DisplayTab from './user_settings_display.jsx'; import AdvancedTab from './user_settings_advanced.jsx'; @@ -98,20 +97,6 @@ export default class UserSettings extends React.Component { /> </div> ); - } else if (this.props.activeTab === 'integrations') { - return ( - <div> - <IntegrationsTab - ref='activeTab' - user={this.state.user} - activeSection={this.props.activeSection} - updateSection={this.props.updateSection} - updateTab={this.props.updateTab} - closeModal={this.props.closeModal} - collapseModal={this.props.collapseModal} - /> - </div> - ); } else if (this.props.activeTab === 'display') { return ( <div> diff --git a/webapp/components/user_settings/user_settings_integrations.jsx b/webapp/components/user_settings/user_settings_integrations.jsx deleted file mode 100644 index 37081b863..000000000 --- a/webapp/components/user_settings/user_settings_integrations.jsx +++ /dev/null @@ -1,126 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import $ from 'jquery'; -import SettingItemMin from '../setting_item_min.jsx'; -import SettingItemMax from '../setting_item_max.jsx'; -import ManageCommandHooks from './manage_command_hooks.jsx'; - -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; - -const holders = defineMessages({ - cmdName: { - id: 'user.settings.integrations.commands', - defaultMessage: 'Slash Commands' - }, - cmdDesc: { - id: 'user.settings.integrations.commandsDescription', - defaultMessage: 'Manage your slash commands' - } -}); - -import React from 'react'; - -class UserSettingsIntegrationsTab extends React.Component { - constructor(props) { - super(props); - - this.updateSection = this.updateSection.bind(this); - - this.state = {}; - } - updateSection(section) { - $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); - this.props.updateSection(section); - } - render() { - let commandHooksSection; - var inputs = []; - const {formatMessage} = this.props.intl; - - if (global.window.mm_config.EnableCommands === 'true') { - if (this.props.activeSection === 'command-hooks') { - inputs.push( - <ManageCommandHooks key='command-hook-ui'/> - ); - - commandHooksSection = ( - <SettingItemMax - title={formatMessage(holders.cmdName)} - width='medium' - inputs={inputs} - updateSection={(e) => { - this.updateSection(''); - e.preventDefault(); - }} - /> - ); - } else { - commandHooksSection = ( - <SettingItemMin - title={formatMessage(holders.cmdName)} - width='medium' - describe={formatMessage(holders.cmdDesc)} - updateSection={() => { - this.updateSection('command-hooks'); - }} - /> - ); - } - } - - return ( - <div> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' - aria-label='Close' - onClick={this.props.closeModal} - > - <span aria-hidden='true'>{'×'}</span> - </button> - <h4 - className='modal-title' - ref='title' - > - <div className='modal-back'> - <i - className='fa fa-angle-left' - onClick={this.props.collapseModal} - /> - </div> - <FormattedMessage - id='user.settings.integrations.title' - defaultMessage='Integration Settings' - /> - </h4> - </div> - <div className='user-settings'> - <h3 className='tab-header'> - <FormattedMessage - id='user.settings.integrations.title' - defaultMessage='Integration Settings' - /> - </h3> - <div className='divider-dark first'/> - {commandHooksSection} - <div className='divider-dark'/> - </div> - </div> - ); - } -} - -UserSettingsIntegrationsTab.propTypes = { - intl: intlShape.isRequired, - user: React.PropTypes.object, - updateSection: React.PropTypes.func, - updateTab: React.PropTypes.func, - activeSection: React.PropTypes.string, - closeModal: React.PropTypes.func.isRequired, - collapseModal: React.PropTypes.func.isRequired -}; - -export default injectIntl(UserSettingsIntegrationsTab); diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx index b71547baf..43fb728bd 100644 --- a/webapp/components/user_settings/user_settings_modal.jsx +++ b/webapp/components/user_settings/user_settings_modal.jsx @@ -31,10 +31,6 @@ const holders = defineMessages({ id: 'user.settings.modal.developer', defaultMessage: 'Developer' }, - integrations: { - id: 'user.settings.modal.integrations', - defaultMessage: 'Integrations' - }, display: { id: 'user.settings.modal.display', defaultMessage: 'Display' @@ -227,7 +223,6 @@ class UserSettingsModal extends React.Component { if (this.state.currentUser == null) { return (<div/>); } - var isAdmin = Utils.isAdmin(this.state.currentUser.roles); var tabs = []; tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'}); @@ -237,18 +232,6 @@ class UserSettingsModal extends React.Component { tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'}); } - if (global.window.mm_config.EnableIncomingWebhooks === 'true' || global.window.mm_config.EnableOutgoingWebhooks === 'true' || global.window.mm_config.EnableCommands === 'true') { - var show = global.window.mm_config.EnableOnlyAdminIntegrations !== 'true'; - - if (global.window.mm_config.EnableOnlyAdminIntegrations === 'true' && isAdmin) { - show = true; - } - - if (show) { - tabs.push({name: 'integrations', uiName: formatMessage(holders.integrations), icon: 'glyphicon glyphicon-transfer'}); - } - } - tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'}); tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'}); |