[local-explorer-ui] Adjusted labels for (ex-)Custom Crons and some times.

Author: tpmmorris

packages/local-explorer-ui/src/__e2e__/cron-triggers/cron-triggers.spec.ts

@@ -59,7 +59,7 @@ describe("Cron Triggers", () => {
 		await page
 			.getByRole("heading", { name: "No Cron Triggers configured" })
 			.waitFor();
-		expect(await page.getByRole("button", { name: "Add custom" }).count()).toBe(
+		expect(await page.getByRole("button", { name: "Add draft" }).count()).toBe(
 			0
 		);
 		expect(
@@ -76,7 +76,7 @@ describe("Cron Triggers", () => {
 		const configuredPane = page.getByRole("region", {
 			name: "Configured crons",
 		});
-		const customPane = page.getByRole("region", { name: "Custom crons" });
+		const customPane = page.getByRole("region", { name: "Draft crons" });
 		const [configuredBox, customBox] = await Promise.all([
 			configuredPane.boundingBox(),
 			customPane.boundingBox(),
@@ -231,7 +231,7 @@ describe("Cron Triggers", () => {
 		const configuredPane = page.getByRole("region", {
 			name: "Configured crons",
 		});
-		const customPane = page.getByRole("region", { name: "Custom crons" });
+		const customPane = page.getByRole("region", { name: "Draft crons" });
 		const [configuredBox, customBox] = await Promise.all([
 			configuredPane.boundingBox(),
 			customPane.boundingBox(),

packages/local-explorer-ui/src/components/cron-triggers/CronRowCard.tsx

@@ -358,7 +358,7 @@ function CronBuilder({
 		>
 			<legend className="px-1 text-sm font-medium text-kumo-default">
 				<span className="inline-flex items-center gap-1">
-					Build a UTC expression
+					Build a Cron expression (UTC)
 					<Tooltip
 						asChild
 						content={
@@ -427,7 +427,7 @@ function CronBuilder({
 					<BuilderNumber
 						errors={generated.errors}
 						field="hour"
-						label="Hour (UTC)"
+						label="Hour"
 						onChange={updateField}
 						rowId={rowId}
 						value={value.hour}
@@ -437,7 +437,7 @@ function CronBuilder({
 					<BuilderNumber
 						errors={generated.errors}
 						field="minute"
-						label="Minute (UTC)"
+						label="Minute"
 						onChange={updateField}
 						rowId={rowId}
 						value={value.minute}
@@ -598,7 +598,6 @@ function CustomTimeEditor({
 			{row.customTimeInputMode === "calendar" ? (
 				<div className="grid min-w-0 gap-1">
 					<label className="grid min-w-0 gap-1 text-sm text-kumo-default">
-						Date and Time (UTC)
 						<input
 							aria-describedby={
 								calendar?.kind === "invalid"
@@ -651,7 +650,6 @@ function CustomTimeEditor({
 			) : (
 				<div className="grid min-w-0 gap-1">
 					<label className="grid min-w-0 gap-1 text-sm text-kumo-default">
-						Epoch milliseconds
 						<input
 							aria-describedby={
 								parseEpochMilliseconds(row.epochValue ?? "").error

packages/local-explorer-ui/src/components/cron-triggers/CronTriggersPage.tsx

@@ -173,16 +173,17 @@ export function CronTriggersPage({
 												size="sm"
 												variant="secondary"
 											>
-												Add custom
+												Add draft
 											</Button>
 										) : null
 									}
+									help="Draft crons are stored locally and do not modify your Worker configuration."
 									pane="custom"
-									title="Custom crons"
+									title="Draft crons"
 								>
 									{customRows.length === 0 ? (
 										<p className="px-1 py-2 text-sm text-kumo-subtle">
-											Custom crons you add or duplicate appear here.
+											Draft crons you add or duplicate appear here.
 										</p>
 									) : null}
 									{customRows.map(renderRow)}
@@ -199,11 +200,13 @@ export function CronTriggersPage({
 function CronPane({
 	action,
 	children,
+	help,
 	pane,
 	title,
 }: {
 	action?: JSX.Element | null;
 	children: React.ReactNode;
+	help?: string;
 	pane: CronPaneKind;
 	title: string;
 }): JSX.Element {
@@ -214,13 +217,26 @@ function CronPane({
 			data-cron-pane={pane}
 		>
 			<header className="flex h-14 shrink-0 items-center justify-between gap-3 border-b border-kumo-fill bg-kumo-base px-5">
-				<h2
-					className="text-base font-semibold text-kumo-default"
-					data-cron-pane-heading
-					tabIndex={-1}
-				>
-					{title}
-				</h2>
+				<div className="inline-flex items-center gap-1">
+					<h2
+						className="text-base font-semibold text-kumo-default"
+						data-cron-pane-heading
+						tabIndex={-1}
+					>
+						{title}
+					</h2>
+					{help ? (
+						<Tooltip asChild content={help}>
+							<button
+								aria-label={`${title} help`}
+								className="focus-visible:ring-kumo-ring inline-flex h-5 w-5 items-center justify-center rounded-md text-kumo-subtle outline-none hover:bg-kumo-tint focus-visible:ring-2"
+								type="button"
+							>
+								<InfoIcon size={14} />
+							</button>
+						</Tooltip>
+					) : null}
+				</div>
 				{action}
 			</header>
 			<div