From 54e16b1a2a005926c38959e364eb2a5f85becd8d Mon Sep 17 00:00:00 2001
From: Marc Armengou <83702259+MarcArmengou@users.noreply.github.com>
Date: Thu, 5 Oct 2023 14:55:54 +0200
Subject: [PATCH] Renamed the param opfs-browser from Query API, to browser
 (#651)

## What is this PR doing?

Changed the param 'opfs-browser' to 'browser' as discussed at:
https://github.com/WordPress/wordpress-playground/issues/636

Kept the old names working, for now.

## What problem does it solve?

Renamed the opfs-browser parameter to simply browser, to make it easier
for users to remember.
---
 packages/docs/site/docs/08-query-api/01-index.md          | 2 +-
 packages/playground/remote/src/lib/worker-thread.ts       | 6 +++---
 .../components/playground-configuration-group/form.tsx    | 8 ++++----
 .../components/playground-configuration-group/index.tsx   | 8 ++++----
 .../reload-with-new-configuration.ts                      | 4 ++--
 packages/playground/website/src/lib/hooks.ts              | 2 +-
 packages/playground/website/src/types.ts                  | 2 +-
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/docs/site/docs/08-query-api/01-index.md b/packages/docs/site/docs/08-query-api/01-index.md
index 120b7e1f32..e69e0e2c63 100644
--- a/packages/docs/site/docs/08-query-api/01-index.md
+++ b/packages/docs/site/docs/08-query-api/01-index.md
@@ -32,7 +32,7 @@ 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                                                                                                                                                                                                                                                                                   |
 | `login`        | `1`           | Logs the user in as an admin                                                                                                                                                                                                                                                                                                                                   |
 | `gutenberg-pr` |               | Loads the specified Gutenberg Pull Request                                                                                                                                                                                                                                                                                                                     |
-| `storage`      |               | Selects the storage for Playground: `temporary` gets erased on page refresh, `opfs-browser` is stored in the browser, and `opfs-host` is stored in the selected directory on a local computer. The last two protect the user from accidentally losing their work upon page refresh.                                                                            |
+| `storage`      |               | Selects the storage for Playground: `temporary` gets erased on page refresh, `browser` is stored in the browser, and `opfs-host` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh.                                                                            |
 
 For example, the following code embeds a Playground with a preinstalled Gutenberg plugin, and opens the post editor:
 
diff --git a/packages/playground/remote/src/lib/worker-thread.ts b/packages/playground/remote/src/lib/worker-thread.ts
index 8fe72b2033..b5c8ac2ad6 100644
--- a/packages/playground/remote/src/lib/worker-thread.ts
+++ b/packages/playground/remote/src/lib/worker-thread.ts
@@ -55,9 +55,9 @@ let virtualOpfsDir: FileSystemDirectoryHandle | undefined;
 let lastOpfsDir: FileSystemDirectoryHandle | undefined;
 let wordPressAvailableInOPFS = false;
 if (
-	startupOptions.storage === 'opfs-browser' &&
-	// @ts-ignore
-	typeof navigator?.storage?.getDirectory !== 'undefined'
+  (startupOptions.storage === 'opfs-browser' || startupOptions.storage === 'browser') &&
+  // @ts-ignore
+  typeof navigator?.storage?.getDirectory !== 'undefined'
 ) {
 	virtualOpfsRoot = await navigator.storage.getDirectory();
 	virtualOpfsDir = await virtualOpfsRoot.getDirectoryHandle('wordpress', {
diff --git a/packages/playground/website/src/components/playground-configuration-group/form.tsx b/packages/playground/website/src/components/playground-configuration-group/form.tsx
index 6ea8cfb957..81e21adf50 100644
--- a/packages/playground/website/src/components/playground-configuration-group/form.tsx
+++ b/packages/playground/website/src/components/playground-configuration-group/form.tsx
@@ -124,14 +124,14 @@ export function PlaygroundConfigurationForm({
 						<input
 							type="radio"
 							name="storage"
-							value="opfs-browser"
-							id="storage-opfs-browser"
+							value="browser"
+							id="storage-browser"
 							className={forms.radioInput}
 							onChange={handleStorageChange}
-							checked={storage === 'opfs-browser'}
+							checked={storage === 'browser'}
 						/>
 						<label
-							htmlFor="storage-opfs-browser"
+							htmlFor="storage-browser"
 							className={forms.radioLabel}
 						>
 							Persistent: stored in this browser
diff --git a/packages/playground/website/src/components/playground-configuration-group/index.tsx b/packages/playground/website/src/components/playground-configuration-group/index.tsx
index 6cccd47d4d..1f9c1a9556 100644
--- a/packages/playground/website/src/components/playground-configuration-group/index.tsx
+++ b/packages/playground/website/src/components/playground-configuration-group/index.tsx
@@ -144,7 +144,7 @@ export default function PlaygroundConfigurationGroup({
 			});
 			await playground.goTo('/');
 
-			// Read current querystring and replace storage=opfs-browser with storage=opfs-host.
+			// Read current querystring and replace storage=browser with storage=opfs-host.
 			const url = new URL(window.location.href);
 			url.searchParams.set('storage', 'opfs-host');
 			window.history.pushState({}, '', url.toString());
@@ -157,7 +157,7 @@ export default function PlaygroundConfigurationGroup({
 
 	async function handleSubmit(config: PlaygroundConfiguration) {
 		const playground = await playgroundRef.current!.promise;
-		if (config.resetSite && config.storage === 'opfs-browser') {
+		if (config.resetSite && (config.storage === 'opfs-browser' || config.storage === 'browser')) {
 			if (
 				!window.confirm(
 					'This will wipe out all stored data and start a new site. Do you want to proceed?'
@@ -176,14 +176,14 @@ export default function PlaygroundConfigurationGroup({
 				WP {runningWp || currentConfiguration.wp} {' - '}
 				{currentConfiguration.storage === 'opfs-host'
 					? `Local (${dirName})`
-					: currentConfiguration.storage === 'opfs-browser'
+					: currentConfiguration.storage === 'opfs-browser' || currentConfiguration.storage === 'browser'
 					? 'Persistent'
 					: '⚠️ Temporary'}
 			</Button>
 			{currentConfiguration.storage === 'opfs-host' ? (
 				<SyncLocalFilesButton />
 			) : null}
-			{currentConfiguration.storage === 'opfs-browser' ? (
+			{currentConfiguration.storage === 'opfs-browser' || currentConfiguration.storage === 'browser' ? (
 				<StartOverButton />
 			) : null}
 			{isResumeLastDirOpen ? (
diff --git a/packages/playground/website/src/components/playground-configuration-group/reload-with-new-configuration.ts b/packages/playground/website/src/components/playground-configuration-group/reload-with-new-configuration.ts
index c129caac20..db2d19e6bd 100644
--- a/packages/playground/website/src/components/playground-configuration-group/reload-with-new-configuration.ts
+++ b/packages/playground/website/src/components/playground-configuration-group/reload-with-new-configuration.ts
@@ -5,8 +5,8 @@ export async function reloadWithNewConfiguration(
 	playground: PlaygroundClient,
 	config: PlaygroundConfiguration
 ) {
-	if (config.resetSite && config.storage === 'opfs-browser') {
-		await playground?.resetVirtualOpfs();
+	if (config.resetSite && (config.storage === 'opfs-browser' || config.storage === 'browser')) {
+  		await playground?.resetVirtualOpfs();
 	}
 
 	const url = new URL(window.location.toString());
diff --git a/packages/playground/website/src/lib/hooks.ts b/packages/playground/website/src/lib/hooks.ts
index aff29eddc5..da4dfa2cc7 100644
--- a/packages/playground/website/src/lib/hooks.ts
+++ b/packages/playground/website/src/lib/hooks.ts
@@ -5,7 +5,7 @@ import { buildVersion } from './config';
 
 interface UsePlaygroundOptions {
 	blueprint?: Blueprint;
-	storage?: 'opfs-host' | 'opfs-browser' | 'temporary';
+	storage?: 'opfs-host' | 'opfs-browser' | 'browser' | 'temporary';
 }
 export function usePlayground({ blueprint, storage }: UsePlaygroundOptions) {
 	const iframeRef = useRef<HTMLIFrameElement>(null);
diff --git a/packages/playground/website/src/types.ts b/packages/playground/website/src/types.ts
index 269055445f..a2d0610c9c 100644
--- a/packages/playground/website/src/types.ts
+++ b/packages/playground/website/src/types.ts
@@ -1,2 +1,2 @@
-export const StorageTypes = ['opfs-browser', 'temporary', 'opfs-host'] as const;
+export const StorageTypes = ['browser', 'temporary', 'opfs-host', 'opfs-browser'] as const;
 export type StorageType = (typeof StorageTypes)[number];