[fix] Fixed unsaved changes alert on device page

Author: pandafy

openwisp_controller/config/static/config/js/relevant_templates.js

@@ -71,12 +71,23 @@ django.jQuery(function ($) {
     },
     updateConfigTemplateField = function (templates) {
       var value = templates.join(","),
-        templateField = templatesFieldName();
+        templateField = templatesFieldName(),
+        updateInitialValue = false;
       $(`input[name="${templateField}"]`).attr("value", value);
-      if (pageLoading) {
+      if (
+        pageLoading ||
+        // Handle cases where the AJAX request finishes after initial page load.
+        // If we're editing an existing object and the initial value hasn't been set,
+        // assign it now to avoid false positives in the unsaved changes warning.
+        (!isAddingNewObject() &&
+          django._owcInitialValues[templateField] === undefined)
+      ) {
         django._owcInitialValues[templateField] = value;
+        updateInitialValue = true;
       }
-      $("input.sortedm2m:first").trigger("change");
+      $("input.sortedm2m:first").trigger("change", {
+        updateInitialValue: updateInitialValue,
+      });
     },
     getSelectedTemplates = function () {
       // Returns the selected templates from the sortedm2m input

openwisp_controller/config/static/config/js/widget.js

@@ -326,13 +326,7 @@
         }
         alert(message);
       }
-      var contextField = $("#id_config-0-context");
-      if (contextField.length) {
-        var contextValue = JSON.parse(contextField.val());
-        contextField.val(
-          JSON.stringify(removeUnchangedDefaultValues(contextValue)),
-        );
-      }
+
       if ($advancedEl.is(":hidden")) {
         return;
       }
@@ -494,8 +488,8 @@
         getDefaultValues(true);
       });
     }
-    $(".sortedm2m-items").on("change", function () {
-      getDefaultValues();
+    $(".sortedm2m-items").on("change", function (event) {
+      getDefaultValues(event.updateInitialValue === true);
     });
     $(".sortedm2m-items").on("sortstop", function () {
       getDefaultValues();

openwisp_controller/config/tests/test_selenium.py

@@ -523,24 +523,39 @@ class TestDeviceAdminUnsavedChanges(
 ):
     browser = "chrome"
 
+    def _is_unsaved_changes_alert_present(self):
+        for entry in self.get_browser_logs():
+            if (
+                entry["level"] == "WARNING"
+                and "You haven't saved your changes yet!" in entry["message"]
+            ):
+                return True
+        return False
+
+    def _override_unsaved_changes_alert(self):
+        self.web_driver.execute_script(
+            'django.jQuery(window).on("beforeunload", function(e) {'
+            " console.warn(e.returnValue); });"
+        )
+
     def test_unsaved_changes(self):
         """
         Execute this test using Chrome instead of Firefox.
         Firefox automatically accepts the beforeunload alert, which makes it
         impossible to test the unsaved changes alert.
         """
         self.login()
+        self._create_template(default=True, default_values={"ssid": "default"})
         device = self._create_config(organization=self._get_org()).device
         path = reverse("admin:config_device_change", args=[device.id])
 
         with self.subTest("Alert should not be displayed without any change"):
             self.open(path)
             self.hide_loading_overlay()
-            try:
-                WebDriverWait(self.web_driver, 1).until(EC.alert_is_present())
-            except TimeoutException:
-                pass
-            else:
+            self._override_unsaved_changes_alert()
+            # Simulate navigating away from the page
+            self.open(reverse("admin:index"))
+            if self._is_unsaved_changes_alert_present():
                 self.fail("Unsaved changes alert displayed without any change")
 
         with self.subTest("Alert should be displayed after making changes"):
@@ -550,10 +565,9 @@ def test_unsaved_changes(self):
             #
             # our own JS code sets e.returnValue when triggered
             # so we just need to ensure it's set as expected
-            self.web_driver.execute_script(
-                'django.jQuery(window).on("beforeunload", function(e) {'
-                " console.warn(e.returnValue); });"
-            )
+            self.open(path)
+            self.hide_loading_overlay()
+            self._override_unsaved_changes_alert()
             # simulate hand gestures
             self.find_element(by=By.TAG_NAME, value="body").click()
             self.find_element(by=By.NAME, value="name").click()
@@ -562,13 +576,7 @@ def test_unsaved_changes(self):
             # simulate hand gestures
             self.find_element(by=By.TAG_NAME, value="body").click()
             self.web_driver.refresh()
-            for entry in self.get_browser_logs():
-                if (
-                    entry["level"] == "WARNING"
-                    and "You haven't saved your changes yet!" in entry["message"]
-                ):
-                    break
-            else:
+            if not self._is_unsaved_changes_alert_present():
                 self.fail("Unsaved changes code was not executed.")