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

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>
@@ -209,6 +220,35 @@ export default class AddOutgoingWebhook extends React.Component {
                                 />
                             </div>
                         </div>
+                        <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'

webapp/components/backstage/installed_outgoing_webhook.jsx

@@ -112,22 +112,19 @@ export default class InstalledOutgoingWebhook extends React.Component {
             );
         }
 
-        const urls = [];
-        for (const url of outgoingWebhook.callback_urls) {
-            urls.push(
-                <div
-                    key={url}
-                    className='item-details__url'
-                >
-                    {url}
-                </div>
-            );
-            urls.push(
-                <br
-                    key={'BR' + url}
-                />
-            );
-        }
+        let urls = (
+            <div className='item-details__row'>
+                <span className='item-details__url'>
+                    <FormattedMessage
+                        id='installed_integrations.callback_urls'
+                        defaultMessage='Callback URLs: {urls}'
+                        values={{
+                            urls: outgoingWebhook.callback_urls.join(', ')
+                        }}
+                    />
+                </span>
+            </div>
+        );
 
         return (
             <div className='backstage-list__item'>
@@ -138,6 +135,17 @@ export default class InstalledOutgoingWebhook extends React.Component {
                         </span>
                     </div>
                     {description}
+                    <div className='item-details__row'>
+                        <span className='item-details__content_type'>
+                            <FormattedMessage
+                                id='installed_integrations.content_type'
+                                defaultMessage='Content-Type: {contentType}'
+                                values={{
+                                    contentType: outgoingWebhook.content_type || 'application/x-www-form-urlencoded'
+                                }}
+                            />
+                        </span>
+                    </div>
                     {triggerWords}
                     <div className='item-details__row'>
                         <span className='item-details__token'>
@@ -162,11 +170,7 @@ export default class InstalledOutgoingWebhook extends React.Component {
                             />
                         </span>
                     </div>
-                    <div className='item-details__row'>
-                        <span className='item-details__urls'>
-                            {urls}
-                        </span>
-                    </div>
+                    {urls}
                 </div>
                 <div className='item-actions'>
                     <a

webapp/sass/routes/_backstage.scss

@@ -220,6 +220,7 @@ body {
     }
 
     .item-details__description,
+    .item-details__content_type,
     .item-details__token,
     .item-details__trigger-words,
     .item-details__url,