Add DisplayError to show user errors from the backend

editor/src/frontend/frontend_message_handler.rs

@@ -13,6 +13,7 @@ pub enum FrontendMessage {
 	SetActiveTool { tool_name: String },
 	SetActiveDocument { document_index: usize },
 	UpdateOpenDocumentsList { open_documents: Vec<String> },
+	DisplayError { description: String },
 	DisplayConfirmationToCloseDocument { document_index: usize },
 	DisplayConfirmationToCloseAllDocuments,
 	UpdateCanvas { document: String },
@@ -42,6 +43,7 @@ impl MessageHandler<FrontendMessage, ()> for FrontendMessageHandler {
 	advertise_actions!(
 		FrontendMessageDiscriminant;
 
+		DisplayError,
 		CollapseFolder,
 		ExpandFolder,
 		SetActiveTool,

frontend/src/components/panels/Document.vue

@@ -212,7 +212,7 @@ import { defineComponent } from "vue";
 import { makeModifiersBitfield } from "@/utilities/input";
 import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
-import comingSoon from "@/utilities/coming-soon";
+import { comingSoon } from "@/utilities/errors";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -53,7 +53,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import comingSoon from "@/utilities/coming-soon";
+import { comingSoon } from "@/utilities/errors";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import { ApplicationPlatform } from "@/components/window/MainWindow.vue";

frontend/src/components/widgets/options/ToolOptions.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import comingSoon from "@/utilities/coming-soon";
+import { comingSoon } from "@/utilities/errors";
 
 import { WidgetRow, SeparatorType, IconButtonWidget } from "@/components/widgets/widgets";
 import Separator from "@/components/widgets/separators/Separator.vue";

frontend/src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { fullscreenModeChanged } from "@/utilities/fullscreen";
 import { handleKeyUp, handleKeyDown, handleMouseDown } from "@/utilities/input";
 import App from "@/App.vue";
+import "@/utilities/errors";
 
 // Bind global browser events
 document.addEventListener("contextmenu", (e) => e.preventDefault());

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;
 }