fix: redirect to new url after template name update (#10926)

* fix: updating template name routes to correct URL

* added e2e test

site/e2e/helpers.ts

@@ -19,8 +19,12 @@ import { prometheusPort, pprofPort } from "./constants";
 import { port } from "./playwright.config";
 import * as ssh from "ssh2";
 import { Duplex } from "stream";
-import { WorkspaceBuildParameter } from "api/typesGenerated";
+import {
+  WorkspaceBuildParameter,
+  UpdateTemplateMeta,
+} from "api/typesGenerated";
 import axios from "axios";
+import capitalize from "lodash/capitalize";
 
 // createWorkspace creates a workspace for a template.
 // It does not wait for it to be running, but it does navigate to the page.
@@ -709,6 +713,30 @@ export const updateTemplate = async (
   await uploaded.wait();
 };
 
+export const updateTemplateSettings = async (
+  page: Page,
+  templateName: string,
+  templateSettingValues: Pick<
+    UpdateTemplateMeta,
+    "name" | "display_name" | "description"
+  >,
+) => {
+  await page.goto(`/templates/${templateName}/settings`, {
+    waitUntil: "domcontentloaded",
+  });
+  await expect(page).toHaveURL(`/templates/${templateName}/settings`);
+
+  for (const [key, value] of Object.entries(templateSettingValues)) {
+    const labelText = capitalize(key).replace("_", " ");
+    await page.getByLabel(labelText, { exact: true }).fill(value);
+  }
+
+  await page.getByTestId("form-submit").click();
+
+  const name = templateSettingValues.name ?? templateName;
+  await expect(page).toHaveURL(`/templates/${name}`);
+};
+
 export const updateWorkspace = async (
   page: Page,
   workspaceName: string,

site/e2e/tests/updateTemplate.spec.ts

@@ -0,0 +1,12 @@
+import { test } from "@playwright/test";
+import { createTemplate, updateTemplateSettings } from "../helpers";
+
+test("template update with new name redirects on successful submit", async ({
+  page,
+}) => {
+  const templateName = await createTemplate(page);
+
+  await updateTemplateSettings(page, templateName, {
+    name: "new-name",
+  });
+});

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

@@ -32,11 +32,13 @@ export const TemplateSettingsPage: FC = () => {
   } = useMutation(
     (data: UpdateTemplateMeta) => updateTemplateMeta(template.id, data),
     {
-      onSuccess: async () => {
+      onSuccess: async (data) => {
+        // we use data.name because an admin may have updated templateName to something new
         await queryClient.invalidateQueries(
-          templateByNameKey(orgId, templateName),
+          templateByNameKey(orgId, data.name),
         );
         displaySuccess("Template updated successfully");
+        navigate(`/templates/${data.name}`);
       },
     },
   );