[UX] Stored Playgrounds (no more data loss), multiple Playgrounds, UI WebApp Redesign

package.json

@@ -72,11 +72,13 @@
 		"octokit-plugin-create-pull-request": "5.1.1",
 		"react": "^18.2.25",
 		"react-dom": "^18.2.25",
+		"react-hook-form": "7.53.0",
 		"react-modal": "^3.16.1",
 		"react-redux": "8.1.3",
 		"react-transition-group": "4.4.5",
 		"unzipper": "0.10.11",
 		"vite-plugin-api": "1.0.4",
+		"wouter": "3.3.5",
 		"xterm": "5.3.0",
 		"xterm-addon-fit": "0.8.0",
 		"yargs": "17.7.2"

packages/docs/site/docs/developers/06-apis/query-api/01-index.md

@@ -35,10 +35,9 @@ You can go ahead and try it out. The Playground will automatically install the t
 | `lazy`                 |                       | Defer loading the Playground assets until someone clicks on the "Run" button. Does not accept any values. If `lazy` is added as a URL parameter, loading will be deferred.                                                                                                                                                                                                       |
 | `login`                | `yes`                 | Log the user in as an admin. Accepts `yes` or `no`.                                                                                                                                                                                                                                                                                                                              |
 | `multisite`            | `no`                  | Enables the WordPress multisite mode. Accepts `yes` or `no`.                                                                                                                                                                                                                                                                                                                     |
-| `storage`              | `none`                | Selects the storage for Playground: `none` gets erased on page refresh, `browser` is stored in the browser, and `device` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh.                                                                                                                   |
 | `import-site`          |                       | Imports site files and database from a ZIP file specified by a URL.                                                                                                                                                                                                                                                                                                              |
 | `import-wxr`           |                       | Imports site content from a WXR file specified by a URL. It uses the WordPress Importer plugin, so the default admin user must be logged in.                                                                                                                                                                                                                                     |
-| `site-slug`            |                       | Selects which site to load from browser storage. This must be used in combination with `storage=browser`.                                                                                                                                                                                                                                                                        |
+| `site-slug`            |                       | Selects which site to load from browser storage.                                                                                                                                                                                                                                                                                                                                 |
 | `language`             | `en_US`               | Sets the locale for the WordPress instance. This must be used in combination with `networking=yes` otherwise WordPress won't be able to download translations.                                                                                                                                                                                                                   |
 
 For example, the following code embeds a Playground with a preinstalled Gutenberg plugin and opens the post editor:

packages/docs/site/docs/developers/24-limitations/01-index.md

