Implement incoming webhooks.

2015-09-21 14:22:23 -04:00
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -0,0 +1,177 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var Client = require('../../utils/client.jsx');
+var Utils = require('../../utils/utils.jsx');
+var Constants = require('../../utils/constants.jsx');
+var ChannelStore = require('../../stores/channel_store.jsx');
+var LoadingScreen = require('../loading_screen.jsx');
+
+export default class ManageIncomingHooks extends React.Component {
+    constructor() {
+        super();
+
+        this.getHooks = this.getHooks.bind(this);
+        this.addNewHook = this.addNewHook.bind(this);
+        this.updateChannelId = this.updateChannelId.bind(this);
+
+        this.state = {hooks: [], channelId: ChannelStore.getByName(Constants.DEFAULT_CHANNEL).id, getHooksComplete: false};
+    }
+    componentDidMount() {
+        this.getHooks();
+    }
+    addNewHook() {
+        let hook = {}; //eslint-disable-line prefer-const
+        hook.channel_id = this.state.channelId;
+
+        Client.addIncomingHook(
+            hook,
+            (data) => {
+                let hooks = this.state.hooks;
+                if (!hooks) {
+                    hooks = [];
+                }
+                hooks.push(data);
+                this.setState({hooks});
+            },
+            (err) => {
+                this.setState({serverError: err});
+            }
+        );
+    }
+    removeHook(id) {
+        let data = {}; //eslint-disable-line prefer-const
+        data.id = id;
+
+        Client.deleteIncomingHook(
+            data,
+            () => {
+                let hooks = this.state.hooks; //eslint-disable-line prefer-const
+                let index = -1;
+                for (let i = 0; i < hooks.length; i++) {
+                    if (hooks[i].id === id) {
+                        index = i;
+                        break;
+                    }
+                }
+
+                if (index !== -1) {
+                    hooks.splice(index, 1);
+                }
+
+                this.setState({hooks});
+            },
+            (err) => {
+                this.setState({serverError: err});
+            }
+        );
+    }
+    getHooks() {
+        Client.listIncomingHooks(
+            (data) => {
+                let state = this.state; //eslint-disable-line prefer-const
+
+                if (data) {
+                    state.hooks = data;
+                }
+
+                state.getHooksComplete = true;
+                this.setState(state);
+            },
+            (err) => {
+                this.setState({serverError: err});
+            }
+        );
+    }
+    updateChannelId(e) {
+        this.setState({channelId: e.target.value});
+    }
+    render() {
+        let serverError;
+        if (this.state.serverError) {
+            serverError = <label className='has-error'>{this.state.serverError}</label>;
+        }
+
+        const channels = ChannelStore.getAll();
+        let options = []; //eslint-disable-line prefer-const
+        channels.forEach((channel) => {
+            options.push(<option value={channel.id}>{channel.name}</option>);
+        });
+
+        let disableButton = '';
+        if (this.state.channelId === '') {
+            disableButton = ' disable';
+        }
+
+        let hooks = []; //eslint-disable-line prefer-const
+        this.state.hooks.forEach((hook) => {
+            const c = ChannelStore.get(hook.channel_id);
+            hooks.push(
+                <div>
+                    <div className='divider-light'></div>
+                    <span>
+                        <strong>{'URL: '}</strong>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}
+                    </span>
+                    <br/>
+                    <span>
+                        <strong>{'Channel: '}</strong>{c.name}
+                    </span>
+                    <br/>
+                    <a
+                        className={'btn btn-sm btn-primary'}
+                        href='#'
+                        onClick={this.removeHook.bind(this, hook.id)}
+                    >
+                        {'Remove'}
+                    </a>
+                </div>
+            );
+        });
+
+        let displayHooks;
+        if (!this.state.getHooksComplete) {
+            displayHooks = <LoadingScreen/>;
+        } else if (hooks.length > 0) {
+            displayHooks = hooks;
+        } else {
+            displayHooks = <label>{'None'}</label>;
+        }
+
+        const existingHooks = (
+            <div>
+                <label className='control-label'>{'Existing incoming webhooks'}</label>
+                <br/>
+                {displayHooks}
+            </div>
+        );
+
+        return (
+            <div
+                key='addIncomingHook'
+                className='form-group'
+            >
+                <label className='control-label'>{'Add a new incoming webhook'}</label>
+                <br/>
+                <div>
+                    <select
+                        ref='channelName'
+                        value={this.state.channelId}
+                        onChange={this.updateChannelId}
+                    >
+                        {options}
+                    </select>
+                    <br/>
+                    {serverError}
+                    <a
+                        className={'btn btn-sm btn-primary' + disableButton}
+                        href='#'
+                        onClick={this.addNewHook}
+                    >
+                        {'Add'}
+                    </a>
+                </div>
+                {existingHooks}
+            </div>
+        );
+    }
+}
--- a/web/react/components/user_settings/user_settings.jsx
+++ b/web/react/components/user_settings/user_settings.jsx
@@ -1,13 +1,14 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-var UserStore = require('../stores/user_store.jsx');
-var utils = require('../utils/utils.jsx');
+var UserStore = require('../../stores/user_store.jsx');
+var utils = require('../../utils/utils.jsx');
 var NotificationsTab = require('./user_settings_notifications.jsx');
 var SecurityTab = require('./user_settings_security.jsx');
 var GeneralTab = require('./user_settings_general.jsx');
 var AppearanceTab = require('./user_settings_appearance.jsx');
 var DeveloperTab = require('./user_settings_developer.jsx');
