fix(site): show error on duplicate template rename attempt (#15348)

Fixes #15311.

site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.test.tsx

@@ -4,7 +4,11 @@ import { API, withDefaultFeatures } from "api/api";
 import type { Template, UpdateTemplateMeta } from "api/typesGenerated";
 import { Language as FooterFormLanguage } from "components/FormFooter/FormFooter";
 import { http, HttpResponse } from "msw";
-import { MockEntitlements, MockTemplate } from "testHelpers/entities";
+import {
+	MockEntitlements,
+	MockTemplate,
+	mockApiError,
+} from "testHelpers/entities";
 import {
 	renderWithTemplateSettingsLayout,
 	waitForLoaderToBeRemoved,
@@ -112,6 +116,28 @@ describe("TemplateSettingsPage", () => {
 		await waitFor(() => expect(API.updateTemplateMeta).toBeCalledTimes(1));
 	});
 
+	it("displays an error if the name is taken", async () => {
+		await renderTemplateSettingsPage();
+		jest.spyOn(API, "updateTemplateMeta").mockRejectedValueOnce(
+			mockApiError({
+				message: `Template with name "test-template" already exists`,
+				validations: [
+					{
+						field: "name",
+						detail: "This value is already in use and should be unique.",
+					},
+				],
+			}),
+		);
+		await fillAndSubmitForm(validFormValues);
+		await waitFor(() => expect(API.updateTemplateMeta).toBeCalledTimes(1));
+		expect(
+			await screen.findByText(
+				"This value is already in use and should be unique.",
+			),
+		).toBeInTheDocument();
+	});
+
 	it("allows a description of 128 chars", () => {
 		const values: UpdateTemplateMeta = {
 			...validFormValues,

site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx

@@ -1,7 +1,8 @@
 import { API } from "api/api";
+import { getErrorMessage } from "api/errors";
 import { templateByNameKey } from "api/queries/templates";
 import type { UpdateTemplateMeta } from "api/typesGenerated";
-import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { FC } from "react";
@@ -51,6 +52,9 @@ export const TemplateSettingsPage: FC = () => {
 				displaySuccess("Template updated successfully");
 				navigate(getLink(linkToTemplate(data.organization_name, data.name)));
 			},
+			onError: (error) => {
+				displayError(getErrorMessage(error, "Failed to update template"));
+			},
 		},
 	);