Implement outgoing webhooks.

web/react/components/user_settings/user_settings_integrations.jsx

@@ -4,6 +4,7 @@
 var SettingItemMin = require('../setting_item_min.jsx');
 var SettingItemMax = require('../setting_item_max.jsx');
 var ManageIncomingHooks = require('./manage_incoming_hooks.jsx');
+var ManageOutgoingHooks = require('./manage_outgoing_hooks.jsx');
 
 export default class UserSettingsIntegrationsTab extends React.Component {
     constructor(props) {
@@ -28,6 +29,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
     }
     render() {
         let incomingHooksSection;
+        let outgoingHooksSection;
         var inputs = [];
 
         if (this.props.activeSection === 'incoming-hooks') {
@@ -40,10 +42,10 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                     title='Incoming Webhooks'
                     width = 'full'
                     inputs={inputs}
-                    updateSection={function clearSection(e) {
+                    updateSection={(e) => {
                         this.updateSection('');
                         e.preventDefault();
-                    }.bind(this)}
+                    }}
                 />
             );
         } else {
@@ -52,9 +54,36 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                     title='Incoming Webhooks'
                     width = 'full'
                     describe='Manage your incoming webhooks (Developer feature)'
-                    updateSection={function updateNameSection() {
+                    updateSection={() => {
                         this.updateSection('incoming-hooks');
-                    }.bind(this)}
+                    }}
+                />
+            );
+        }
+
+        if (this.props.activeSection === 'outgoing-hooks') {
+            inputs.push(
+                <ManageOutgoingHooks />
+            );
+
+            outgoingHooksSection = (
+                <SettingItemMax
+                    title='Outgoing Webhooks'
+                    inputs={inputs}
+                    updateSection={(e) => {
+                        this.updateSection('');
+                        e.preventDefault();
+                    }}
+                />
+            );
+        } else {
+            outgoingHooksSection = (
+                <SettingItemMin
+                    title='Outgoing Webhooks'
+                    describe='Manage your outgoing webhooks'
+                    updateSection={() => {
+                        this.updateSection('outgoing-hooks');
+                    }}
                 />
             );
         }
@@ -82,6 +111,8 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                     <h3 className='tab-header'>{'Integration Settings'}</h3>
                     <div className='divider-dark first'/>
                     {incomingHooksSection}
+                    <div className='divider-light'/>
+                    {outgoingHooksSection}
                     <div className='divider-dark'/>
                 </div>
             </div>