feat: improve webhook request/response body preview

Author: rasmusjp

src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html

@@ -3,7 +3,6 @@
     <thead>
       <tr>
         <th></th>
-        <th><localize key="webhooks_webhookKey">Webhook key</localize></th>
         <th><localize key="general_date">Date</localize></th>
         <th><localize key="webhooks_url">Url</localize></th>
         <th><localize key="webhooks_event">Event</localize></th>
@@ -20,7 +19,6 @@
           </umb-checkmark>
           <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="!vm.isChecked(log)"></umb-icon>
         </td>
-        <td>{{ log.webhookKey }}</td>
         <td>{{ log.formattedLogDate }}</td>
         <td>{{ log.url }}</td>
         <td>{{ log.eventAlias }}</td>

src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js

@@ -5,14 +5,15 @@
 
     vm.close = close;
     vm.formatData = formatData;
+    vm.detectLanguage = detectLanguage;
 
     function formatData(data) {
 
       let obj = data;
 
       if (data.detectIsJson()) {
         try {
-          obj = Utilities.fromJson(data)
+          obj = JSON.stringify(Utilities.fromJson(data), null, 2);
         } catch (err) {
           obj = data;
         }
@@ -21,6 +22,21 @@
       return obj;
     }
 
+    function detectLanguage(headers, defaultLanguage) {
+      const matches = headers.match(/^Content-Type:\s*(?<type>[a-z\/+.-]+)(\;?.*?)$/mi)
+      if (matches) {
+        const contentType = matches.groups["type"];
+        if (contentType === "application/json")
+          return "JSON";
+        if (contentType === "text/html")
+          return "HTML";
+        if (contentType === "application/xml" || contentType === "text/xml")
+          return "XML";
+      }
+
+      return defaultLanguage || "TEXT";
+    }
+
     function close() {
       if ($scope.model && $scope.model.close) {
         $scope.model.close();

src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html

@@ -45,6 +45,10 @@
             <div>{{model.log.retryCount}}</div>
           </umb-control-group>
 
+          <umb-control-group label="Webhook key">
+            <div>{{model.log.webhookKey}}</div>
+          </umb-control-group>
+
         </umb-box-content>
 
       </umb-box>
@@ -53,16 +57,14 @@
         <umb-box-header title="Request"></umb-box-header>
         <umb-box-content class="block-form">
           <pre class="code">{{model.log.requestHeaders}}</pre>
-          <umb-code-snippet language="'JSON'" wrap="true">{{vm.formatData(model.log.requestBody) | json}}
-          </umb-code-snippet>
+          <umb-code-snippet language="vm.detectLanguage(model.log.requestHeaders, 'JSON')" wrap="true">{{vm.formatData(model.log.requestBody)}}</umb-code-snippet>
         </umb-box-content>
       </umb-box>
         <umb-box>
           <umb-box-header title="Response"></umb-box-header>
           <umb-box-content class="block-form">
             <pre class="code">{{model.log.responseHeaders}}</pre>
-            <umb-code-snippet language="'TEXT'" wrap="true">{{vm.formatData(model.log.responseBody) | json}}
-            </umb-code-snippet>
+            <umb-code-snippet language="vm.detectLanguage(model.log.responseHeaders)" wrap="true">{{vm.formatData(model.log.responseBody)}}</umb-code-snippet>
           </umb-box-content>
         </umb-box>
       <div ng-if="model.log.exceptionOccured">