Use a slideout for webhook details

Author: brandonkelly

src/assets/activity/ActivityAsset.php

@@ -25,6 +25,10 @@ class ActivityAsset extends AssetBundle
         CpAsset::class,
     ];
 
+    public $css = [
+        'css/activity.css',
+    ];
+
     public $js = [
         'js/Activity.js',
     ];

src/assets/activity/dist/css/activity.css

@@ -0,0 +1,13 @@
+.webhook-activity-slideout {
+    overflow-y: auto;
+}
+
+.webhook-activity-slideout .meta {
+    margin-left: -24px;
+    margin-right: -24px;
+}
+
+.webhook-activity-slideout .pane.code {
+    max-height: 500px;
+    overflow: auto;
+}

src/assets/activity/dist/js/Activity.js

@@ -17,26 +17,30 @@
                 requestId: requestId
             }, function(response, textStatus) {
                 if (textStatus === 'success') {
-                    var hud = new Garnish.HUD($a, response.html);
-                    initHud(hud, requestId);
+                    const slideout = new Craft.Slideout(response.html, {
+                        containerAttributes: {
+                            class: 'webhook-activity-slideout',
+                        }
+                    });
+                    initSlideout(slideout, requestId);
                 }
             })
         });
     });
 
-    function initHud(hud, requestId) {
-        var $redeliverBtn = hud.$main.find('.redeliver-btn');
+    function initSlideout(slideout, requestId) {
+        const $redeliverBtn = slideout.$container.find('.redeliver-btn');
         $redeliverBtn.on('click', function() {
             if (!$redeliverBtn.hasClass('disabled') && confirm(Craft.t('webhooks', 'Are you sure you want to resend this request?'))) {
                 $redeliverBtn.addClass('disabled');
-                var $spinner = $(this).next('.spinner').removeClass('hidden');
+                const $spinner = $(this).next('.spinner').removeClass('hidden');
                 Craft.postActionRequest('webhooks/activity/redeliver', {
                     requestId: requestId
                 }, function(response, textStatus) {
                     $spinner.addClass('hidden');
                     if (textStatus === 'success') {
-                        hud.updateBody(response.html);
-                        initHud(hud, requestId);
+                        slideout.$container.html(response.html);
+                        initSlideout(slideout, requestId);
                     }
                 })
             }

src/templates/_activity/details.html

@@ -35,10 +35,6 @@
   {% endif %}
 </div>
 
-<div class="buttons">
-
-</div>
-
 <hr>
 
 <h4>{{ 'Request'|t('webhooks') }}</h4>
@@ -49,8 +45,14 @@ <h4>{{ 'Request'|t('webhooks') }}</h4>
 </div>
 
 <h4>{{ 'Response'|t('webhooks') }}</h4>
-<div class="pane code">
-  {{ macros.headers(request.responseHeaders) }}
-  <br>
-  <pre>{{ request.responseBody }}</pre>
-</div>
+{% if request.responseHeaders or request.responseBody %}
+  <div class="pane code">
+    {{ macros.headers(request.responseHeaders) }}
+    <br>
+    <pre>{{ request.responseBody }}</pre>
+  </div>
+{% else %}
+  <div class="pane zilch">
+    <p>{{ 'No response yet.'|t('webhooks') }}</p>
+  </div>
+{% endif %}