feat(local-explorer-ui): Add data studio table explorer tab

.changeset/light-clocks-enter.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/local-explorer-ui": minor
+---
+
+Adds the tab definition for the table explorer.
+
+This serves as another stepping stone for adding the complete data studio to the local explorer.
+
+This is a WIP experimental feature.

packages/local-explorer-ui/package.json

@@ -20,6 +20,12 @@
 	"dependencies": {
 		"@base-ui/react": "^1.1.0",
 		"@cloudflare/kumo": "^1.5.0",
+		"@cloudflare/workers-editor-shared": "^0.1.1",
+		"@codemirror/autocomplete": "^6.20.0",
+		"@codemirror/lang-sql": "^6.10.0",
+		"@codemirror/language": "^6.12.1",
+		"@codemirror/state": "^6.5.4",
+		"@codemirror/view": "^6.39.14",
 		"@phosphor-icons/react": "^2.1.10",
 		"@tailwindcss/vite": "^4.0.15",
 		"@tanstack/react-router": "^1.158.0",

packages/local-explorer-ui/src/__tests__/utils/studio.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, test } from "vitest";
 import {
 	escapeSqlValue,
-	tokenizeSQL,
 	transformStudioArrayBasedResult,
 } from "../../utils/studio";
+import { tokenizeSQL } from "../../utils/studio/sql";
 
 describe("escapeSqlValue", () => {
 	test("undefined returns `DEFAULT`", () => {

packages/local-explorer-ui/src/components/studio/Code/Block.tsx

@@ -0,0 +1,21 @@
+interface CodeBlockProps {
+	code: string;
+	language?: string;
+	maxHeight?: number;
+}
+
+export function CodeBlock({
+	code,
+	language,
+	maxHeight,
+}: CodeBlockProps): JSX.Element {
+	return (
+		<pre
+			className="rounded bg-surface-secondary p-3 text-sm font-mono overflow-x-auto overflow-y-auto"
+			data-language={language}
+			style={maxHeight ? { maxHeight } : undefined}
+		>
+			<code>{code}</code>
+		</pre>
+	);
+}

packages/local-explorer-ui/src/components/studio/Code/Mirror.tsx

@@ -0,0 +1,180 @@
+import { Annotation, EditorState, StateEffect } from "@codemirror/state";
+import {
+	EditorView,
+	placeholder as placeholderExtension,
+} from "@codemirror/view";
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+import type { Extension } from "@codemirror/state";
+import type { ViewUpdate } from "@codemirror/view";
+
+/**
+ * React binding for CodeMirror with minimal built-in extensions.
+ * Supports placeholder and content change events only.
+ */
+export const StudioCodeMirror = forwardRef<
+	StudioCodeMirrorReference,
+	StudioCodeMirrorProps
+>(
+	(
+		{
+			autoFocus,
+			className,
+			defaultValue,
+			extensions,
+			onChange,
+			onCursorChange,
+			placeholder,
+			readOnly,
+		},
+		ref
+	) => {
+		const container = useRef<HTMLDivElement>(null);
+		const defaultValueRef = useRef<string>(defaultValue);
+
+		const [editorView, setEditorView] = useState<EditorView>();
+
+		useLayoutEffect(() => {
+			if (!container.current) {
+				return;
+			}
+
+			const view = new EditorView({
+				parent: container.current,
+				doc: defaultValueRef?.current,
+			});
+
+			setEditorView(view);
+
+			return () => view.destroy();
+		}, [container, defaultValueRef]);
+
+		// Registers new extensions with CodeMirror,
+		// including built-in support for placeholder and onChange events.
+		useEffect(() => {
+			if (!editorView) {
+				return;
+			}
+
+			const combinedExtensions = [...(extensions ?? [])] satisfies Extension[];
+
+			if (onChange) {
+				combinedExtensions.push(
+					EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
+						if (
+							viewUpdate.docChanged &&
+							onChange &&
+							!viewUpdate.transactions.some((tr) =>
+								tr.annotation(BlockOnChangeTrigger)
+							)
+						) {
+							onChange(viewUpdate);
+						}
+					})
+				);
+			}
+
+			if (onCursorChange) {
+				combinedExtensions.push(
+					EditorView.updateListener.of((state) => {
+						const position = state.state.selection.main.head;
+						const line = state.state.doc.lineAt(position);
+						const lineNumber = line.number;
+						const columnNumber = position - line.from;
+						onCursorChange(position, lineNumber, columnNumber);
+					})
+				);
+			}
+
+			if (placeholder) {
+				combinedExtensions.push(placeholderExtension(placeholder));
+			}
+
+			if (readOnly) {
+				combinedExtensions.push(EditorState.readOnly.of(true));
+			}
+
+			editorView.dispatch({
+				effects: StateEffect.reconfigure.of(combinedExtensions),
+			});
+		}, [
+			editorView,
+			extensions,
+			onChange,
+			onCursorChange,
+			placeholder,
+			readOnly,
+		]);
+
+		// Exposes the CodeMirror editor instance and helper methods
+		// for getting and setting the editor content via ref.
+		useImperativeHandle(
+			ref,
+			() => ({
+				getValue: (): string => {
+					if (!editorView) {
+						return "";
+					}
+
+					return editorView.state.doc.toString();
+				},
+				setValue: (value: string): void => {
+					if (!editorView) {
+						return;
+					}
+
+					const currentValue = editorView.state.doc.toString();
+					editorView.dispatch({
+						annotations: [BlockOnChangeTrigger.of(true)],
+						changes: {
+							from: 0,
+							insert: value || "",
+							to: currentValue.length,
+						},
+					});
+				},
+				view: editorView,
+			}),
+			[editorView]
+		);
+
+		// Auto focus
+		useEffect((): void => {
+			if (autoFocus && editorView) {
+				editorView.focus();
+			}
+		}, [autoFocus, editorView]);
+
+		return <div ref={container} className={className}></div>;
+	}
+);
+StudioCodeMirror.displayName = "StudioCodeMirror";
+
+const BlockOnChangeTrigger = Annotation.define<boolean>();
+
+export interface StudioCodeMirrorProps {
+	autoFocus?: boolean;
+	className?: string;
+	defaultValue?: string;
+	extensions?: Extension[];
+	onChange?: (update: ViewUpdate) => void;
+	onCursorChange?: (
+		position: number,
+		lineNumber: number,
+		columnNumber: number
+	) => void;
+	placeholder?: string;
+	readOnly?: boolean;
+}
+
+export interface StudioCodeMirrorReference {
+	getValue: () => string;
+	setValue: (value: string) => void;
+	view?: EditorView;
+}

packages/local-explorer-ui/src/components/studio/Modal/CommitConfirmation.tsx

@@ -0,0 +1,87 @@
+import { Button, Dialog } from "@cloudflare/kumo";
+import { PlayIcon, SpinnerIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { CodeBlock } from "../Code/Block";
+
+interface StudioCommitConfirmationProps {
+	closeModal: () => void;
+	isOpen: boolean;
+	onConfirm: () => Promise<void>;
+	statements: string[];
+}
+
+export function StudioCommitConfirmation({
+	closeModal,
+	isOpen,
+	onConfirm,
+	statements,
+}: StudioCommitConfirmationProps) {
+	const [errorMessage, setErrorMessage] = useState("");
+	const [isRequesting, setIsRequesting] = useState(false);
+
+	const handleConfirm = async (): Promise<void> => {
+		setIsRequesting(true);
+		setErrorMessage("");
+
+		try {
+			await onConfirm();
+			closeModal();
+		} catch (err) {
+			if (err instanceof Error) {
+				setErrorMessage(err.message);
+			} else {
+				setErrorMessage(String(err));
+			}
+		} finally {
+			setIsRequesting(false);
+		}
+	};
+
+	return (
+		<Dialog.Root
+			open={isOpen}
+			onOpenChange={(open: boolean) => {
+				if (!open) {
+					closeModal();
+				}
+			}}
+		>
+			<Dialog>
+				{/* @ts-expect-error `@cloudflare/kumo` currently has a type def bug here */}
+				<Dialog.Title>Review and Confirm Changes</Dialog.Title>
+
+				<div className="flex flex-col gap-4 text-sm">
+					{!!errorMessage && (
+						<div className="font-mono text-red-500">{errorMessage}</div>
+					)}
+
+					<div>
+						The following SQL statements will be executed to apply your changes.
+						Please review them carefully before committing.
+					</div>
+
+					<CodeBlock
+						code={statements.join("\n")}
+						language="sql"
+						maxHeight={500}
+					/>
+				</div>
+
+				<div className="mt-4 flex justify-end gap-2">
+					<Button
+						disabled={isRequesting}
+						onClick={handleConfirm}
+						variant="primary"
+					>
+						{isRequesting ? (
+							<SpinnerIcon className="h-4 w-4 animate-spin" />
+						) : (
+							<PlayIcon className="h-4 w-4" />
+						)}
+						<span>Confirm & Execute</span>
+					</Button>
+				</div>
+			</Dialog>
+		</Dialog.Root>
+	);
+}