fix: keep download selections when the version changes route

Picking a version whose status belongs to another route (/download,
/download/current, /download/alpha) called redirect(). All three routes
are served by the same [...path] page, so Next remounted the page and the
release providers restarted from their defaults. That reset the
architecture to x64 (or the detected one), and also the OS, install
method, package manager and the picked version, which fell back to the
newest release of the destination route.

The version now changes in place, like it already did within a route, and
the URL is updated with history.replaceState, which Next syncs with
usePathname. The redirect on load that normalizes the initial route stays.

Assisted-by: Claude Sonnet 5.5 <noreply@anthropic.com>

Author: ovflowd

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -4,8 +4,8 @@ import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptS
 import { useLocale, useTranslations } from 'next-intl';
 import { use, useEffect } from 'react';
 
-import { redirect, usePathname } from '#site/navigation.mjs';
-import { STATUS_KIND_MAP } from '#site/next.constants.mjs';
+import { getPathname, redirect, usePathname } from '#site/navigation.mjs';
+import { BASE_PATH, STATUS_KIND_MAP } from '#site/next.constants.mjs';
 import {
   ReleaseContext,
   ReleasesContext,
@@ -46,21 +46,23 @@ const VersionDropdown: FC = () => {
     // eslint-disable-next-line @eslint-react/exhaustive-deps -- deps are correct on first render, and this should not run again.
   }, []);
 
-  // Handle setting the new version or navigating to the correct route based on status.
-  const setVersionOrNavigate = (version: string) => {
+  // Sets the new version and keeps the URL matching its status. The URL is replaced
+  // in place, as navigating remounts the page and discards the user's selections.
+  const setVersionAndSyncRoute = (version: string) => {
     const selectedRelease = releases.find(
       ({ versionWithPrefix }) => versionWithPrefix === version
     );
 
-    if (selectedRelease) {
-      const href = getRedirectPath(selectedRelease.status);
-      if (href) {
-        redirect({ href, locale });
-        return;
-      }
-    }
-
     setVersion(version);
+
+    const href = selectedRelease && getRedirectPath(selectedRelease.status);
+    if (href) {
+      window.history.replaceState(
+        null,
+        '',
+        `${BASE_PATH}${getPathname({ href, locale })}`
+      );
+    }
   };
 
   return (
@@ -72,7 +74,7 @@ const VersionDropdown: FC = () => {
         badge: { label: status, kind: STATUS_KIND_MAP[status] },
       }))}
       defaultValue={release.versionWithPrefix}
-      onChange={setVersionOrNavigate}
+      onChange={setVersionAndSyncRoute}
       className="min-w-36"
       inline={true}
     />

apps/site/components/Downloads/Release/__tests__/PlatformDropdown.test.jsx

@@ -0,0 +1,118 @@
+import assert from 'node:assert/strict';
+import { beforeEach, describe, it, mock } from 'node:test';
+
+import { act, render } from '@testing-library/react';
+
+import { MatterContext } from '#site/providers/matterProvider';
+import {
+  ReleaseProvider,
+  ReleasesProvider,
+} from '#site/providers/releaseProvider';
+
+const VERSION = 'layouts.download.dropdown.version';
+const PLATFORM = 'layouts.download.dropdown.platform';
+
+const selects = {};
+const redirect = mock.fn();
+let pathname;
+
+const replaceState = mock.method(window.history, 'replaceState', (...args) => {
+  pathname = args[2].replace('/en', '');
+});
+
+const Select = props => {
+  selects[props.ariaLabel] = props;
+  return null;
+};
+
+mock.module('@node-core/ui-components/Common/Select', {
+  defaultExport: Select,
+});
+
+mock.module('@node-core/ui-components/Common/Select/NoScriptSelect', {
+  defaultExport: Select,
+});
+
+mock.module('#site/navigation.mjs', {
+  namedExports: {
+    redirect,
+    getPathname: ({ href, locale }) => `/${locale}${href}`,
+    usePathname: () => pathname,
+  },
+});
+
+const { default: OperatingSystemDropdown } =
+  await import('../OperatingSystemDropdown');
+const { default: PlatformDropdown } = await import('../PlatformDropdown');
+const { default: VersionDropdown } = await import('../VersionDropdown');
+
+const releases = [
+  { versionWithPrefix: 'v26.0.0-alpha.1', status: 'Alpha' },
+  { versionWithPrefix: 'v25.0.0', status: 'Current' },
+  { versionWithPrefix: 'v24.0.0', status: 'LTS' },
+  { versionWithPrefix: 'v18.0.0', status: 'EOL' },
+];
+
+const renderDownloadPage = () =>
+  render(
+    <MatterContext value={{ os: 'LINUX', architecture: 'x64', bitness: '64' }}>
+      <ReleasesProvider releases={releases} snippets={[]}>
+        <ReleaseProvider initialRelease={releases[2]}>
+          <VersionDropdown />
+          <ReleaseProvider>
+            <OperatingSystemDropdown />
+            <PlatformDropdown />
+          </ReleaseProvider>
+        </ReleaseProvider>
+      </ReleasesProvider>
+    </MatterContext>
+  );
+
+describe('PlatformDropdown', () => {
+  beforeEach(() => {
+    pathname = '/download';
+    redirect.mock.resetCalls();
+    replaceState.mock.resetCalls();
+  });
+
+  it('defaults to the detected platform', () => {
+    renderDownloadPage();
+
+    assert.equal(selects[PLATFORM].value, 'x64');
+  });
+
+  it('keeps the selected platform when the version changes route', () => {
+    renderDownloadPage();
+
+    act(() => selects[PLATFORM].onChange('arm64'));
+    assert.equal(selects[PLATFORM].value, 'arm64');
+
+    for (const { versionWithPrefix } of [
+      releases[0],
+      releases[1],
+      releases[3],
+    ]) {
+      act(() => selects[VERSION].onChange(versionWithPrefix));
+
+      assert.equal(selects[VERSION].defaultValue, versionWithPrefix);
+      assert.equal(selects[PLATFORM].value, 'arm64');
+    }
+
+    assert.equal(redirect.mock.callCount(), 0);
+    assert.deepEqual(
+      replaceState.mock.calls.map(call => call.arguments[2]),
+      ['/en/download/alpha', '/en/download/current', '/en/download']
+    );
+  });
+
+  it('keeps the selected platform when the version stays on the route', () => {
+    renderDownloadPage();
+
+    act(() => selects[PLATFORM].onChange('arm64'));
+    act(() => selects[VERSION].onChange('v18.0.0'));
+
+    assert.equal(selects[VERSION].defaultValue, 'v18.0.0');
+    assert.equal(selects[PLATFORM].value, 'arm64');
+    assert.equal(replaceState.mock.callCount(), 0);
+  });
+});

