[Website] Rename Create a similar Playground to Edit Playground settings

packages/playground/website/playwright/e2e/website-ui.spec.ts

@@ -57,11 +57,12 @@ SupportedPHPVersions.forEach(async (version) => {
 		}
 		await website.goto(`./`);
 
-		await website.openForkPlaygroundSettings();
+		await website.openPlaygroundSettings();
 
 		await website.selectPHPVersion(version);
 
-		await website.clickSaveInForkPlaygroundSettings();
+		await website.clickSaveInPlaygroundSettings();
+		await website.confirmPlaygroundSettingsUpdate();
 
 		await expect(
 			await website.getSiteInfoRowLocator('PHP version')
@@ -72,7 +73,7 @@ SupportedPHPVersions.forEach(async (version) => {
 		website,
 	}) => {
 		await website.goto('./');
-		await website.openForkPlaygroundSettings();
+		await website.openPlaygroundSettings();
 		await website.selectPHPVersion(version);
 
 		// Uncheck the "with extensions" checkbox
@@ -81,7 +82,8 @@ SupportedPHPVersions.forEach(async (version) => {
 		);
 		await phpExtensionCheckbox.uncheck();
 
-		await website.clickSaveInForkPlaygroundSettings();
+		await website.clickSaveInPlaygroundSettings();
+		await website.confirmPlaygroundSettingsUpdate();
 
 		await expect(
 			await website.getSiteInfoRowLocator('PHP version')
@@ -97,9 +99,10 @@ Object.keys(MinifiedWordPressVersions)
 			website,
 		}) => {
 			await website.goto('./');
-			await website.openForkPlaygroundSettings();
+			await website.openPlaygroundSettings();
 			await website.selectWordPressVersion(version);
-			await website.clickSaveInForkPlaygroundSettings();
+			await website.clickSaveInPlaygroundSettings();
+			await website.confirmPlaygroundSettingsUpdate();
 
 			await expect(
 				await website.getSiteInfoRowLocator('WordPress version')
@@ -128,19 +131,21 @@ test('should display networking as active when networking is enabled', async ({
 test('should enable networking when requested', async ({ website }) => {
 	await website.goto('./');
 
-	await website.openForkPlaygroundSettings();
+	await website.openPlaygroundSettings();
 	await website.setNetworkingEnabled(true);
-	await website.clickSaveInForkPlaygroundSettings();
+	await website.clickSaveInPlaygroundSettings();
+	await website.confirmPlaygroundSettingsUpdate();
 
 	await expect(await website.hasNetworkingEnabled()).toBeTruthy();
 });
 
 test('should disable networking when requested', async ({ website }) => {
 	await website.goto('./?networking=yes');
 
-	await website.openForkPlaygroundSettings();
+	await website.openPlaygroundSettings();
 	await website.setNetworkingEnabled(false);
-	await website.clickSaveInForkPlaygroundSettings();
+	await website.clickSaveInPlaygroundSettings();
+	await website.confirmPlaygroundSettingsUpdate();
 
 	await expect(await website.hasNetworkingEnabled()).toBeFalsy();
 });

packages/playground/website/playwright/website-page.ts

@@ -65,12 +65,12 @@ export class WebsitePage {
 			.innerText();
 	}
 
-	async openForkPlaygroundSettings() {
+	async openPlaygroundSettings() {
 		await this.ensureSiteManagerIsOpen();
 		const editSettingsButton = this.page.locator(
 			'button.components-button',
 			{
-				hasText: 'Create a similar Playground',
+				hasText: 'Edit Playground settings',
 			}
 		);
 		await editSettingsButton.click({ timeout: 5000 });
@@ -81,16 +81,26 @@ export class WebsitePage {
 		await phpVersionSelect.selectOption(version);
 	}
 
-	async clickSaveInForkPlaygroundSettings() {
+	async clickSaveInPlaygroundSettings() {
 		const saveSettingsButton = this.page.locator(
 			'button.components-button.is-primary',
 			{
-				hasText: 'Create',
+				hasText: 'Update',
 			}
 		);
 		await saveSettingsButton.click();
 	}
 
+	async confirmPlaygroundSettingsUpdate() {
+		const confirmSettingsUpdateButton = this.page.locator(
+			'button.components-button.is-primary',
+			{
+				hasText: 'Reset and update',
+			}
+		);
+		await confirmSettingsUpdateButton.click();
+	}
+
 	async selectWordPressVersion(version: string) {
 		const wordpressVersionSelect = this.page.locator(
 			'select[name=wpVersion]'

packages/playground/website/src/components/site-manager/site-info-panel/index.tsx

@@ -548,7 +548,7 @@ function SiteSettingsTab({ site }: { site: SiteInfo }) {
 											className={css.buttonNoPadding}
 											onClick={onClick}
 										>
-											Create a similar Playground
+											Edit Playground settings
 										</Button>
 									)}
 								</StartSimilarSiteButton>

packages/playground/website/src/components/site-manager/start-similar-site-button/index.tsx

@@ -1,22 +1,29 @@
-import { Modal } from '@wordpress/components';
+import { Modal, Button, Flex, FlexItem } from '@wordpress/components';
 import { useMemo, useState } from 'react';
-import { useAppSelector } from '../../../lib/state/redux/store';
+import { useAppDispatch, useAppSelector } from '../../../lib/state/redux/store';
 import SiteSettingsForm, { SiteFormData } from '../site-settings-form';
-import { selectSiteBySlug } from '../../../lib/state/redux/slice-sites';
+import {
+	removeSite,
+	selectSiteBySlug,
+} from '../../../lib/state/redux/slice-sites';
 import { redirectTo, PlaygroundRoute } from '../../../lib/state/url/router';
 import { randomSiteName } from '../../../lib/state/redux/random-site-name';
-
+import css from './style.module.css';
 export function StartSimilarSiteButton({
 	siteSlug,
 	children,
 }: {
 	siteSlug: string;
 	children: (onClick: () => void) => React.ReactNode;
 }) {
+	const [confirmDialogSiteFormData, setConfirmDialogSiteFormData] = useState<
+		SiteFormData | false
+	>(false);
 	const siteInfo = useAppSelector((state) =>
 		selectSiteBySlug(state, siteSlug)
 	)!;
 	const [isModalOpen, setModalOpen] = useState(false);
+	const dispatch = useAppDispatch();
 	const updateSite = async (data: SiteFormData) => {
 		redirectTo(
 			PlaygroundRoute.newTemporarySite({
@@ -34,19 +41,28 @@ export function StartSimilarSiteButton({
 				},
 			})
 		);
-		// @TODO: Display a notification of updated site or forked site
-		setModalOpen(false);
+		setConfirmDialogSiteFormData(false);
+	};
+	const resetSite = async (data: SiteFormData) => {
+		/**
+		 * Resetting requires site removal
+		 * to free up the site slug for reuse.
+		 */
+		await dispatch(removeSite(siteSlug));
+		await updateSite(data);
+	};
+	const cloneSite = async (data: SiteFormData) => {
+		/**
+		 * Cloning requires a new name
+		 * to not interfere with the original site slug.
+		 */
+		await updateSite({ ...data, name: randomSiteName() });
 	};
 	const defaultValues = useMemo<Partial<SiteFormData>>(() => {
 		const searchParams = siteInfo.originalUrlParams?.searchParams || {};
 		const runtimeConf = siteInfo.metadata?.runtimeConfiguration || {};
 		return {
-			// @TODO: Choose one:
-			// - Populate with the site name from the original URL params and
-			//   when the site is saved, update it instead of creating a new temp site.
-			// - Fork existing site and populate with new random name.
-			// - Allow user to choose between Fork and Edit operations
-			name: randomSiteName(),
+			name: siteInfo.metadata.name,
 			phpVersion: runtimeConf?.preferredVersions?.php as any,
 			wpVersion: runtimeConf?.preferredVersions?.wp as any,
 			withNetworking: runtimeConf?.features?.networking,
@@ -63,16 +79,74 @@ export function StartSimilarSiteButton({
 	return (
 		<div>
 			{children(() => setModalOpen(true))}
-
+			{!!confirmDialogSiteFormData && (
+				<Modal
+					onRequestClose={() => setConfirmDialogSiteFormData(false)}
+					title="Confirm Playground settings update"
+					size="medium"
+				>
+					<p>
+						Clone will create a new temporary Playground with
+						updated settings and keep the changes you made
+						previously.
+					</p>
+					<p>
+						Resetting will remove the Playground and all changes you
+						made previously and create a new Playground with the
+						updated settings.
+					</p>
+					<Flex direction="column">
+						<FlexItem>
+							<Button
+								variant="primary"
+								className={css.confirmDialogButton}
+								onClick={() =>
+									resetSite(
+										confirmDialogSiteFormData as SiteFormData
+									)
+								}
+							>
+								Reset site and update settings
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="secondary"
+								className={css.confirmDialogButton}
+								onClick={() =>
+									cloneSite(
+										confirmDialogSiteFormData as SiteFormData
+									)
+								}
+							>
+								Clone site with new settings
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="tertiary"
+								className={css.confirmDialogButton}
+								onClick={() =>
+									setConfirmDialogSiteFormData(false)
+								}
+							>
+								Cancel
+							</Button>
+						</FlexItem>
+					</Flex>
+				</Modal>
+			)}
 			{isModalOpen && (
 				<Modal
-					title="Create a similar Playground"
+					title="Edit Playground settings"
 					onRequestClose={() => setModalOpen(false)}
 				>
 					<SiteSettingsForm
-						onSubmit={updateSite}
+						onSubmit={(data: SiteFormData) =>
+							setConfirmDialogSiteFormData(data)
+						}
 						onCancel={() => setModalOpen(false)}
-						submitButtonText="Create"
+						submitButtonText="Update"
 						defaultValues={defaultValues}
 					/>
 				</Modal>

packages/playground/website/src/components/site-manager/start-similar-site-button/style.module.css

@@ -0,0 +1,5 @@
+.confirm-dialog-button {
+	width: 100%;
+	text-align: center;
+	display: block;
+}