From 7161785cd69b075d9279b382de30886874e46e81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Somhairle=20MacLe=C3=B2id?= <smacleod@cloudflare.com>
Date: Mon, 25 Sep 2023 18:37:54 +0100
Subject: [PATCH] Address feedback around forms, icons and default worker
 content (#4024)

* Address feedback

* :facepalm:
---
 .../generate-default-hash.ts                  |   8 ++
 .../src/QuickEditor/ToolsPane.tsx             |   4 +
 .../src/QuickEditor/TopBar.tsx                | 132 ++++++++++--------
 .../src/QuickEditor/defaultHash.ts            |   2 +-
 packages/workers-playground/welcome/data.js   |   4 +
 packages/workers-playground/welcome/index.js  |   8 +-
 6 files changed, 99 insertions(+), 59 deletions(-)
 create mode 100644 packages/workers-playground/welcome/data.js

diff --git a/packages/workers-playground/generate-default-hash.ts b/packages/workers-playground/generate-default-hash.ts
index 2c0ed8df6c3b..5e3282775d31 100644
--- a/packages/workers-playground/generate-default-hash.ts
+++ b/packages/workers-playground/generate-default-hash.ts
@@ -20,6 +20,14 @@ const metadata = {
 
 worker.set("metadata", JSON.stringify(metadata));
 
+worker.set(
+	"data.js",
+	new Blob([await readFile("./welcome/data.js", "utf8")], {
+		type: "application/javascript+module",
+	}),
+	"data.js"
+);
+
 worker.set(
 	"index.js",
 	new Blob([await readFile("./welcome/index.js", "utf8")], {
diff --git a/packages/workers-playground/src/QuickEditor/ToolsPane.tsx b/packages/workers-playground/src/QuickEditor/ToolsPane.tsx
index f57b821a59b6..bf9ea85fd718 100644
--- a/packages/workers-playground/src/QuickEditor/ToolsPane.tsx
+++ b/packages/workers-playground/src/QuickEditor/ToolsPane.tsx
@@ -44,24 +44,28 @@ export default function ToolsPane() {
 								gap={2}
 							>
 								<A
+									title="Open Worker’s documentation"
 									target="_blank"
 									display={"inline-flex"}
 									href={`https://developers.cloudflare.com/workers`}
 								>
 									<Icon
 										type="documentation"
+										size={20}
 										color={
 											isDarkMode() ? theme.colors.black : theme.colors.gray[5]
 										}
 									></Icon>
 								</A>
 								<A
+									title="Join Cloudflare’s developer Discord"
 									target="_blank"
 									display={"inline-flex"}
 									href={`https://discord.gg/cloudflaredev`}
 								>
 									<Icon
 										type="discord"
+										size={20}
 										color={
 											isDarkMode() ? theme.colors.black : theme.colors.gray[5]
 										}
diff --git a/packages/workers-playground/src/QuickEditor/TopBar.tsx b/packages/workers-playground/src/QuickEditor/TopBar.tsx
index 1415606b2247..71aa76d9c4c3 100644
--- a/packages/workers-playground/src/QuickEditor/TopBar.tsx
+++ b/packages/workers-playground/src/QuickEditor/TopBar.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { A, Div, Strong } from "@cloudflare/elements";
+import { A, Div, Form, Span, Strong } from "@cloudflare/elements";
 import { createComponent } from "@cloudflare/style-container";
 import { Button } from "@cloudflare/component-button";
 import { Icon } from "@cloudflare/component-icon";
@@ -64,68 +64,86 @@ export function TopBar() {
 		}
 	}, [hasCopied]);
 	return (
-		<>
-			<Wrapper>
-				<A href="/" color="inherit">
-					<WorkersLogo />
-				</A>
-				<A target="_blank" href="/playground">
-					<Button ml={2} type="primary" inverted={true}>
-						<Icon label="Add" type="plus" mr={1} />
-						New
-					</Button>
-				</A>
-				<Div ml="auto" mr="auto" display="flex" gap={1} alignItems="center">
-					{isEditing ? (
-						<Input
-							name="path"
-							value={value}
-							autoComplete="off"
-							spellCheck={false}
-							onChange={(e) => setValue(e.target.value)}
-							mb={0}
-						/>
-					) : (
-						<Strong>{value}</Strong>
-					)}
-					<Button
-						type="plain"
-						p={2}
-						ml={1}
-						onClick={() => {
-							if (isEditing) {
-								persistValue();
-							}
-							setIsEditing(!isEditing);
-						}}
-					>
-						<Icon type={isEditing ? "ok" : "edit"} />
-					</Button>
-				</Div>
+		<Wrapper>
+			<A href="/" color="inherit">
+				<WorkersLogo />
+			</A>
+			<A target="_blank" href="/playground">
+				<Button ml={2} type="primary" inverted={true}>
+					<Icon label="Add" type="plus" mr={1} />
+					New
+				</Button>
+			</A>
+			<Form
+				ml="auto"
+				mr="auto"
+				display="flex"
+				gap={1}
+				alignItems="center"
+				onSubmit={(e) => {
+					e.preventDefault();
+					if (isEditing) {
+						persistValue();
+					}
+				}}
+			>
+				{isEditing ? (
+					<Input
+						name="path"
+						value={value}
+						autoComplete="off"
+						spellCheck={false}
+						onChange={(e) => setValue(e.target.value)}
+						mb={0}
+					/>
+				) : (
+					<Strong>{value}</Strong>
+				)}
 				<Button
-					type="primary"
-					inverted={true}
+					type="plain"
+					p={2}
+					ml={1}
+					submit={isEditing}
 					onClick={() => {
-						void navigator.clipboard.writeText(location.href);
-						setHasCopied(!hasCopied);
+						setIsEditing(!isEditing);
 					}}
 				>
-					<Icon label="Add" type="link" mr={1} />
-					Copy Link
+					<Icon type={isEditing ? "ok" : "edit"} />
 				</Button>
-				<A
-					target="_blank"
-					href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}${location.hash}`}
-				>
-					<Button type="primary">Deploy</Button>
-				</A>
-			</Wrapper>
+			</Form>
 			{hasCopied && (
-				<AnimatedToast type="success">
-					<Icon type="ok-sign"></Icon>
-					Copied Playground link to clipboard
-				</AnimatedToast>
+				<Div position="relative">
+					<Span
+						height="100%"
+						display="flex"
+						gap={1}
+						alignItems="center"
+						mr={2}
+						position={"absolute"}
+						right={0}
+					>
+						<Icon type="ok" color={"green"} size={20}></Icon>
+						Copied!
+					</Span>
+				</Div>
 			)}
-		</>
+			<Button
+				type="primary"
+				inverted={true}
+				onClick={() => {
+					void navigator.clipboard.writeText(location.href);
+					setHasCopied(!hasCopied);
+				}}
+			>
+				<Icon label="Add" type="link" mr={1} />
+				Copy Link
+			</Button>
+			<A
+				target="_blank"
+				href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}${location.hash}`}
+			>
+				<Button type="primary">Deploy</Button>
+			</A>
+		</Wrapper>
 	);
 }
diff --git a/packages/workers-playground/src/QuickEditor/defaultHash.ts b/packages/workers-playground/src/QuickEditor/defaultHash.ts
index af3342882b9a..f8d51e68a278 100644
--- a/packages/workers-playground/src/QuickEditor/defaultHash.ts
+++ b/packages/workers-playground/src/QuickEditor/defaultHash.ts
@@ -1 +1 @@
-export default "LYVwNgLglgDghgJwgegGYHsHALQBM4RwDcABAEbogB2+CAngLzbPYZb6HYAcXApgExkAnAAYh2AMwBGLgGNsAFn65U2OKhG5sogOw7UEibJ1CeALhYs2wDnG59Bo8dLmLlq9Zu0i9BoyZ4AWAAoAGF0KgheSOwAESgAZxh0BKhoCLMSazwCYhIqOGBeBgAiIsJbEpCQgG8yuCgqAH1gdFxwXhKzEsbcXgAPADoAKwSSgBoS2XRgeGgyKDA0uiaOTu7+EX4JbDFsKSEJqZm5qAWliBXUMDgAczGzAG0SqjbeUabp2YISgF0AXxClmY1ls9gEwj2LnkShUag0Wl0+kMxlMXBC4Ui0QgcUSyVS6SomWytlIBSKpV6AxGY1IqEW0UKxR6NGpoyqYQiURiABU6DBeJk4DAYEtZAQoBFkMM4AA3OAJWQIWAQADUrXaYF41WCUFmmAgJAA7rwwF9eFkEDMSCUTWaZrxBgALCDAMAlIjBYLIABUPuCJB9JAAApcBX1UCQagB5MjDXiyCD-EgAUSosoDPuQXoGySQJAjcHAhpqwQAkL7-WXAyH4AhClGAEq8ACOIF4CSTJAQrfbnfLNeDdYbNTTsuT0Qz1aDQ8QI5T-QTIEJmKi-S7if6A5nPYgIAQVASUYAClbgIleAAeZtJCIJXgAPn+2+zZYVdCosiyvAgsidAAoezbDsIHGEhJzAzcAEoo3LMtpkPdAtUGMB0Fuf8SgACVNVCSFCVCQBUG4exIAB1TAAGteAQBIAEISigz04N3fcqHyXgjRIG9kkPXh-ztc0wNLMsRKdXg4D6GjMmEkSy2OLEYjDdYbTXFAXTdCY4LLf5xjg-5GPLHTgn+T0gWBUFcnBRwoRkGF3HhLwkT8VEgk5BScXiW8CUlIkskwHBSXyJlSgEh1nVdd06QZclmVCopwo0jEuWxbA+QFTJVOQUUGioHVL1o2Jo1CHkAE1jxTEh1LAB9gkvKqSBuKhblKaIShqss6vE3B2o68o4BIP9EHvCBSgAVR5AAxbgShIZAesvPrKogCAYGwXsoFlUoAA1sFGgBBbBwm+eYtRmhDuRGkoAEkUwYXhcFuTpZvmxaYtKWUoA4vMIDO5LIhCqBcAgJ0GD6D7ZF4bAjUB4GwMaNIoDgMBsEVJHiikQYRBmua4MvaAIC1B98MoIjEAtciEComiSGPG46FuK1qFwS9kHxwncaWKgKK0nswFKTs6C1BIxJ-EotKdHtUFKF0VoSMxkCyumGcoGhBjBmArVwQZZAI0mezV3hZWQOLIYF5DZASMY4JxjrkDEiSavLS8KFwOh5twDaBpuS3SmuMmxh6jq9VuEgEgQWRpeWmA5YV7L6cZ1X1c17Xdb9-WwbQYiO0GGAmux+bkA92UXpywPLyLr2FQSELKOohJsFQ250Dalmi7LmBA7LUjTXNWiSFG+8SGBxIaaVhPcCH9Ah5AgtlVlC1+opqnIJ7AgF4LXhWknrSy2FsmSAiTneDAuAaGNMS2NX12N9FdA6ALKAe0TMB74gKfgYte7HvIe-hugJqSAgBgCQOAO9iaETTgvWQ0xqAQEGFpFmHcEFOikA+UiToCAkBHovWuCAAD8LMUHt07ntPCqcs5kVwVgo8AApOUcAADKSoVQDTeCQOglBjTKiiEPDBhoME0CFuwygCBjS8DIDvAkvAADkR5MI8h5MeIe9ZUD0i-B7J+BN76NDISTSBsjwIPQtKhcUhIjyIBVhPD+O8jSYDALgE+YBULQwARwkAk8GroFMRaaYfQvYpAtG-YR+5wJnxAPeamOjMCSW3rJMsPZbxnyCR-YAJBWgkTbFAWQFEX4IKymXIhPJ6BYMNG4mippUCENQQgpBcToxsTKQ1XgqBDTYNDoUUU5MqHA0wSPBA1AqCNBDhEXhI8pGDBICVTh4oqA73umkEpDUNoLzPveQJYluwdmLEeMS+tUwe0NB-EgcwnQgIoPPDxyBhRQFibJNZlV0CcSOQMDpWpKGU2opVU+uAhEe1UdRbE3ZKBRASBMqZ7iZkgLAAkKe8yIA7yOb4wJU97lGj4QY-EqQyBvO+eQZUriRHsXXFgvo-UglLFQI6PJtTbbAFLk7ZALs3a1TthFGqZlLAWU4DwCEThJC2TcHCTwiIfDIn8GiZgQA";
+export default "LYVwNgLglgDghgJwgegGYHsHALQBM4RwDcABAEbogB2+CAngLzbPYZb6HYAcXApgExkAnAAYh2AMwBGLgGNsAFn65U2OKhG5sogOw7UEibJ1CeALhYs2wDnG59Bo8dLmLlq9Zu0i9BoyZ4AWAAoAGF0KgheSOwAESgAZxh0BKhoCLMSazwCYhIqOGBeBgAiIsJbEpCQgG8yuCgqAH1gdFxwXhKzEsbcXgAPADoAKwSSgBoS2XRgeGgyKDA0uiaOTu7+EX4JbDFsfn4JqZm5qAWliBXUMDgAczGzAG0SqjbeUabp2YISgF0AXxClmY1ls9gEwj2LnkShUag0Wl0+kMxlMXBC4Ui0QgcUSyVS6SomWytlIBSKpVsIzGpFQi2ihWKJSpoyqYQiURiABU6DBeJk4DAYEtZAQoBFkMM4AA3OAJWQIWAQADUrXaYF41WCA2SSBIfVQcHAEBINWCAEhyfySCUAKL9QrC3gkACCAAUAJITC2Ee6ZZ4DR0aiY2wVQEMlBC8JIRBKdX7jYL-IjBIHA0G5cGOKEyGHueFeJF+VFBdlYmLxGME8VErKYHCk-KM0q9AbUkq0+lWls0NusjEc7HYHl8gVCkViiVS2XyxUwFVqjpaqCzTAmgDuvDAX2dqAQMxtm+3M14gwAFhBgGAO8FgsgAFT34Ike8kAAClz5BtNAHkyMNeFkCB-hIW0qGlZ972QW8dTXfVeENY1TQtB8n3NF933gBBClNAAlXgAEcQGjYCSCjIiSItDC3ywnCajA6UQOiCD0NfGjEDo+1AJAQlMSifpSKA-oqLYqMIBABAqASU03X3YBEl4AAefCYyk3gAD5-hE6DzTlOgqFkLJeAgWQzwACnI4iEggcYSGY2yhIASmQ81zWmKSTQksASAYfJeHXEgAFVcIAGQswirIgQYvMclNXPchJ0A1QYwHQW4zIAAwACS3VKSAAEhqAppSgW4CEwaK4wQF1bmxECCBIOYzwKmovMGJqrX+ABCDLYtvVyoFQEgzLajrGR8hhfJKZAwxKZyzVc81kGQEgAE1KBIaZwFwEg4DARLNr27y4BICAzygBAdqwy5XU9Egz14KMLXi2MTVsHzdvXBoTRXXUIDMkpBmQFkxj6xaxIkqgSBU5I1OpCIzNsMHzS01yIckvyAph2NeDMo8d1shbXIeuA+gQBJMiJ1zjnLHFP3WG1+JQC8r29Rb-kTVz-jBjmkxTNNLAzTgeAhJxJFzNw4U8REfGRfw0QHWncSrNIa2JesckIMlmxKfGT3PS9r07DVu11rcdwN1nFc5HER2tJnkGFBoqC1RSutiH9Qi5Va3Vte7DfU4JFJZ7ybioW5SmiEpA-NYPeFJmPY-KE7TMQOMIFKQKuQAMW4EoSGQRPFOT-2IBgbAIqgaVSgADWwQKXWwcJvnmYNNsHSJSg9W0GF4XBavzwvnuL4yTtNkr-L+-P3Jt0p1ygXAzoYPoStkXhsHnxez1sxpVb27B5T24opEGERB6L6AIA1dTQlSkAVBuKMSAAdUwABrR7pLdG46FufdqFwIpZAl9r7DyWFQN+z1zRRjAKUaydANQJAesZEoUCzxRlQKUC8ZcKbLSdr-f+NBBgrxgPuXAgxZB3wfogU8K9kB6yKAfS4yVZAJDGM9IesdkAk1wIHC0ikKC4DoEXXAVdNo3DYaUa4NCxiJ1jiuW4JAEgIFkFgiAOCzB4J-n-SgRCSFkIoVQ6RUZiG8GlGgR+0Z2rh3PsPYGVci7AGdnIxSojpTiLlAkOe79P7YFSrcdA0cgFuJcTAOR5pn7mxPF1IKcZTrnS-towhO0IDoFOiRfUippTOhOq-BAH8EAOSjAQHJ8FWinXQFA80SCaEkAiOA3gtk4A0BIOuB6UNilCPgsKdAdB9QXUAlfPpqT4nOj7rVcgfT07QHDiQEAMBdpVNvpQahT84CyC2pEQYUCgFhJ2WeKQ6ln5ngaokXaL8fEIAAPxAIOaE8JLoSDLPvsY50eSCkkDOQAKRlHAAAygqJU7c+gkDoBtdcioojxIaicmgiDQWUAQK03gZAqkEl4AAcmkllLkXI3SnWwqgOkhlRFRiAmAPpjQnlGMsViuy-dnSpVFISaSiBdEpIelU9cmAwC4CaWAVK89ZlgpABUkgTKSnAudJQlIzoRkiqRdEHaIAqrSSpZgMmFSqlRlUiktJZ1eDABIK0J+REoCyDfhSnZjsXF3K5PQT5JoFVxjAKgW5hydl7MWuaH8UMFXioQj9VlSigxvMudCoNZFqBUEaIoiI8SznosGGtDaooqBVL7mkR14qq45JaXGOVD0yLRmNNJB6JjQKiJNAaxqBBmpwAoNksVM0YBQC1d6gt910ABRrYGWYGoLn5MevdZpuB4WiKJY9bEZFKBRASMm9aoq027X2mkzNEAqk1umCCkZna2kEDpfiVIZAB2jvIIqYViK-ICU+X0E6IylioFPNar1XCnGNBjkAwRwig7cIDqmYIwJWD1jBCLbMzgJawg8AibwvgUQBC4MwIAA";
diff --git a/packages/workers-playground/welcome/data.js b/packages/workers-playground/welcome/data.js
new file mode 100644
index 000000000000..f9500ce853eb
--- /dev/null
+++ b/packages/workers-playground/welcome/data.js
@@ -0,0 +1,4 @@
+export default {
+	name: "Example API",
+	tags: ["example", "api", "response"],
+};
diff --git a/packages/workers-playground/welcome/index.js b/packages/workers-playground/welcome/index.js
index 2a88405e6849..0cd6da11ab7e 100644
--- a/packages/workers-playground/welcome/index.js
+++ b/packages/workers-playground/welcome/index.js
@@ -12,8 +12,14 @@ export default {
 	 * @returns {Promise<Response>}
 	 */
 	async fetch(request, env, ctx) {
-		console.log("Hello Cloudflare Workers!");
+		const url = new URL(request.url);
+		console.log(`Hello ${navigator.userAgent} at path ${url.pathname}!`);
 
+		if (url.pathname === "/api") {
+			// You could also call a third party API here
+			const data = await import("./data.js");
+			return Response.json(data);
+		}
 		return new Response(welcome, {
 			headers: {
 				"content-type": "text/html",