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, 25 insertions, 21 deletions

diff --git a/webapp/components/backstage/installed_outgoing_webhook.jsx b/webapp/components/backstage/installed_outgoing_webhook.jsx
index 16782b4df..99f2439ec 100644
--- a/webapp/components/backstage/installed_outgoing_webhook.jsx
+++ b/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