chore(site): add tests for deprecate template flow (#12685)

Closes #12505

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

@@ -236,24 +236,11 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
         description="Deprecating a template prevents any new workspaces from being created. Existing workspaces will continue to function."
       >
         <FormFields>
-          <Stack direction="column" spacing={0.5}>
-            <Stack
-              direction="row"
-              alignItems="center"
-              spacing={0.5}
-              css={styles.optionText}
-            >
-              Deprecation Message
-            </Stack>
-            <span css={styles.optionHelperText}>
-              Leave the message empty to keep the template active. Any message
-              provided will mark the template as deprecated. Use this message to
-              inform users of the deprecation and how to migrate to a new
-              template.
-            </span>
-          </Stack>
           <TextField
-            {...getFieldHelpers("deprecation_message")}
+            {...getFieldHelpers("deprecation_message", {
+              helperText:
+                "Leave the message empty to keep the template active. Any message provided will mark the template as deprecated. Use this message to inform users of the deprecation and how to migrate to a new template.",
+            })}
             disabled={isSubmitting || !accessControlEnabled}
             fullWidth
             label="Deprecation Message"

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

@@ -1,13 +1,15 @@
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
 import * as API from "api/api";
-import type { UpdateTemplateMeta } from "api/typesGenerated";
+import type { Template, UpdateTemplateMeta } from "api/typesGenerated";
 import { Language as FooterFormLanguage } from "components/FormFooter/FormFooter";
-import { MockTemplate } from "testHelpers/entities";
+import { MockEntitlements, MockTemplate } from "testHelpers/entities";
 import {
   renderWithTemplateSettingsLayout,
   waitForLoaderToBeRemoved,
 } from "testHelpers/renderHelpers";
+import { server } from "testHelpers/server";
 import { getValidationSchema } from "./TemplateSettingsForm";
 import { TemplateSettingsPage } from "./TemplateSettingsPage";
 
@@ -55,6 +57,9 @@ const renderTemplateSettingsPage = async () => {
   renderWithTemplateSettingsLayout(<TemplateSettingsPage />, {
     route: `/templates/${MockTemplate.name}/settings`,
     path: `/templates/:template/settings`,
+    extraRoutes: [
+      { path: "/templates/:template", element: <div>Template</div> },
+    ],
   });
   await waitForLoaderToBeRemoved();
 };
@@ -126,4 +131,68 @@ describe("TemplateSettingsPage", () => {
     const validate = () => getValidationSchema().validateSync(values);
     expect(validate).toThrowError();
   });
+
+  describe("Deprecate template", () => {
+    it("deprecates a template when has access control", async () => {
+      server.use(
+        http.get("/api/v2/entitlements", () => {
+          return HttpResponse.json({
+            ...MockEntitlements,
+            features: API.withDefaultFeatures({
+              access_control: { enabled: true, entitlement: "entitled" },
+            }),
+          });
+        }),
+      );
+      const updateTemplateMetaSpy = jest.spyOn(API, "updateTemplateMeta");
+      const deprecationMessage = "This template is deprecated";
+
+      await renderTemplateSettingsPage();
+      await deprecateTemplate(MockTemplate, deprecationMessage);
+
+      const [templateId, data] = updateTemplateMetaSpy.mock.calls[0];
+
+      expect(templateId).toEqual(MockTemplate.id);
+      expect(data).toEqual(
+        expect.objectContaining({ deprecation_message: deprecationMessage }),
+      );
+    });
+
+    it("does not deprecate a template when does not have access control", async () => {
+      server.use(
+        http.get("/api/v2/entitlements", () => {
+          return HttpResponse.json({
+            ...MockEntitlements,
+            features: API.withDefaultFeatures({
+              access_control: { enabled: false, entitlement: "not_entitled" },
+            }),
+          });
+        }),
+      );
+      const updateTemplateMetaSpy = jest.spyOn(API, "updateTemplateMeta");
+
+      await renderTemplateSettingsPage();
+      await deprecateTemplate(
+        MockTemplate,
+        "This template should not be able to deprecate",
+      );
+
+      const [templateId, data] = updateTemplateMetaSpy.mock.calls[0];
+
+      expect(templateId).toEqual(MockTemplate.id);
+      expect(data).toEqual(
+        expect.objectContaining({ deprecation_message: "" }),
+      );
+    });
+  });
 });
+
+async function deprecateTemplate(template: Template, message: string) {
+  const deprecationField = screen.getByLabelText("Deprecation Message");
+  await userEvent.type(deprecationField, message);
+
+  const submitButton = await screen.findByText(
+    FooterFormLanguage.defaultSubmitLabel,
+  );
+  await userEvent.click(submitButton);
+}