diff --git a/web/src/templates/new-template-dialog.tsx b/web/src/templates/new-template-dialog.tsx index d1f9149..0d04481 100644 --- a/web/src/templates/new-template-dialog.tsx +++ b/web/src/templates/new-template-dialog.tsx @@ -29,6 +29,7 @@ import { SelectValue, } from "@/components/ui/select"; import { LoadingSpinner } from "@/components/ui/loading-spinner"; +import type { BaseTemplate } from "./types"; const NewTemplateForm = object({ baseTemplate: nonempty(string()), @@ -45,12 +46,34 @@ function NewTemplateDialog() { Create a new template for workspaces - + ); } -function TemplateForm() { +function TemplateFormContainer() { + const { data: baseTemplates, isLoading, error } = useBaseTemplates(); + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (error || !baseTemplates) { + return ( +

+ An error occurred when fetching available options. +

+ ); + } + + return ; +} + +function TemplateForm({ baseTemplates }: { baseTemplates: BaseTemplate[] }) { const router = useRouter(); const { createTemplate, isCreatingTemplate } = useCreateTemplate(); const form = useForm({ @@ -74,24 +97,6 @@ function TemplateForm() { } } - const { data: baseTemplates, isLoading, error } = useBaseTemplates(); - - if (isLoading) { - return ( -
- -
- ); - } - - if (error || !baseTemplates) { - return ( -

- An error occurred when fetching available options. -

- ); - } - return (
@@ -101,7 +106,7 @@ function TemplateForm() { render={({ field }) => ( Base template - diff --git a/web/src/templates/template-editor.tsx b/web/src/templates/template-editor.tsx index 08acdf6..4248cfa 100644 --- a/web/src/templates/template-editor.tsx +++ b/web/src/templates/template-editor.tsx @@ -34,6 +34,8 @@ import { useTemplateEditorStore, } from "./template-editor-store"; import type { Template } from "./types"; +import { useToast } from "@/hooks/use-toast"; +import { ToastAction } from "@/components/ui/toast"; function TemplateEditor() { const { templateName, _splat } = templateEditorRoute.useParams(); @@ -134,7 +136,18 @@ function Editor() { error, } = useTemplateFile(templateName, currentPath); const saveTimeout = useRef | null>(null); - const { updateTemplateFile } = useUpdateTemplateFile(templateName); + const { updateTemplateFile, error: updateError } = + useUpdateTemplateFile(templateName); + const { toast } = useToast(); + + useEffect(() => { + if (updateError) { + toast({ + variant: "destructive", + title: "Failed to save template", + }); + } + }, [updateError, toast]); useEffect( () => () => { diff --git a/web/src/workspaces/new-workspace-dialog.tsx b/web/src/workspaces/new-workspace-dialog.tsx index 8d06cfe..dc5daa9 100644 --- a/web/src/workspaces/new-workspace-dialog.tsx +++ b/web/src/workspaces/new-workspace-dialog.tsx @@ -192,7 +192,7 @@ function NewWorkspaceForm({ render={({ field }) => ( Image for this workspace - @@ -217,7 +217,7 @@ function NewWorkspaceForm({ render={({ field }) => ( Docker runtime -