PLT-2170 Send payload in application/json for outgoing webhooks (#3160)

* Send payload in application/json for outgoing webhooks

The Add outgoing webhook UI now has a 'Content-Type' field that allows
to choose between application/x-www-form-urlencoded and
application/json. All outgoing webhooks created before this change will
be considered as x-www-form-urlencoded. There's also a minor change in
the way the outgoing webhook summary is displayed: the 'Callback URLs'
label was missing.

* Fix JS formatting errors

* Increase ContentType field length to 128

1 files changed, 40 insertions, 0 deletions

diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
index 2fefd5965..d48be3ac4 100644
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ b/webapp/components/backstage/add_outgoing_webhook.jsx
@@ -21,6 +21,7 @@ export default class AddOutgoingWebhook extends React.Component {
 
         this.updateDisplayName = this.updateDisplayName.bind(this);
         this.updateDescription = this.updateDescription.bind(this);
+        this.updateContentType = this.updateContentType.bind(this);
         this.updateChannelId = this.updateChannelId.bind(this);
         this.updateTriggerWords = this.updateTriggerWords.bind(this);
         this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
@@ -28,6 +29,7 @@ export default class AddOutgoingWebhook extends React.Component {
         this.state = {
             displayName: '',
             description: '',
+            contentType: 'application/x-www-form-urlencoded',
             channelId: '',
             triggerWords: '',
             callbackUrls: '',
@@ -103,6 +105,7 @@ export default class AddOutgoingWebhook extends React.Component {
             trigger_words: triggerWords,
             callback_urls: callbackUrls,
             display_name: this.state.displayName,
+            content_type: this.state.contentType,
             description: this.state.description
         };
 
@@ -132,6 +135,12 @@ export default class AddOutgoingWebhook extends React.Component {
         });
     }
 
+    updateContentType(e) {
+        this.setState({
+            contentType: e.target.value
+        });
+    }
+
     updateChannelId(e) {
         this.setState({
             channelId: e.target.value
@@ -151,6 +160,8 @@ 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>
@@ -212,6 +223,35 @@ export default class AddOutgoingWebhook extends React.Component {
                         <div className='form-group'>
                             <label
                                 className='control-label col-sm-4'
+                                htmlFor='contentType'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.content_Type'
+                                    defaultMessage='Content Type'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <select
+                                    className='form-control'
+                                    value={this.state.contentType}
+                                    onChange={this.updateContentType}
+                                >
+                                    <option
+                                        value={contentTypeOption1}
+                                    >
+                                        {contentTypeOption1}
+                                    </option>
+                                    <option
+                                        value={contentTypeOption2}
+                                    >
+                                        {contentTypeOption2}
+                                    </option>
+                                </select>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
                                 htmlFor='channelId'
                             >
                                 <FormattedMessage