fix(instances): a dependent list on the create pages shows only the latest choice

The machine types, volumes, templates and disk buses load when their
parent changes. A slow answer for an earlier choice could arrive last and
fill the list for the newer one, and while a list loaded it still held
the previous choice's items, which could be submitted.

Each list now empties when its load starts, and a newer load aborts the
older request, so only the answer for the current choice fills it. Chosen
volumes stay: they are found by name in any pool.

Fixes #177

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

instances/tests/test_create_page_js.py

@@ -85,9 +85,23 @@ class CreatePageScriptTests(TestCase):
     def test_the_disk_bus_list_is_asked_for_the_page_architecture_and_machine(self):
         compute, page = self.page()
         out = node(f"const COMPUTE = {compute.id}; let asked; const $ = {{getJSON: url => {{ asked = url; }}}};"
-                   + functions(page, "load_buses") + "load_buses({}, 'cdrom'); console.log(JSON.stringify(asked));")
+                   + functions(page, "load_list", "load_buses")
+                   + "load_buses({replaceChildren() {}}, 'cdrom'); console.log(JSON.stringify(asked));")
         self.assertEqual(out, reverse("buses", args=[compute.id, "i686", "pc", "cdrom"]))
 
+    @unittest.skipUnless(shutil.which("node"), "node is not installed")
+    def test_a_list_is_empty_while_it_loads_and_a_newer_load_aborts_the_older(self):
+        compute, page = self.page()
+        out = node(f"const COMPUTE = {compute.id}; const requests = [];"
+                   "const $ = {getJSON: (url, fill) => { const r = {fill, abort() { r.aborted = true; }}; requests.push(r); return r; }};"
+                   "const Option = function (text) { this.text = text; };"
+                   "const bus = {children: ['ide'], replaceChildren(...items) { this.children = items; }};"
+                   + functions(page, "load_list", "load_buses")
+                   + "load_buses(bus, 'disk'); const loading = bus.children; load_buses(bus, 'cdrom');"
+                   "requests[1].fill({bus: ['sata']});"
+                   "console.log(JSON.stringify({loading, aborted: requests.map(r => !!r.aborted), filled: bus.children.map(o => o.text)}));")
+        self.assertEqual(out, {"loading": [], "aborted": [True, False], "filled": ["sata"]})
+
     def test_the_form_has_one_mac_field(self):
         _, page = self.page()
         form = html.fromstring(page).get_element_by_id("create-vm-form")

instances/tests/test_create_wizard_url.py

@@ -1,6 +1,7 @@
 """The create wizard's first page sends the browser to the next page for the
 chosen architecture and machine type; the URL is built from placeholders."""
 
+import json
 import re
 import subprocess
 import shutil
@@ -51,3 +52,20 @@ class CreateWizardUrlTests(TestCase):
             out = subprocess.run(["node", "-e", js], capture_output=True, text=True, timeout=30)
             with self.subTest(machines=machines):
                 self.assertEqual(out.stdout.strip(), str(disabled).lower(), out.stderr)
+
+    @unittest.skipUnless(shutil.which("node"), "node is not installed")
+    def test_a_newer_architecture_aborts_the_older_load(self):
+        compute = Compute.objects.create(name="cw3", hostname="10.0.0.8", login="u", password="p", type=1)
+        request = RequestFactory().get("/")
+        request.user = get_user_model().objects.create_superuser("cw3-admin", "cw3@example.com", "pw")
+        page = render_to_string("create_instance_w1.html", {"compute": compute, "compute_id": compute.id}, request=request)
+        function = re.search(r"function load_machines\(arch\) \{.*?\n    \}", page, re.S).group(0)
+        js = ("const next = {}, select = {children: ['pc'], replaceChildren(...items) { this.children = items; }};"
+              "const document = {querySelector: sel => sel === '#next' ? next : select};"
+              "const Option = function (text) { this.text = text; }; const requests = [];"
+              "const $ = {getJSON: (url, fill) => { const r = {fill, abort() { r.aborted = true; }}; requests.push(r); return r; }};"
+              f"{function} load_machines('x86_64'); const loading = select.children; load_machines('aarch64');"
+              "requests[1].fill({machines: ['virt']});"
+              "console.log(JSON.stringify({loading, aborted: requests.map(r => !!r.aborted), filled: select.children.map(o => o.text)}));")
+        out = subprocess.run(["node", "-e", js], capture_output=True, text=True, timeout=30)
+        self.assertEqual(json.loads(out.stdout), {"loading": [], "aborted": [True, False], "filled": ["virt"]}, out.stderr)