Add clear session button to Request panel

config/routes.php

@@ -12,6 +12,10 @@
             '/toolbar/clear-cache',
             ['controller' => 'Toolbar', 'action' => 'clearCache']
         );
+        $routes->connect(
+            '/toolbar/clear-session',
+            ['controller' => 'Toolbar', 'action' => 'clearSession']
+        );
         $routes->connect(
             '/toolbar/*',
             ['controller' => 'Requests', 'action' => 'view']

src/Controller/ToolbarController.php

@@ -53,4 +53,21 @@ public function clearCache(): void
         $this->set(compact('success', 'message'));
         $this->viewBuilder()->setOption('serialize', ['success', 'message']);
     }
+
+    /**
+     * Clear the session.
+     *
+     * @return void
+     */
+    public function clearSession(): void
+    {
+        $this->request->allowMethod('post');
+        $session = $this->request->getSession();
+        $session->destroy();
+
+        $success = true;
+        $message = 'Session cleared.';
+        $this->set(compact('success', 'message'));
+        $this->viewBuilder()->setOption('serialize', ['success', 'message']);
+    }
 }

templates/element/request_panel.php

@@ -95,6 +95,20 @@
 
     <h4>Session</h4>
     <?php if (isset($session)) : ?>
+        <p>
+            <button
+                class="o-button js-clear-session"
+                data-url="<?= $this->Url->build([
+                    'plugin' => 'DebugKit',
+                    'controller' => 'Toolbar',
+                    'action' => 'clearSession',
+                ]) ?>"
+                data-csrf="<?= $this->getRequest()->getAttribute('csrfToken') ?>"
+            >
+                Clear Session
+            </button>
+        </p>
+        <div class="c-request-panel__messages"></div>
         <?= $this->Toolbar->dumpNode($session) ?>
     <?php else : ?>
         <p class="c-flash c-flash--info">No Session data.</p>

tests/TestCase/Controller/ToolbarControllerTest.php

@@ -70,4 +70,19 @@ public function testClearCache()
         $this->assertResponseOk();
         $this->assertResponseContains('success');
     }
+
+    /**
+     * Test clearing the session.
+     *
+     * @return void
+     */
+    public function testClearSession()
+    {
+        $this->session(['test' => 'value']);
+        $this->configRequest(['headers' => ['Accept' => 'application/json']]);
+        $this->post('/debug-kit/toolbar/clear-session');
+        $this->assertResponseOk();
+        $this->assertResponseContains('success');
+        $this->assertResponseContains('Session cleared');
+    }
 }

webroot/js/main.js

@@ -6,6 +6,7 @@ import RoutesPanel from './modules/Panels/RoutesPanel.js';
 import VariablesPanel from './modules/Panels/VariablesPanel.js';
 import PackagesPanel from './modules/Panels/PackagesPanel.js';
 import MailPanel from './modules/Panels/MailPanel.js';
+import RequestPanel from './modules/Panels/RequestPanel.js';
 
 document.addEventListener('DOMContentLoaded', () => {
   const toolbar = Start.init();
@@ -14,6 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Init Panels
   CachePanel.onEvent();
+  RequestPanel.onEvent();
   RoutesPanel.onEvent();
   PackagesPanel.onEvent();
   MailPanel.onEvent();

webroot/js/modules/Panels/RequestPanel.js

@@ -0,0 +1,41 @@
+export default (($) => {
+  const addMessage = (text) => {
+    $(`<p>${text}</p>`)
+      .appendTo('.c-request-panel__messages')
+      .fadeOut(2000);
+  };
+
+  const init = () => {
+    $('.js-clear-session').on('click', function triggerSessionClear(e) {
+      const el = $(this);
+      const baseUrl = el.attr('data-url');
+      const csrf = el.attr('data-csrf');
+
+      $.ajax({
+        headers: { 'X-CSRF-TOKEN': csrf },
+        url: baseUrl,
+        dataType: 'json',
+        type: 'POST',
+        success(data) {
+          addMessage(data.message);
+        },
+        error(jqXHR, textStatus, errorThrown) {
+          addMessage(errorThrown);
+        },
+      });
+      e.preventDefault();
+    });
+  };
+
+  const onEvent = () => {
+    document.addEventListener('initPanel', (e) => {
+      if (e.detail === 'panelrequest') {
+        init();
+      }
+    });
+  };
+
+  return {
+    onEvent,
+  };
+})(jQuery);