diff options
author | David Lu <david.lu97@outlook.com> | 2016-08-15 11:10:31 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2016-08-15 11:10:31 -0400 |
commit | ef33f3fcd1fec2b3552293f6cdb8045dcc7d214d (patch) | |
tree | edf24fc65163a8abfeb73506d351605973918ac5 /webapp/components/integrations | |
parent | 5e6af8e970829f683f7d80034a8af7bb36644c17 (diff) | |
download | chat-ef33f3fcd1fec2b3552293f6cdb8045dcc7d214d.tar.gz chat-ef33f3fcd1fec2b3552293f6cdb8045dcc7d214d.tar.bz2 chat-ef33f3fcd1fec2b3552293f6cdb8045dcc7d214d.zip |
PLT-3005 Added confirmation screen to integrations (#3747)
Diffstat (limited to 'webapp/components/integrations')
6 files changed, 256 insertions, 12 deletions
diff --git a/webapp/components/integrations/components/add_command.jsx b/webapp/components/integrations/components/add_command.jsx index 300e55a70..55fe9e121 100644 --- a/webapp/components/integrations/components/add_command.jsx +++ b/webapp/components/integrations/components/add_command.jsx @@ -160,8 +160,8 @@ export default class AddCommand extends React.Component { AsyncClient.addCommand( command, - () => { - browserHistory.push('/' + this.props.team.name + '/integrations/commands'); + (data) => { + browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=commands&id=' + data.token); }, (err) => { this.setState({ @@ -313,7 +313,7 @@ export default class AddCommand extends React.Component { /> </Link> <FormattedMessage - id='add_command.header' + id='integrations.add' defaultMessage='Add' /> </BackstageHeader> diff --git a/webapp/components/integrations/components/add_incoming_webhook.jsx b/webapp/components/integrations/components/add_incoming_webhook.jsx index 4a3779aff..fa8a47a9c 100644 --- a/webapp/components/integrations/components/add_incoming_webhook.jsx +++ b/webapp/components/integrations/components/add_incoming_webhook.jsx @@ -73,8 +73,8 @@ export default class AddIncomingWebhook extends React.Component { AsyncClient.addIncomingHook( hook, - () => { - browserHistory.push('/' + this.props.team.name + '/integrations/incoming_webhooks'); + (data) => { + browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=incoming_webhooks&id=' + data.id); }, (err) => { this.setState({ @@ -114,7 +114,7 @@ export default class AddIncomingWebhook extends React.Component { /> </Link> <FormattedMessage - id='add_incoming_webhook.header' + id='integrations.add' defaultMessage='Add' /> </BackstageHeader> diff --git a/webapp/components/integrations/components/add_oauth_app.jsx b/webapp/components/integrations/components/add_oauth_app.jsx index 7e56aea8f..4c01c5af0 100644 --- a/webapp/components/integrations/components/add_oauth_app.jsx +++ b/webapp/components/integrations/components/add_oauth_app.jsx @@ -144,8 +144,8 @@ export default class AddOAuthApp extends React.Component { OAuthActions.registerOAuthApp( app, - () => { - browserHistory.push('/' + this.props.team.name + '/integrations/oauth2-apps'); + (data) => { + browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=oauth2-apps&id=' + data.id); }, (err) => { this.setState({ diff --git a/webapp/components/integrations/components/add_outgoing_webhook.jsx b/webapp/components/integrations/components/add_outgoing_webhook.jsx index 540b565cd..bf0d327ef 100644 --- a/webapp/components/integrations/components/add_outgoing_webhook.jsx +++ b/webapp/components/integrations/components/add_outgoing_webhook.jsx @@ -119,8 +119,8 @@ export default class AddOutgoingWebhook extends React.Component { AsyncClient.addOutgoingHook( hook, - () => { - browserHistory.push('/' + this.props.team.name + '/integrations/outgoing_webhooks'); + (data) => { + browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=outgoing_webhooks&id=' + data.token); }, (err) => { this.setState({ @@ -176,6 +176,7 @@ export default class AddOutgoingWebhook extends React.Component { render() { const contentTypeOption1 = 'application/x-www-form-urlencoded'; const contentTypeOption2 = 'application/json'; + return ( <div className='backstage-content'> <BackstageHeader> @@ -186,7 +187,7 @@ export default class AddOutgoingWebhook extends React.Component { /> </Link> <FormattedMessage - id='add_outgoing_webhook.header' + id='integrations.add' defaultMessage='Add' /> </BackstageHeader> diff --git a/webapp/components/integrations/components/confirm_integration.jsx b/webapp/components/integrations/components/confirm_integration.jsx new file mode 100644 index 000000000..96e24c575 --- /dev/null +++ b/webapp/components/integrations/components/confirm_integration.jsx @@ -0,0 +1,243 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import BackstageHeader from 'components/backstage/components/backstage_header.jsx'; +import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; +import {browserHistory, Link} from 'react-router/es6'; +import SpinnerButton from 'components/spinner_button.jsx'; + +import UserStore from 'stores/user_store.jsx'; +import IntegrationStore from 'stores/integration_store.jsx'; + +import Constants from 'utils/constants.jsx'; + +export default class ConfirmIntegration extends React.Component { + static get propTypes() { + return { + team: React.propTypes.object.isRequired, + location: React.PropTypes.object + }; + } + + constructor(props) { + super(props); + + this.handleDone = this.handleDone.bind(this); + + this.handleIntegrationChange = this.handleIntegrationChange.bind(this); + + const userId = UserStore.getCurrentId(); + + this.state = { + type: this.props.location.query.type, + id: this.props.location.query.id, + oauthApps: IntegrationStore.getOAuthApps(userId), + loading: !IntegrationStore.hasReceivedOAuthApps(userId) + }; + } + + componentDidMount() { + IntegrationStore.addChangeListener(this.handleIntegrationChange); + } + + componentWillUnmount() { + IntegrationStore.removeChangeListener(this.handleIntegrationChange); + } + + handleIntegrationChange() { + const userId = UserStore.getCurrentId(); + + this.setState({ + oauthApps: IntegrationStore.getOAuthApps(userId), + loading: !IntegrationStore.hasReceivedOAuthApps(userId) + }); + } + + handleDone() { + browserHistory.push('/' + this.props.team.name + '/integrations/' + this.state.type); + this.setState({ + id: '' + }); + } + + render() { + let headerText = null; + let helpText = null; + let tokenText = null; + if (this.state.type === Constants.Integrations.COMMAND) { + headerText = ( + <FormattedMessage + id={'installed_commands.header'} + defaultMessage='Slash Commands' + /> + ); + helpText = ( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_command.doneHelp' + defaultMessage='Your slash command has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href="https://docs.mattermost.com/developer/slash-commands.html">documentation</a> for further details).' + /> + </div> + ); + tokenText = ( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_command.token' + defaultMessage='<b>Token</b>: {token}' + values={{ + token: this.state.id + }} + /> + </div> + ); + } else if (this.state.type === Constants.Integrations.INCOMING_WEBHOOK) { + headerText = ( + <FormattedMessage + id={'installed_incoming_webhooks.header'} + defaultMessage='Incoming Webhooks' + /> + ); + helpText = ( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_incoming_webhook.doneHelp' + defaultMessage='Your incoming webhook has been set up. Please send data to the following URL (see <a href=\"https://docs.mattermost.com/developer/webhooks-incoming.html\">documentation</a> for further details).' + /> + </div> + ); + tokenText = ( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_incoming_webhook.url' + defaultMessage='<b>URL</b>: {url}' + values={{ + url: window.location.origin + '/hooks/' + this.state.id + }} + /> + </div> + ); + } else if (this.state.type === Constants.Integrations.OUTGOING_WEBHOOK) { + headerText = ( + <FormattedMessage + id={'installed_outgoing_webhooks.header'} + defaultMessage='Outgoing Webhooks' + /> + ); + helpText = ( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_outgoing_webhook.doneHelp' + defaultMessage='Your outgoing webhook has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href=\"https://docs.mattermost.com/developer/webhooks-outgoing.html\">documentation</a> for further details).' + /> + </div> + ); + tokenText = ( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_outgoing_webhook.token' + defaultMessage='<b>Token</b>: {token}' + values={{ + token: this.state.id + }} + /> + </div> + ); + } else if (this.state.type === Constants.Integrations.OAUTH_APP) { + let oauthApp = {}; + for (var i = 0; i < this.state.oauthApps.length; i++) { + if (this.state.oauthApps[i].id === this.state.id) { + oauthApp = this.state.oauthApps[i]; + break; + } + } + + if (oauthApp) { + headerText = ( + <FormattedMessage + id={'installed_oauth_apps.header'} + defaultMessage='OAuth 2.0 Applications' + /> + ); + + helpText = []; + helpText.push( + <div className='backstage-list__help'> + <FormattedMessage + id='add_oauth_app.doneHelp' + defaultMessage='Your OAuth 2.0 application has been set up. Please use the following Client ID and Client Secret when requesting authorization for your application.' + /> + </div> + ); + helpText.push( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_oauth_app.clientId' + defaultMessage='<b>Client ID:</b> {id}' + values={{ + id: this.state.id + }} + /> <br/> + <FormattedHTMLMessage + id='add_oauth_app.clientSecret' + defaultMessage='<b>Client Secret:</b> {secret}' + values={{ + secret: oauthApp.client_secret + }} + /> + </div> + ); + + helpText.push( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_oauth_app.doneUrlHelp' + defaultMessage='Please send data to the following URL.' + /> + </div> + ); + + tokenText = ( + <div className='backstage-list__help'> + <FormattedHTMLMessage + id='add_oauth_app.url' + defaultMessage='<b>URL(s)</b>: {url}' + values={{ + url: oauthApp.callback_urls + }} + /> + </div> + ); + } + } + + return ( + <div className='backstage-content row'> + <BackstageHeader> + <Link to={'/' + this.props.team.name + '/integrations/' + this.state.type}> + {headerText} + </Link> + <FormattedMessage + id='integrations.add' + defaultMessage='Add' + /> + </BackstageHeader> + {helpText} + {tokenText} + <div className='backstage-list__help'> + <SpinnerButton + className='btn btn-primary' + type='submit' + onClick={this.handleDone} + > + <FormattedMessage + id='integrations.done' + defaultMessage='Done' + /> + </SpinnerButton> + </div> + </div> + ); + } +} diff --git a/webapp/components/integrations/components/installed_incoming_webhook.jsx b/webapp/components/integrations/components/installed_incoming_webhook.jsx index 965ed2bc9..2b514d5ec 100644 --- a/webapp/components/integrations/components/installed_incoming_webhook.jsx +++ b/webapp/components/integrations/components/installed_incoming_webhook.jsx @@ -102,7 +102,7 @@ export default class InstalledIncomingWebhook extends React.Component { /> </span> </div> - <div className='tem-details__row'> + <div className='item-details__row'> <span className='item-details__creation'> <FormattedMessage id='installed_integrations.creation' |