fix(site): show error on template upload failure

ethanndickson · ethanndickson · commit 3650ef11678c · 2024-11-18T10:50:18.000Z
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.test.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.test.tsx
@@ -1,7 +1,8 @@
-import { screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { API } from "api/api";
 import {
+	mockApiError,
 	MockTemplate,
 	MockTemplateExample,
 	MockTemplateVersion,
@@ -150,3 +151,36 @@ test("Create template from duplicating a template", async () => {
 		);
 	});
 });
+
+test("The page displays an error if the upload fails", async () => {
+	const errMsg = `Unsupported content type header`
+	jest.spyOn(API, "uploadFile").mockRejectedValueOnce(
+		mockApiError({
+			message: errMsg,
+		}),
+	);
+	await renderPage(new URLSearchParams());
+
+	const file = new File([""], "invalidfile.tar");
+	const dropZone = screen.getByTestId("drop-zone");
+
+	fireEvent.drop(dropZone, {
+		dataTransfer: { files: [file] },
+	});
+
+	await waitFor(() => expect(API.uploadFile).toHaveBeenCalledTimes(1));
+
+	// Error toast should be displayed
+	expect(
+		await screen.findByText(
+			errMsg,
+		),
+	).toBeInTheDocument();
+
+	// The upload box should have reset itself
+	expect(
+		await screen.findByText(
+			/The template has to be a .tar or .zip file/,
+		),
+	).toBeInTheDocument();
+});
diff --git a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
@@ -12,6 +12,8 @@ import { useNavigate } from "react-router-dom";
 import { CreateTemplateForm } from "./CreateTemplateForm";
 import type { CreateTemplatePageViewProps } from "./types";
 import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { getErrorMessage } from "api/errors";
 
 export const UploadTemplateView: FC<CreateTemplatePageViewProps> = ({
 	onCreateTemplate,
@@ -51,7 +53,14 @@ export const UploadTemplateView: FC<CreateTemplatePageViewProps> = ({
 			jobError={isJobError ? error.job.error : undefined}
 			logs={templateVersionLogsQuery.data}
 			upload={{
-				onUpload: uploadFileMutation.mutateAsync,
+				onUpload: async (file: File) => {
+					try {
+						await uploadFileMutation.mutateAsync(file);
+					} catch (error) {
+						displayError(getErrorMessage(error, "Failed to upload file"));
+						uploadFileMutation.reset()
+					}
+				},
 				isUploading: uploadFileMutation.isLoading,
 				onRemove: uploadFileMutation.reset,
 				file: uploadFileMutation.variables,
