[Docs Site] Update URL when filter updates on changelog (#20337)

* [Docs Site] Update URL when filter updates on changelog

* Load filter value from search params

* assert

Author: KianNH

src/pages/changelog/index.astro

@@ -87,17 +87,34 @@ const props = {
 		"#changelogs-next-filter",
 	);
 
-	filter?.addEventListener("change", () => {
+	const button = document.querySelector<HTMLButtonElement>(
+		"#changelogs-next-button",
+	);
+
+	const url = new URL(window.location.href);
+
+	if (filter && url.searchParams.has("product")) {
+		filter.value = url.searchParams.get("product")!;
+		updateFilter();
+	}
+
+	filter?.addEventListener("change", updateFilter);
+
+	button?.addEventListener("click", () => {
 		const entries = [
 			...document.querySelectorAll<HTMLElement>("[data-products]"),
 		];
 
 		if (!entries) return;
 
-		const value = filter.value;
+		const value = filter!.value;
 
-		const filtered = entries
+		const hidden = entries
 			.filter((e) => {
+				if (e.style.display !== "none") {
+					return false;
+				}
+
 				if (value === "all") {
 					return true;
 				}
@@ -114,26 +131,14 @@ const props = {
 
 				return false;
 			})
-			.slice(0, 5);
-
-		for (const entry of entries) {
-			const show = filtered.includes(entry);
+			.slice(0, 10);
 
-			if (show) {
-				entry.style.display = "";
-			} else {
-				entry.style.display = "none";
-			}
-		}
+		hidden.forEach((e) => (e.style.display = ""));
 
 		hideButton();
 	});
 
-	const button = document.querySelector<HTMLButtonElement>(
-		"#changelogs-next-button",
-	);
-
-	button?.addEventListener("click", () => {
+	function updateFilter() {
 		const entries = [
 			...document.querySelectorAll<HTMLElement>("[data-products]"),
 		];
@@ -142,12 +147,8 @@ const props = {
 
 		const value = filter!.value;
 
-		const hidden = entries
+		const filtered = entries
 			.filter((e) => {
-				if (e.style.display !== "none") {
-					return false;
-				}
-
 				if (value === "all") {
 					return true;
 				}
@@ -164,12 +165,30 @@ const props = {
 
 				return false;
 			})
-			.slice(0, 10);
+			.slice(0, 5);
 
-		hidden.forEach((e) => (e.style.display = ""));
+		for (const entry of entries) {
+			const show = filtered.includes(entry);
+
+			if (show) {
+				entry.style.display = "";
+			} else {
+				entry.style.display = "none";
+			}
+		}
+
+		const url = new URL(window.location.href);
+
+		if (value === "all") {
+			url.searchParams.delete("product");
+		} else {
+			url.searchParams.set("product", value);
+		}
+
+		history.replaceState(null, "", url.href);
 
 		hideButton();
-	});
+	}
 
 	function hideButton() {
 		const entries = [