feat: implement workspace runtime selection

web/src/templates/build-template-dialog.tsx

@@ -197,6 +197,7 @@ function BuildArgRow({
 
 	const finishEditing = useCallback(() => {
 		onFinish({ argName, arg });
+		setIsEditing(false);
 	}, [argName, arg, onFinish]);
 
 	return (

web/src/workspaces/api.ts

@@ -4,10 +4,17 @@ import {
 	WorkspaceStatus,
 	type Workspace,
 	type WorkspacePortMapping,
+	type WorkspaceRuntime,
 } from "./types";
 import { useCallback, useState } from "react";
 import type { QueryStatus } from "@/lib/query";
 
+interface CreateWorkspaceConfig {
+	workspaceName: string;
+	imageId: string;
+	runtime: string;
+}
+
 function useWorkspaces() {
 	return useSWR(
 		"/workspaces",
@@ -24,17 +31,15 @@ function useCreateWorkspace() {
 		async ({
 			workspaceName,
 			imageId,
-		}: {
-			workspaceName: string;
-			imageId: string;
-		}): Promise<Workspace | null> => {
+			runtime,
+		}: CreateWorkspaceConfig): Promise<Workspace | null> => {
 			setStatus({ type: "loading" });
 			try {
 				const workspace = await mutate(
 					"/workspaces",
 					fetchApi(`/workspaces/${workspaceName}`, {
 						method: "POST",
-						body: JSON.stringify({ imageId }),
+						body: JSON.stringify({ imageId, runtime }),
 						headers: {
 							"Content-Type": "application/json",
 						},
@@ -195,10 +200,19 @@ function useAddWorkspacePort() {
 	return { addWorkspacePort, status };
 }
 
+function useWorkspaceRuntimes() {
+	return useSWR(
+		"/workspace-runtimes",
+		(): Promise<WorkspaceRuntime[]> =>
+			fetchApi("/workspace-runtimes").then((res) => res.json()),
+	);
+}
+
 export {
 	useWorkspaces,
 	useCreateWorkspace,
 	useChangeWorkspaceStatus,
 	useDeleteWorkspace,
 	useAddWorkspacePort,
+	useWorkspaceRuntimes,
 };

web/src/workspaces/new-workspace-dialog.tsx

@@ -27,24 +27,101 @@ import { superstructResolver } from "@hookform/resolvers/superstruct";
 import { useRef, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { nonempty, object, pattern, string, type Infer } from "superstruct";
-import { useCreateWorkspace } from "./api";
+import { useCreateWorkspace, useWorkspaceRuntimes } from "./api";
+import type { TemplateImage } from "@/templates/types";
+import type { WorkspaceRuntime } from "./types";
 
 interface NewWorkspaceDialogProps {
 	onCreateSuccess: () => void;
 }
 
-const NewWorkspaceForm = object({
+const NewWorkspaceFormSchema = object({
 	workspaceName: pattern(string(), /^[\w-]+$/),
 	imageId: nonempty(string()),
+	runtime: nonempty(string()),
 });
 
 function NewWorkspaceDialog({ onCreateSuccess }: NewWorkspaceDialogProps) {
-	const { data: templateImages, isLoading, error } = useTemplateImages();
+	const {
+		data: templateImages,
+		isLoading: isLoadingImages,
+		error,
+	} = useTemplateImages();
+	const { data: runtimes, isLoading: isLoadingRuntimes } =
+		useWorkspaceRuntimes();
+	const isLoading = isLoadingImages || isLoadingRuntimes;
+
+	function content() {
+		if (error) {
+			console.log(error);
+			return (
+				<p className="opacity-80">
+					An error occurred when fetching available options.
+				</p>
+			);
+		}
+		if (isLoading) {
+			return (
+				<div className="w-full flex items-center justify-center">
+					<LoadingSpinner />
+				</div>
+			);
+		}
+		if (!templateImages || !runtimes) {
+			return null;
+		}
+		if (templateImages.length === 0) {
+			return (
+				<>
+					<p className="opacity-80">
+						No images found. Create and build a template, and the resulting
+						image will show up here.
+					</p>
+					<Alert>
+						<AlertTitle>What are images?</AlertTitle>
+						<AlertDescription>
+							An image is used to bootstrap a workspace, including the operating
+							system, the environment, and packages, as specified by a template.
+						</AlertDescription>
+					</Alert>
+				</>
+			);
+		}
+
+		return (
+			<NewWorkspaceForm
+				templateImages={templateImages}
+				runtimes={runtimes}
+				onCreateSuccess={onCreateSuccess}
+			/>
+		);
+	}
+
+	return (
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>New workspace</DialogTitle>
+			</DialogHeader>
+			{content()}
+		</DialogContent>
+	);
+}
+
+function NewWorkspaceForm({
+	templateImages,
+	runtimes,
+	onCreateSuccess,
+}: {
+	templateImages: TemplateImage[];
+	runtimes: WorkspaceRuntime[];
+	onCreateSuccess: () => void;
+}) {
 	const form = useForm({
-		resolver: superstructResolver(NewWorkspaceForm),
+		resolver: superstructResolver(NewWorkspaceFormSchema),
 		defaultValues: {
 			workspaceName: "",
 			imageId: "",
+			runtime: "",
 		},
 	});
 	const { createWorkspace, status } = useCreateWorkspace();
@@ -77,117 +154,92 @@ function NewWorkspaceDialog({ onCreateSuccess }: NewWorkspaceDialogProps) {
 		}
 	}, [status.type, toast, onCreateSuccess]);
 
-	async function onSubmit(values: Infer<typeof NewWorkspaceForm>) {
+	async function onSubmit(values: Infer<typeof NewWorkspaceFormSchema>) {
 		await createWorkspace({
 			workspaceName: values.workspaceName,
 			imageId: values.imageId,
+			runtime: values.runtime,
 		});
 	}
 
-	function content() {
-		if (error) {
-			console.log(error);
-			return (
-				<p className="opacity-80">
-					An error occurred when fetching available options.
-				</p>
-			);
-		}
-		if (isLoading) {
-			return (
-				<div className="w-full flex items-center justify-center">
-					<LoadingSpinner />
-				</div>
-			);
-		}
-		if (!templateImages) {
-			return null;
-		}
-		if (templateImages.length === 0) {
-			return (
-				<>
-					<p className="opacity-80">
-						No images found. Create and build a template, and the resulting
-						image will show up here.
-					</p>
-					<Alert>
-						<AlertTitle>What are images?</AlertTitle>
-						<AlertDescription>
-							An image is used to bootstrap a workspace, including the operating
-							system, the environment, and packages, as specified by a template.
-						</AlertDescription>
-					</Alert>
-				</>
-			);
-		}
-
-		return (
-			<Form {...form}>
-				<form
-					ref={formRef}
-					onSubmit={form.handleSubmit(onSubmit)}
-					className="space-y-4"
-				>
-					<FormField
-						control={form.control}
-						name="workspaceName"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Workspace name</FormLabel>
-								<FormControl>
-									<Input placeholder="my-workspace" {...field} />
-								</FormControl>
-								<FormDescription>
-									Must only contain alphanumeric characters and "-".
-								</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<FormField
-						control={form.control}
-						name="imageId"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Image for this workspace</FormLabel>
-								<Select
-									onValueChange={field.onChange}
-									defaultValue={field.value}
-								>
-									<FormControl>
-										<SelectTrigger>
-											<SelectValue placeholder="Select an image" />
-										</SelectTrigger>
-									</FormControl>
-									<SelectContent>
-										{templateImages.map((image) => (
-											<SelectItem key={image.imageId} value={image.imageId}>
-												{image.imageTag}
-											</SelectItem>
-										))}
-									</SelectContent>
-								</Select>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<DialogFooter>
-						<Button type="submit">Create</Button>
-					</DialogFooter>
-				</form>
-			</Form>
-		);
-	}
-
 	return (
-		<DialogContent>
-			<DialogHeader>
-				<DialogTitle>New workspace</DialogTitle>
-			</DialogHeader>
-			{content()}
-		</DialogContent>
+		<Form {...form}>
+			<form
+				ref={formRef}
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="space-y-4"
+			>
+				<FormField
+					control={form.control}
+					name="workspaceName"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Workspace name</FormLabel>
+							<FormControl>
+								<Input placeholder="my-workspace" {...field} />
+							</FormControl>
+							<FormDescription>
+								Must only contain alphanumeric characters and "-".
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="imageId"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Image for this workspace</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select an image" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{templateImages.map((image) => (
+										<SelectItem key={image.imageId} value={image.imageId}>
+											{image.imageTag}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="runtime"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Docker runtime</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a Docker runtime" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{runtimes.map((runtime) => (
+										<SelectItem key={runtime.name} value={runtime.name}>
+											{runtime.name}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</FormItem>
+					)}
+				/>
+
+				<DialogFooter>
+					<Button type="submit">Create</Button>
+				</DialogFooter>
+			</form>
+		</Form>
 	);
 }
 

web/src/workspaces/types.ts

@@ -20,5 +20,10 @@ interface Workspace {
 	ports?: WorkspacePortMapping[];
 }
 
+interface WorkspaceRuntime {
+	name: string;
+	path: string;
+}
+
 export { WorkspaceStatus };
-export type { Workspace, WorkspacePortMapping };
+export type { Workspace, WorkspaceRuntime, WorkspacePortMapping };