apps/site/components/Downloads/Release/__tests__/VersionDropdown.test.jsx

@@ -11,6 +11,7 @@ import {
 
 const redirect = mock.fn();
 const setVersion = mock.fn();
+const replaceState = mock.method(window.history, 'replaceState', () => {});
 const Select = mock.fn(() => null);
 let pathname;
 
@@ -21,6 +22,7 @@ mock.module('@node-core/ui-components/Common/Select/NoScriptSelect', {
 mock.module('#site/navigation.mjs', {
   namedExports: {
     redirect,
+    getPathname: ({ href, locale }) => `/${locale}${href}`,
     usePathname: () => pathname,
   },
 });
@@ -90,6 +92,7 @@ describe('VersionDropdown', () => {
   beforeEach(() => {
     pathname = '/download';
     redirect.mock.resetCalls();
+    replaceState.mock.resetCalls();
     setVersion.mock.resetCalls();
     Select.mock.resetCalls();
   });
@@ -156,25 +159,21 @@ describe('VersionDropdown', () => {
 
           act(() => onChange(version));
 
+          assert.equal(redirect.mock.callCount(), 0);
+          assert.equal(setVersion.mock.callCount(), 1);
+          assert.deepEqual(setVersion.mock.calls[0].arguments, [version]);
+          assert.equal(
+            Select.mock.calls.at(-1).arguments[0].defaultValue,
+            version
+          );
+
           if (target.path !== path) {
-            assert.equal(redirect.mock.callCount(), 1);
-            assert.deepEqual(redirect.mock.calls[0].arguments, [
-              { href: target.path, locale: 'en' },
-            ]);
-            assert.equal(setVersion.mock.callCount(), 0);
-            assert.equal(Select.mock.callCount(), 1);
-            assert.equal(
-              Select.mock.calls.at(-1).arguments[0].defaultValue,
-              release.versionWithPrefix
+            assert.deepEqual(
+              replaceState.mock.calls.map(call => call.arguments),
+              [[null, '', `/en${target.path}`]]
             );
           } else {
-            assert.equal(redirect.mock.callCount(), 0);
-            assert.equal(setVersion.mock.callCount(), 1);
-            assert.deepEqual(setVersion.mock.calls[0].arguments, [version]);
-            assert.equal(
-              Select.mock.calls.at(-1).arguments[0].defaultValue,
-              version
-            );
+            assert.equal(replaceState.mock.callCount(), 0);
           }
         });
       }

apps/site/navigation.mjs

@@ -3,6 +3,7 @@
 import { availableLocaleCodes } from '@node-core/website-i18n';
 import { createNavigation } from 'next-intl/navigation';
 
-export const { Link, redirect, usePathname, useRouter } = createNavigation({
-  locales: availableLocaleCodes,
-});
+export const { Link, redirect, getPathname, usePathname, useRouter } =
+  createNavigation({
+    locales: availableLocaleCodes,
+  });