fix: display error when a build fails on template editor (#16210)

BrunoQuaresma · SasSwart · commit 6ca51210eb08 · 2025-01-22T07:47:07.000Z
<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 #16022
diff --git 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
@@ -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.
