fix: fix frontend display of error messages

jaaydenh · jaaydenh · commit 56260b095f8e · 2025-02-21T17:35:24.000Z
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPage.tsx
@@ -1,9 +1,11 @@
+import { getErrorMessage } from "api/errors";
 import {
 	deleteOrganization,
 	updateOrganization,
 } from "api/queries/organizations";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { displayError } from "components/GlobalSnackbar/utils";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
@@ -42,10 +44,19 @@ const OrganizationSettingsPage: FC = () => {
 				navigate(`/organizations/${updatedOrganization.name}/settings`);
 				displaySuccess("Organization settings updated.");
 			}}
-			onDeleteOrganization={() => {
-				deleteOrganizationMutation.mutate(organization.id);
-				displaySuccess("Organization deleted.");
-				navigate("/organizations");
+			onDeleteOrganization={async () => {
+				try {
+					await deleteOrganizationMutation.mutateAsync(organization.id);
+					displaySuccess(`Organization ${organization.name} deleted`);
+					navigate("/organizations");
+				} catch (error) {
+					displayError(
+						getErrorMessage(
+							error,
+							`Failed to delete organization: ${organization.name}`,
+						),
+					);
+				}
 			}}
 		/>
 	);
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -146,7 +146,10 @@ export const OrganizationSettingsPageView: FC<
 
 			<DeleteDialog
 				isOpen={isDeleting}
-				onConfirm={onDeleteOrganization}
+				onConfirm={async () => {
+					await onDeleteOrganization();
+					setIsDeleting(false);
+				}}
 				onCancel={() => setIsDeleting(false)}
 				entity="organization"
 				name={organization.name}
