PLT-3005 Added confirmation screen to integrations (#3747)

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'