@@ -16,7 +16,7 @@ Playground [disables network connections](../../blueprints/03-data-format.md#fea
 
 ### Temporary by design
 
-As Playground [streams rather than serves](../../main/about/index.md#streamed-not-served) WordPress, all database changes and uploads will be gone when you refresh the page. To avoid losing your work, either [export your work](../../main/quick-start-guide.md#save-your-site) before or enable storage in the browser/device via the [Query API](/developers/apis/query-api#available-options) or the UI.
+As Playground [streams rather than serves](../../main/about/index.md#streamed-not-served) WordPress, all database changes and uploads will be gone when you refresh the page. To avoid losing your work, either [export your work](../../main/quick-start-guide.md#save-your-site) before or enable storage in the browser/device via the "Save" button in the UI.
 
 ## When developing with Playground
 

packages/docs/site/docs/main/web-instance.md

@@ -25,7 +25,6 @@ From the Playground website there are also available some toolbars to customize
 
 The options available from the "Customize Playground" window correpond to the following [Query API options](/developers/apis/query-api#available-options):
 
--   `storage`
 -   `php`
 -   `php-extension-bundle`
 -   `networking`

packages/playground/blueprints/src/lib/compile.ts

@@ -85,6 +85,9 @@ export function compileBlueprint(
 		onStepCompleted = () => {},
 	}: CompileBlueprintOptions = {}
 ): CompiledBlueprint {
+	// Deep clone the blueprint to avoid mutating the input
+	blueprint = structuredClone(blueprint);
+
 	blueprint = {
 		...blueprint,
 		steps: (blueprint.steps || [])
@@ -158,7 +161,10 @@ export function compileBlueprint(
 	// Default to the "kitchen sink" PHP extensions bundle if no
 	// other bundles are specified.
 	if (blueprint.phpExtensionBundles.length === 0) {
-		blueprint.phpExtensionBundles.push('kitchen-sink');
+		blueprint.phpExtensionBundles = [
+			...blueprint.phpExtensionBundles,
+			'kitchen-sink',
+		];
 	}
 
 	/**

packages/playground/storage/src/lib/browser-fs.ts

@@ -16,7 +16,7 @@ export async function opfsPathToDirectoryHandle(
 	const parts = opfsPath.split('/').filter((p) => p.length > 0);
 	let handle = await navigator.storage.getDirectory();
 	for (const part of parts) {
-		handle = await handle.getDirectoryHandle(part);
+		handle = await handle.getDirectoryHandle(part, { create: true });
 	}
 	return handle;
 }

packages/playground/website/cypress/e2e/remote-assets.cy.ts

@@ -2,7 +2,7 @@ describe('Remote Assets', () => {
 	const testedStorageOptions = [
 		'none',
 		// TODO: Re-enable this option once the tests are more stable
-		//'browser'
+		//'opfs'
 	];
 
 	testedStorageOptions.forEach((storage) => {
@@ -15,7 +15,7 @@ describe('Remote Assets', () => {
 			cy.visit(`/?storage=${storage}#${blueprint}`);
 			runAssertions();
 
-			if (storage === 'browser') {
+			if (storage === 'opfs') {
 				// Reload and re-assert to test when loading from browser storage
 				cy.reload();
 				runAssertions();

packages/playground/website/index.html

@@ -43,7 +43,7 @@
 		</script>
 	</head>
 	<body>
-		<div id="root">
+		<main id="root">
 			<script>
 				const query = new URLSearchParams(window.location.search);
 				const shouldLazyLoadPlayground =
@@ -68,7 +68,7 @@
 					root.appendChild(initiator);
 				}
 			</script>
-		</div>
+		</main>
 		<script type="module">
 			if (!shouldLazyLoadPlayground) {
 				import('./src/main');

packages/playground/website/src/components/browser-chrome/index.tsx

@@ -1,104 +1,68 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import css from './style.module.css';
 import AddressBar from '../address-bar';
-import { close } from '@wordpress/icons';
 import classNames from 'classnames';
 import { OpenSiteManagerButton } from '../open-site-manager-button';
+import {
+	useAppSelector,
+	getActiveClientInfo,
+	useActiveSite,
+} from '../../lib/state/redux/store';
+import { SyncLocalFilesButton } from '../sync-local-files-button';
 
 interface BrowserChromeProps {
 	children?: React.ReactNode;
-	toolbarButtons?: Array<React.ReactElement | false | null>;
-	url?: string;
-	showAddressBar?: boolean;
-	onUrlChange?: (url: string) => void;
 	hideToolbar?: boolean;
 	className?: string;
 }
 
 export default function BrowserChrome({
 	children,
-	url,
-	onUrlChange,
-	showAddressBar = true,
-	toolbarButtons,
 	hideToolbar,
 	className,
 }: BrowserChromeProps) {
+	const clientInfo = useAppSelector(getActiveClientInfo);
+	const activeSite = useActiveSite();
+	const showAddressBar = !!clientInfo;
+	const url = clientInfo?.url;
 	const addressBarClass = classNames(css.addressBarSlot, {
 		[css.isHidden]: !showAddressBar,
 	});
 	const wrapperClass = classNames(css.wrapper, css.hasFullSizeWindow);
 
-	const [noticeHidden, setNoticeHidden] = useState(
-		document.cookie.includes('hideExperimentalNotice=true')
-	);
-
-	const hideNotice = () => {
-		document.cookie = 'hideExperimentalNotice=true';
-		setNoticeHidden(true);
-	};
-	useEffect(() => {
-		const hideNoticeTimeout = setTimeout(hideNotice, 20000);
-		return () => {
-			clearTimeout(hideNoticeTimeout);
-		};
-	}, []);
-
-	const experimentalNoticeClass = classNames(css.experimentalNotice, {
-		[css.isHidden]: noticeHidden,
-	});
-
-	/**
-	 * Temporary feature flag to enable the site manager
-	 * while using browser storage.
-	 *
-	 * TODO: Remove this once the site manager supports all storage options.
-	 */
-	const query = new URLSearchParams(window.location.search);
-	const showSiteManager = query.get('storage') === 'browser';
-
 	return (
 		<div
 			className={`${wrapperClass} ${className}`}
 			data-cy="simulated-browser"
 		>
 			<div className={`${css.window} browser-chrome-window`}>
 				<header
-					className={`${css.toolbar} ${
-						showSiteManager ? css.hasSiteManager : ''
-					} ${hideToolbar ? css.toolbarHidden : ''}`}
+					className={`
+						${css.toolbar}
+						${hideToolbar ? css.toolbarHidden : ''}
+					`}
 					aria-label="Playground toolbar"
 				>
 					<div className={css.windowControls}>
-						{showSiteManager && <OpenSiteManagerButton />}
-						{!showSiteManager && (
-							<>
-								<div
-									className={`${css.windowControl} ${css.isNeutral}`}
-								></div>
-								<div
-									className={`${css.windowControl} ${css.isNeutral}`}
-								></div>
-								<div
-									className={`${css.windowControl} ${css.isNeutral}`}
-								></div>
-							</>
-						)}
+						<OpenSiteManagerButton />
 					</div>
 
 					<div className={addressBarClass}>
-						<AddressBar url={url} onUpdate={onUrlChange} />
+						<AddressBar
+							url={url}
+							onUpdate={(newUrl) =>
+								clientInfo?.client.goTo(newUrl)
+							}
+						/>
 					</div>
 
-					<div className={css.toolbarButtons}>{toolbarButtons}</div>
+					<div className={css.toolbarButtons}>
+						{activeSite?.metadata?.storage === 'local-fs' ? (
+							<SyncLocalFilesButton />
+						) : null}
+					</div>
 				</header>
 				<div className={css.content}>{children}</div>
-				<div className={experimentalNoticeClass} onClick={hideNotice}>
-					{close}
-					This is a cool fun experimental WordPress running in your
-					browser :) All your changes are private and gone after a
-					page refresh.
-				</div>
 			</div>
 		</div>
 	);