+var IntegrationsTab = require('./user_settings_integrations.jsx');

 export default class UserSettings extends React.Component {
    constructor(props) {
@@ -86,6 +87,17 @@ export default class UserSettings extends React.Component {
                    />
                </div>
            );
+        } else if (this.props.activeTab === 'integrations') {
+            return (
+                <div>
+                    <IntegrationsTab
+                        user={this.state.user}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
+                    />
+                </div>
+            );
        }

        return <div/>;
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -1,11 +1,11 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-var UserStore = require('../stores/user_store.jsx');
-var SettingItemMin = require('./setting_item_min.jsx');
-var SettingItemMax = require('./setting_item_max.jsx');
-var Client = require('../utils/client.jsx');
-var Utils = require('../utils/utils.jsx');
+var UserStore = require('../../stores/user_store.jsx');
+var SettingItemMin = require('../setting_item_min.jsx');
+var SettingItemMax = require('../setting_item_max.jsx');
+var Client = require('../../utils/client.jsx');
+var Utils = require('../../utils/utils.jsx');

 var ThemeColors = ['#2389d7', '#008a17', '#dc4fad', '#ac193d', '#0072c6', '#d24726', '#ff8f32', '#82ba00', '#03b3b2', '#008299', '#4617b4', '#8c0095', '#004b8b', '#004b8b', '#570000', '#380000', '#585858', '#000000'];

--- a/web/react/components/user_settings/user_settings_developer.jsx
+++ b/web/react/components/user_settings/user_settings_developer.jsx
@@ -1,8 +1,8 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-var SettingItemMin = require('./setting_item_min.jsx');
-var SettingItemMax = require('./setting_item_max.jsx');
+var SettingItemMin = require('../setting_item_min.jsx');
+var SettingItemMax = require('../setting_item_max.jsx');

 export default class DeveloperTab extends React.Component {
    constructor(props) {
--- a/web/react/components/user_settings/user_settings_general.jsx
+++ b/web/react/components/user_settings/user_settings_general.jsx
@@ -1,13 +1,13 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-var UserStore = require('../stores/user_store.jsx');
-var SettingItemMin = require('./setting_item_min.jsx');
-var SettingItemMax = require('./setting_item_max.jsx');
-var SettingPicture = require('./setting_picture.jsx');
-var client = require('../utils/client.jsx');
-var AsyncClient = require('../utils/async_client.jsx');
-var utils = require('../utils/utils.jsx');
+var UserStore = require('../../stores/user_store.jsx');
+var SettingItemMin = require('../setting_item_min.jsx');
+var SettingItemMax = require('../setting_item_max.jsx');
+var SettingPicture = require('../setting_picture.jsx');
+var client = require('../../utils/client.jsx');
+var AsyncClient = require('../../utils/async_client.jsx');
+var utils = require('../../utils/utils.jsx');
 var assign = require('object-assign');

 export default class UserSettingsGeneralTab extends React.Component {
--- a/web/react/components/user_settings/user_settings_integrations.jsx
+++ b/web/react/components/user_settings/user_settings_integrations.jsx
@@ -0,0 +1,95 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var SettingItemMin = require('../setting_item_min.jsx');
+var SettingItemMax = require('../setting_item_max.jsx');
+var ManageIncomingHooks = require('./manage_incoming_hooks.jsx');
+
+export default class UserSettingsIntegrationsTab extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.updateSection = this.updateSection.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+
+        this.state = {};
+    }
+    updateSection(section) {
+        this.props.updateSection(section);
+    }
+    handleClose() {
+        this.updateSection('');
+    }
+    componentDidMount() {
+        $('#user_settings').on('hidden.bs.modal', this.handleClose);
+    }
+    componentWillUnmount() {
+        $('#user_settings').off('hidden.bs.modal', this.handleClose);
+    }
+    render() {
+        let incomingHooksSection;
+        var inputs = [];
+
+        if (this.props.activeSection === 'incoming-hooks') {
+            inputs.push(
+                <ManageIncomingHooks />
+            );
+
+            incomingHooksSection = (
+                <SettingItemMax
+                    title='Incoming Webhooks'
+                    inputs={inputs}
+                    updateSection={function clearSection(e) {
+                        this.updateSection('');
+                        e.preventDefault();
+                    }.bind(this)}
+                />
+            );
+        } else {
+            incomingHooksSection = (
+                <SettingItemMin
+                    title='Incoming Webhooks'
+                    describe='Manage your incoming webhooks'
+                    updateSection={function updateNameSection() {
+                        this.updateSection('incoming-hooks');
+                    }.bind(this)}
+                />
+            );
+        }
+
+        return (
+            <div>
+                <div className='modal-header'>
+                    <button
+                        type='button'
+                        className='close'
+                        data-dismiss='modal'
+                        aria-label='Close'
+                    >
+                        <span aria-hidden='true'>{'×'}</span>
+                    </button>
+                    <h4
+                        className='modal-title'
+                        ref='title'
+                    >
+                        <i className='modal-back'></i>
+                        {'Integration Settings'}
+                    </h4>
+                </div>
+                <div className='user-settings'>
+                    <h3 className='tab-header'>{'Integration Settings'}</h3>
+                    <div className='divider-dark first'/>
+                    {incomingHooksSection}
+                    <div className='divider-dark'/>
+                </div>
+            </div>
+        );
+    }
+}
+
+UserSettingsIntegrationsTab.propTypes = {
+    user: React.PropTypes.object,
+    updateSection: React.PropTypes.func,
+    updateTab: React.PropTypes.func,
+    activeSection: React.PropTypes.string
+};
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-var SettingsSidebar = require('./settings_sidebar.jsx');
+var SettingsSidebar = require('../settings_sidebar.jsx');
 var UserSettings = require('./user_settings.jsx');

 export default class UserSettingsModal extends React.Component {
@@ -38,6 +38,9 @@ export default class UserSettingsModal extends React.Component {
        if (global.window.config.EnableOAuthServiceProvider === 'true') {
            tabs.push({name: 'developer', uiName: 'Developer', icon: 'glyphicon glyphicon-th'});
        }
+        if (global.window.config.AllowIncomingWebhooks === 'true') {
+            tabs.push({name: 'integrations', uiName: 'Integrations', icon: 'glyphicon glyphicon-transfer'});
+        }

        return (
            <div
--- a/web/react/components/user_settings/user_settings_notifications.jsx
+++ b/web/react/components/user_settings/user_settings_notifications.jsx
@@ -1,12 +1,12 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-var UserStore = require('../stores/user_store.jsx');
-var SettingItemMin = require('./setting_item_min.jsx');
-var SettingItemMax = require('./setting_item_max.jsx');
-var client = require('../utils/client.jsx');
-var AsyncClient = require('../utils/async_client.jsx');
-var utils = require('../utils/utils.jsx');
+var UserStore = require('../../stores/user_store.jsx');
+var SettingItemMin = require('../setting_item_min.jsx');
+var SettingItemMax = require('../setting_item_max.jsx');
+var client = require('../../utils/client.jsx');
+var AsyncClient = require('../../utils/async_client.jsx');
+var utils = require('../../utils/utils.jsx');
 var assign = require('object-assign');

 function getNotificationsStateFromStores() {
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -1,11 +1,11 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

-var SettingItemMin = require('./setting_item_min.jsx');
-var SettingItemMax = require('./setting_item_max.jsx');
-var Client = require('../utils/client.jsx');
-var AsyncClient = require('../utils/async_client.jsx');
-var Constants = require('../utils/constants.jsx');
+var SettingItemMin = require('../setting_item_min.jsx');
+var SettingItemMax = require('../setting_item_max.jsx');
+var Client = require('../../utils/client.jsx');
+var AsyncClient = require('../../utils/async_client.jsx');
+var Constants = require('../../utils/constants.jsx');

 export default class SecurityTab extends React.Component {
    constructor(props) {