Add DisplayError to show user errors from the backend

frontend/src/utilities/errors.ts

@@ -1,7 +1,8 @@
 import { createDialog, dismissDialog } from "@/utilities/dialog";
 import { TextButtonWidget } from "@/components/widgets/widgets";
+import { ResponseType, registerResponseHandler, Response, DisplayError } from "@/utilities/response-handler";
 
-export default function comingSoon(issueNumber?: number) {
+export function comingSoon(issueNumber?: number) {
 	const bugMessage = `— but you can help add it!\nSee issue #${issueNumber} on GitHub.`;
 	const details = `This feature is not implemented yet${issueNumber ? bugMessage : ""}`;
 
@@ -20,3 +21,16 @@ export default function comingSoon(issueNumber?: number) {
 
 	createDialog("Warning", "Coming soon", details, buttons);
 }
+
+registerResponseHandler(ResponseType.DisplayError, (responseData: Response) => {
+	const data = responseData as DisplayError;
+
+	const okButton: TextButtonWidget = {
+		kind: "TextButton",
+		callback: async () => dismissDialog(),
+		props: { label: "OK", emphasized: true, minWidth: 96 },
+	};
+	const buttons = [okButton];
+
+	createDialog("Warning", "Editor error", data.description, buttons);
+});

frontend/src/utilities/response-handler.ts

@@ -16,13 +16,14 @@ export enum ResponseType {
 	ExportDocument = "ExportDocument",
 	ExpandFolder = "ExpandFolder",
 	CollapseFolder = "CollapseFolder",
+	UpdateLayer = "UpdateLayer",
 	SetActiveTool = "SetActiveTool",
 	SetActiveDocument = "SetActiveDocument",
 	UpdateOpenDocumentsList = "UpdateOpenDocumentsList",
 	UpdateWorkingColors = "UpdateWorkingColors",
-	UpdateLayer = "UpdateLayer",
 	SetCanvasZoom = "SetCanvasZoom",
 	SetCanvasRotation = "SetCanvasRotation",
+	DisplayError = "DisplayError",
 	DisplayConfirmationToCloseDocument = "DisplayConfirmationToCloseDocument",
 	DisplayConfirmationToCloseAllDocuments = "DisplayConfirmationToCloseAllDocuments",
 }
@@ -72,6 +73,8 @@ function parseResponse(responseType: string, data: any): Response {
 			return newExportDocument(data.ExportDocument);
 		case "UpdateWorkingColors":
 			return newUpdateWorkingColors(data.UpdateWorkingColors);
+		case "DisplayError":
+			return newDisplayError(data.DisplayError);
 		case "DisplayConfirmationToCloseDocument":
 			return newDisplayConfirmationToCloseDocument(data.DisplayConfirmationToCloseDocument);
 		case "DisplayConfirmationToCloseAllDocuments":
@@ -130,6 +133,15 @@ function newSetActiveDocument(input: any): SetActiveDocument {
 	};
 }
 
+export interface DisplayError {
+	description: string;
+}
+function newDisplayError(input: any): DisplayError {
+	return {
+		description: input.description,
+	};
+}
+
 export interface DisplayConfirmationToCloseDocument {
 	document_index: number;
 }