[#4462] fixed Admin UI record and collection panels not reinitializing properly on browser back/forward navigation

ui/src/components/collections/CollectionUpsertPanel.svelte

@@ -75,7 +75,7 @@
     // update indexes on collection rename
     $: if (collection.name && original?.name != collection.name && collection.indexes.length > 0) {
         collection.indexes = collection.indexes?.map((idx) =>
-            CommonHelper.replaceIndexTableName(idx, collection.name)
+            CommonHelper.replaceIndexTableName(idx, collection.name),
         );
     }
 
@@ -97,6 +97,11 @@
         return collectionPanel?.hide();
     }
 
+    export function forceHide() {
+        confirmClose = false;
+        hide();
+    }
+
     async function load(model) {
         setErrors({}); // reset errors
 
@@ -151,7 +156,7 @@
                 hide();
 
                 addSuccessToast(
-                    !collection.id ? "Successfully created collection." : "Successfully updated collection."
+                    !collection.id ? "Successfully created collection." : "Successfully updated collection.",
                 );
 
                 dispatch("save", {

ui/src/components/records/PageRecords.svelte

@@ -83,6 +83,10 @@
         updateQueryParams({ recordId: null });
 
         normalizeSort();
+
+        // close any open collection panels
+        collectionUpsertPanel?.forceHide();
+        collectionDocsPanel?.hide();
     }
 
     // ensures that the sort fields exist in the collection
@@ -117,7 +121,7 @@
                 filter: filter,
                 sort: sort,
             },
-            extra
+            extra,
         );
 
         CommonHelper.replaceHashQueryParams(queryParams);

ui/src/components/records/RecordUpsertPanel.svelte

@@ -46,6 +46,7 @@
     let activeTab = tabFormKey;
     let isNew = true;
     let isLoading = true;
+    let initialCollection = collection;
 
     $: isAuthCollection = collection?.type === "auth";
 
@@ -66,6 +67,10 @@
         updateDraft(serializedData);
     }
 
+    $: if (collection && initialCollection?.id != collection?.id) {
+        onCollectionChange();
+    }
+
     export function show(model) {
         load(model);
 
@@ -85,6 +90,18 @@
         hide();
     }
 
+    function onCollectionChange() {
+        initialCollection = collection;
+
+        if (!recordPanel?.isActive()) {
+            return;
+        }
+
+        updateDraft(JSON.stringify(record));
+
+        forceHide();
+    }
+
     async function resolveModel(model) {
         if (model && typeof model === "string") {
             // load from id

ui/src/components/records/fields/JsonField.svelte

@@ -19,6 +19,10 @@
     $: isValid = isValidJson(serialized);
 
     function serialize(val) {
+        if (typeof val == "string" && isValidJson(val)) {
+            return val; // already serlialized
+        }
+
         return JSON.stringify(typeof val === "undefined" ? null : val, null, 2);
     }