[Website] Keep the current WordPress version in the settings dropdown

packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx

@@ -16,9 +16,8 @@ import { RecommendedPHPVersion } from '@wp-playground/common';
 import {
 	getForcedPhpVersionForWordPress,
 	isOlderWordPressVersion,
-	OlderWordPressVersions,
 } from './older-wordpress-versions';
-import { formatWordPressVersionLabel } from './wordpress-release-names';
+import { getWordPressVersionOptions } from './wordpress-version-options';
 
 type ConfigurableFields = Record<
 	keyof SiteFormData & ('wpVersion' | 'language' | 'multisite'),
@@ -144,42 +143,12 @@ export function UnconnectedSiteSettingsForm({
 	}, [forcedPhpVersion, setValue, getValues]);
 
 	const wpVersionOptions = useMemo(() => {
-		const modernOptions = Object.keys(supportedWPVersions || {}).map(
-			(version) => ({
-				label: formatWordPressVersionLabel(
-					`${supportedWPVersions[version]}`
-				),
-				value: version,
-			})
-		);
-		if (!includeOlderVersions) {
-			return [
-				// Without an empty option, React sometimes says the
-				// current selected version is "trunk" when `wp` is
-				// actually "6.4".
-				{ label: '-- Select a version --', value: '' },
-				...modernOptions,
-			];
-		}
-		return [
-			{ label: '-- Select a version --', value: '' },
-			{
-				label: '── Current versions ──',
-				value: '__modern_sep',
-				disabled: true,
-			},
-			...modernOptions,
-			{
-				label: '── Older versions ──',
-				value: '__older_sep',
-				disabled: true,
-			},
-			...OlderWordPressVersions.map((version) => ({
-				label: formatWordPressVersionLabel(version),
-				value: version,
-			})),
-		];
-	}, [supportedWPVersions, includeOlderVersions]);
+		return getWordPressVersionOptions({
+			supportedWPVersions,
+			includeOlderVersions,
+			selectedVersion: mergedDefaults.wpVersion,
+		});
+	}, [supportedWPVersions, includeOlderVersions, mergedDefaults.wpVersion]);
 
 	const phpVersionOptions = useMemo(() => {
 		if (forcedPhpVersion) {

packages/playground/website/src/components/site-manager/site-settings-form/wordpress-version-options.spec.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import { getWordPressVersionOptions } from './wordpress-version-options';
+
+describe('getWordPressVersionOptions', () => {
+	it('keeps a selected version while the runtime index catches up', () => {
+		const options = getWordPressVersionOptions({
+			supportedWPVersions: {
+				latest: '6.9',
+				trunk: '7.0-beta1',
+			},
+			includeOlderVersions: false,
+			selectedVersion: '6.8',
+		});
+
+		expect(options.map(({ value }) => value)).toEqual([
+			'',
+			'6.8',
+			'latest',
+			'trunk',
+		]);
+	});
+
+	it('does not duplicate versions already in either list', () => {
+		const currentOptions = getWordPressVersionOptions({
+			supportedWPVersions: { '6.8': '6.8' },
+			includeOlderVersions: false,
+			selectedVersion: '6.8',
+		});
+		const olderOptions = getWordPressVersionOptions({
+			supportedWPVersions: { '6.8': '6.8' },
+			includeOlderVersions: true,
+			selectedVersion: '6.2',
+		});
+
+		expect(
+			currentOptions.filter(({ value }) => value === '6.8')
+		).toHaveLength(1);
+		expect(
+			olderOptions.filter(({ value }) => value === '6.2')
+		).toHaveLength(1);
+	});
+
+	it('keeps a selected older version when the older list is hidden', () => {
+		const options = getWordPressVersionOptions({
+			supportedWPVersions: { '6.8': '6.8' },
+			includeOlderVersions: false,
+			selectedVersion: '6.2',
+		});
+
+		expect(options.map(({ value }) => value)).toContain('6.2');
+	});
+});

packages/playground/website/src/components/site-manager/site-settings-form/wordpress-version-options.ts

@@ -0,0 +1,69 @@
+import { OlderWordPressVersions } from './older-wordpress-versions';
+import { formatWordPressVersionLabel } from './wordpress-release-names';
+
+type WordPressVersionOption = {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+export function getWordPressVersionOptions({
+	supportedWPVersions,
+	includeOlderVersions,
+	selectedVersion,
+}: {
+	supportedWPVersions: Record<string, string>;
+	includeOlderVersions: boolean;
+	selectedVersion: string;
+}): WordPressVersionOption[] {
+	const modernOptions = Object.keys(supportedWPVersions).map((version) => ({
+		label: formatWordPressVersionLabel(`${supportedWPVersions[version]}`),
+		value: version,
+	}));
+
+	// The version index comes from the running client and can lag behind a
+	// settings-triggered reboot. Keep the site's selected value visible instead
+	// of letting the native select collapse to its empty placeholder meanwhile.
+	if (
+		selectedVersion &&
+		!modernOptions.some((option) => option.value === selectedVersion) &&
+		(!includeOlderVersions ||
+			!(OlderWordPressVersions as readonly string[]).includes(
+				selectedVersion
+			))
+	) {
+		modernOptions.unshift({
+			label: formatWordPressVersionLabel(selectedVersion),
+			value: selectedVersion,
+		});
+	}
+
+	if (!includeOlderVersions) {
+		return [
+			// Without an empty option, React sometimes says the
+			// current selected version is "trunk" when `wp` is
+			// actually "6.4".
+			{ label: '-- Select a version --', value: '' },
+			...modernOptions,
+		];
+	}
+
+	return [
+		{ label: '-- Select a version --', value: '' },
+		{
+			label: '── Current versions ──',
+			value: '__modern_sep',
+			disabled: true,
+		},
+		...modernOptions,
+		{
+			label: '── Older versions ──',
+			value: '__older_sep',
+			disabled: true,
+		},
+		...OlderWordPressVersions.map((version) => ({
+			label: formatWordPressVersionLabel(version),
+			value: version,
+		})),
+	];
+}