From ca32f3e02679e5598894ef36928d9a6917fb27ee Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 21 Jan 2025 10:38:07 -0300
Subject: [PATCH] fix: display error when a build fails on template editor
 (#16210)

<img width="1512" alt="Screenshot 2025-01-21 at 10 00 42"
src="https://github.com/user-attachments/assets/84f5272f-63bb-4d76-ae27-a2c5e339e352"
/>

Close https://github.com/coder/coder/issues/16022
---
 .../components/GlobalSnackbar/GlobalSnackbar.tsx    |  7 +++++--
 .../TemplateVersionEditor.tsx                       | 13 +++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
index 8fff752e71..657bb5fc92 100644
--- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
+++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -51,7 +51,7 @@ export const GlobalSnackbar: FC = () => {
 						<ErrorIcon css={styles.errorIcon} />
 					)}
 
-					<div css={{ maxWidth: 670 }}>
+					<div className="max-w-[670px] flex flex-col">
 						<span css={styles.messageTitle}>{notificationMsg.msg}</span>
 
 						{notificationMsg.additionalMsgs?.map((msg, index) => (
@@ -104,7 +104,10 @@ const styles = {
 		fontWeight: 600,
 	},
 	messageSubtitle: {
-		marginTop: 12,
+		marginTop: 4,
+		"&:first-letter": {
+			textTransform: "uppercase",
+		},
 	},
 	errorIcon: (theme) => ({
 		color: theme.palette.error.contrastText,
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index fe02ff909d..371b2ee64d 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -8,6 +8,7 @@ import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
+import { getErrorDetail, getErrorMessage } from "api/errors";
 import type {
 	ProvisionerJobLog,
 	Template,
@@ -26,6 +27,7 @@ import {
 	TopbarDivider,
 	TopbarIconButton,
 } from "components/FullPageLayout/Topbar";
+import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
@@ -132,8 +134,15 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 	const availableProvisioners = templateVersion.matched_provisioners?.available;
 
 	const triggerPreview = useCallback(async () => {
-		await onPreview(fileTree);
-		setSelectedTab("logs");
+		try {
+			await onPreview(fileTree);
+			setSelectedTab("logs");
+		} catch (error) {
+			displayError(
+				getErrorMessage(error, "Error on previewing the template"),
+				getErrorDetail(error),
+			);
+		}
 	}, [fileTree, onPreview]);
 
 	// Stop ctrl+s from saving files and make ctrl+enter trigger a preview.