From d374becdeb75bb27283df2e6234f38a37013daa6 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Wed, 29 Nov 2023 10:54:21 -0500
Subject: [PATCH] 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                           | 30 ++++++++++++++++++-
 site/e2e/tests/updateTemplate.spec.ts         | 12 ++++++++
 .../TemplateSettingsPage.tsx                  |  6 ++--
 3 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 site/e2e/tests/updateTemplate.spec.ts

diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
index e3f26f1d37..08b20415e0 100644
--- a/site/e2e/helpers.ts
+++ b/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,
diff --git a/site/e2e/tests/updateTemplate.spec.ts b/site/e2e/tests/updateTemplate.spec.ts
new file mode 100644
index 0000000000..a1efdd3805
--- /dev/null
+++ b/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",
+  });
+});
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
index f933ad798b..38e9b35f1c 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
+++ b/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}`);
       },
     },
   );