From 1ded0c5cddd3d8c8cb500814e132e8e385a37366 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Sat, 26 Oct 2024 01:47:06 +0200 Subject: [PATCH] Query API: Preserve multiple ?plugin= query params (#1947) Ensures that URLs with multiple parameter values, such as `?plugin=friends&plugin=hello-dolly`, are preserved after the initial page load. As seen in #1941, Playground started redirecting from `?plugin=friends&plugin=hello-dolly` to just `?plugin=hello-dolly`. This is caused by storing only the last key=>value pair in the redux store instead of all the key=>value pairs for all query parameters. ## Testing Instructions (or ideally a Blueprint) Go to the Input URL and confirm it behaves as follows: **Before this PR** ``` Input URL: /?plugin=classic-editor&plugin=hello-dolly&plugin=plugin-check Result URL: /?plugin=plugin-check ``` **After this PR** ``` Input URL: /?plugin=classic-editor&plugin=hello-dolly&plugin=plugin-check Result URL: /?plugin=classic-editor&plugin=hello-dolly&plugin=plugin-check ``` --- .../ensure-playground-site-is-selected.tsx | 13 ++++++++++--- .../website/src/lib/state/url/router-hooks.ts | 4 ++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx index 5824781ef7..f94f4fbb46 100644 --- a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx +++ b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx @@ -99,9 +99,7 @@ export function EnsurePlaygroundSiteIsSelected({ originalBlueprint: blueprint, }, originalUrlParams: { - searchParams: Object.fromEntries( - url.searchParams.entries() - ), + searchParams: parseSearchParams(url.searchParams), hash: url.hash, }, }) @@ -115,3 +113,12 @@ export function EnsurePlaygroundSiteIsSelected({ return children; } + +function parseSearchParams(searchParams: URLSearchParams) { + const params: Record = {}; + for (const key of searchParams.keys()) { + const value = searchParams.getAll(key); + params[key] = value.length > 1 ? value : value[0]; + } + return params; +} diff --git a/packages/playground/website/src/lib/state/url/router-hooks.ts b/packages/playground/website/src/lib/state/url/router-hooks.ts index 8ff56aad04..4cb55eb12a 100644 --- a/packages/playground/website/src/lib/state/url/router-hooks.ts +++ b/packages/playground/website/src/lib/state/url/router-hooks.ts @@ -38,6 +38,10 @@ export function updateUrl( ([key, value]) => { if (value === undefined) { currentUrl.searchParams.delete(key); + } else if (Array.isArray(value)) { + value.forEach((v) => { + currentUrl.searchParams.append(key, v); + }); } else { currentUrl.searchParams.set(key, value); }