1843 new ajax request reset's whole view if history panel is enabled (#1872)

New AJAX request reset's whole view if History Panel is enabled.

[+] Create a setting which enable or disable the automatic refresh when an ajax request occurs.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Tim Schilling <schilling711@gmail.com>
Co-authored-by: Tim Schilling <schillingt@better-simple.com>

Author: 3 people

debug_toolbar/settings.py

@@ -42,6 +42,7 @@
     "SQL_WARNING_THRESHOLD": 500,  # milliseconds
     "OBSERVE_REQUEST_CALLBACK": "debug_toolbar.toolbar.observe_request",
     "TOOLBAR_LANGUAGE": None,
+    "UPDATE_ON_FETCH": False,
 }
 
 

debug_toolbar/static/debug_toolbar/js/history.js

@@ -104,3 +104,6 @@ $$.on(djDebug, "click", ".refreshHistory", function (event) {
     event.preventDefault();
     refreshHistory();
 });
+// We don't refresh the whole toolbar each fetch or ajax request,
+// so we need to refresh the history when we open the panel
+$$.onPanelRender(djDebug, "HistoryPanel", refreshHistory);

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -17,8 +17,10 @@ function getDebugElement() {
 
 const djdt = {
     handleDragged: false,
+    needUpdateOnFetch: false,
     init() {
         const djDebug = getDebugElement();
+        djdt.needUpdateOnFetch = djDebug.dataset.updateOnFetch === "True";
         $$.on(djDebug, "click", "#djDebugPanelList li a", function (event) {
             event.preventDefault();
             if (!this.className) {
@@ -274,7 +276,9 @@ const djdt = {
             storeId = encodeURIComponent(storeId);
             const dest = `${sidebarUrl}?store_id=${storeId}`;
             slowjax(dest).then(function (data) {
-                replaceToolbarState(storeId, data);
+                if (djdt.needUpdateOnFetch){
+                    replaceToolbarState(storeId, data);
+                }
             });
         }
 

debug_toolbar/templates/debug_toolbar/base.html

@@ -16,7 +16,7 @@
      data-sidebar-url="{{ history_url }}"
      {% endif %}
      data-default-show="{% if toolbar.config.SHOW_COLLAPSED %}false{% else %}true{% endif %}"
-     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
+     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}  data-update-on-fetch="{{ toolbar.config.UPDATE_ON_FETCH }}">
   <div class="djdt-hidden" id="djDebugToolbar">
     <ul id="djDebugPanelList">
       <li><a id="djHideToolBarButton" href="#" title="{% trans 'Hide toolbar' %}">{% trans "Hide" %} »</a></li>

docs/changes.rst

@@ -19,6 +19,9 @@ Pending
   <https://astral.sh/blog/the-ruff-formatter>`__.
 * Changed the default position of the toolbar from top to the upper top
   position.
+* Added the setting, ``UPDATE_ON_FETCH`` to control whether the
+  toolbar automatically updates to the latest AJAX request or not.
+  It defaults to ``False``.
 
 4.2.0 (2023-08-10)
 ------------------

docs/configuration.rst

@@ -163,6 +163,16 @@ Toolbar options
   but want to render your application in French, you would set this to
   ``"en-us"`` and :setting:`LANGUAGE_CODE` to ``"fr"``.
 
+.. _UPDATE_ON_FETCH:
+
+* ``UPDATE_ON_FETCH``
+
+  Default: ``False``
+
+  This controls whether the toolbar should update to the latest AJAX
+  request when it occurs. This is especially useful when using htmx
+  boosting or similar JavaScript techniques.
+
 Panel options
 ~~~~~~~~~~~~~
 

docs/spelling_wordlist.txt

@@ -6,6 +6,7 @@ Pympler
 Roboto
 Transifex
 Werkzeug
+ajax
 async
 backend
 backends

tests/templates/ajax/ajax.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block content %}
+  <div id="click_for_ajax">click for ajax</div>
+
+  <script>
+
+  let click_for_ajax = document.getElementById("click_for_ajax");
+  function send_ajax() {
+    let xhr = new XMLHttpRequest();
+    let url = '/json_view/';
+    xhr.open("GET", url, true);
+    xhr.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            console.log(this.responseText);
+        }
+    }
+    xhr.send();
+  }
+  document.addEventListener("click", (event) => {send_ajax()});
+  </script>
+{% endblock %}

tests/test_integration.py

@@ -1,5 +1,6 @@
 import os
 import re
+import time
 import unittest
 
 import html5lib
@@ -749,3 +750,24 @@ def test_toolbar_language_will_render_to_locale_when_set_both(self):
         )
         self.assertIn("Query", table.text)
         self.assertIn("Action", table.text)
+
+    def test_ajax_dont_refresh(self):
+        self.get("/ajax/")
+        make_ajax = self.selenium.find_element(By.ID, "click_for_ajax")
+        make_ajax.click()
+        history_panel = self.selenium.find_element(By.ID, "djdt-HistoryPanel")
+        self.assertIn("/ajax/", history_panel.text)
+        self.assertNotIn("/json_view/", history_panel.text)
+
+    @override_settings(DEBUG_TOOLBAR_CONFIG={"UPDATE_ON_FETCH": True})
+    def test_ajax_refresh(self):
+        self.get("/ajax/")
+        make_ajax = self.selenium.find_element(By.ID, "click_for_ajax")
+        make_ajax.click()
+        # Need to wait until the ajax request is over and json_view is displayed on the toolbar
+        time.sleep(2)
+        history_panel = self.wait.until(
+            lambda selenium: self.selenium.find_element(By.ID, "djdt-HistoryPanel")
+        )
+        self.assertNotIn("/ajax/", history_panel.text)
+        self.assertIn("/json_view/", history_panel.text)

tests/urls.py

@@ -21,6 +21,7 @@
     path("cached_low_level_view/", views.cached_low_level_view),
     path("json_view/", views.json_view),
     path("redirect/", views.redirect_view),
+    path("ajax/", views.ajax_view),
     path("login_without_redirect/", LoginView.as_view(redirect_field_name=None)),
     path("admin/", admin.site.urls),
     path("__debug__/", include("debug_toolbar.urls")),