From e70344d0f3560bf348c1f5e04fe750db44cf6f1b Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Tue, 3 Dec 2024 00:07:41 +0000
Subject: [PATCH] fix: handle images with same image id

when two images with different tags point to the same image id, the image dropdown in new workspace dialog breaks because it assumes image id is unique
---
 web/src/workspaces/new-workspace-dialog.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/workspaces/new-workspace-dialog.tsx b/web/src/workspaces/new-workspace-dialog.tsx
index f0f9f97..843bcfe 100644
--- a/web/src/workspaces/new-workspace-dialog.tsx
+++ b/web/src/workspaces/new-workspace-dialog.tsx
@@ -38,7 +38,7 @@ interface NewWorkspaceDialogProps {
 
 const NewWorkspaceFormSchema = object({
 	workspaceName: pattern(string(), /^[\w-]+$/),
-	imageId: nonempty(string()),
+	image: nonempty(string()),
 	runtime: nonempty(string()),
 });
 
@@ -121,7 +121,9 @@ function NewWorkspaceForm({
 		resolver: superstructResolver(NewWorkspaceFormSchema),
 		defaultValues: {
 			workspaceName: "",
-			imageId: "",
+			// image is in the form "imageTag imageId" (space as separator)
+			// this is to prevent two image tags pointing to the same image id
+			image: "",
 			runtime: "",
 		},
 	});
@@ -177,7 +179,7 @@ function NewWorkspaceForm({
 	async function onSubmit(values: Infer<typeof NewWorkspaceFormSchema>) {
 		await createWorkspace({
 			workspaceName: values.workspaceName,
-			imageId: values.imageId,
+			imageId: values.image.split(" ")[1],
 			runtime: values.runtime,
 		});
 	}
@@ -208,7 +210,7 @@ function NewWorkspaceForm({
 
 				<FormField
 					control={form.control}
-					name="imageId"
+					name="image"
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>Image for this workspace</FormLabel>
@@ -220,7 +222,10 @@ function NewWorkspaceForm({
 								</FormControl>
 								<SelectContent>
 									{templateImages.map((image) => (
-										<SelectItem key={image.imageId} value={image.imageId}>
+										<SelectItem
+											key={image.imageTag}
+											value={`${image.imageTag} ${image.imageId}`}
+										>
 											{image.imageTag}
 										</SelectItem>
 									))}