switch to query params

coder · Emyrk · May 8, 2024 · May 1, 2024 · May 1, 2024 · May 1, 2024
commit 3173a5e56087579669b0db65a400bc4b9eff0c72
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
@@ -183,21 +183,15 @@ export const createTemplate = async (
   let path = "/templates/new";
   if (isStarterTemplate(responses)) {
     path += `?exampleId=${responses}`;
+  } else {
+    // The form page will read this value and use it as the default type.
+    path += "?provisioner_type=echo";
   }
 
   await page.goto(path, { waitUntil: "domcontentloaded" });
   await expectUrl(page).toHavePathName("/templates/new");
 
   if (!isStarterTemplate(responses)) {
-    await page
-      .locator(`xpath=//input[@data-testid="provisioner-type-input"]`)
-      .evaluate((el: HTMLElement) => {
-        // This is a little jank, but the "setAttribute" updates the HTML, but not the formik values.
-        el.setAttribute("value", "echo");
-        // This '.click()' activates the onClick handler that tells the input to update it's formik value.
-        el.click();
-      });
-
     await page.getByTestId("file-upload").setInputFiles({
       buffer: await createTemplateVersionTar(responses),
       mimeType: "application/x-tar",

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -1,5 +1,5 @@
 import TextField from "@mui/material/TextField";
 import { Field, FormikProvider, useFormik } from "formik";
 import camelCase from "lodash/camelCase";
 import capitalize from "lodash/capitalize";
 import type { FC } from "react";
@@ -33,6 +33,7 @@
 } from "utils/schedule";
 import { TemplateUpload, type TemplateUploadProps } from "./TemplateUpload";
 import { VariableInput } from "./VariableInput";
+import { useSearchParams } from "react-router-dom";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 
@@ -91,16 +92,23 @@
   fromCopy?: Template;
   variables?: TemplateVersionVariable[];
   allowAdvancedScheduling: boolean;
+  searchParams: URLSearchParams;
 };
 
 const getInitialValues = ({
   fromExample,
   fromCopy,
   allowAdvancedScheduling,
   variables,
+  searchParams,
 }: GetInitialValuesParams) => {
   let initialValues = defaultInitialValues;
 
+  // Will assume the query param has a valid ProvisionerType, as this query param is only used
+  // in testing.
+  defaultInitialValues.provisioner_type =
+    (searchParams.get("provisioner_type") as ProvisionerType) || "terraform";
+
   if (!allowAdvancedScheduling) {
     initialValues = {
       ...initialValues,
@@ -167,6 +175,7 @@
 };
 
 export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
+  const [searchParams, _] = useSearchParams();
   const {
     onCancel,
     onSubmit,
@@ -179,13 +188,15 @@
     allowAdvancedScheduling,
     variablesSectionRef,
   } = props;
+
   const form = useFormik<CreateTemplateData>({
     initialValues: getInitialValues({
       allowAdvancedScheduling,
       fromExample:
         "starterTemplate" in props ? props.starterTemplate : undefined,
       fromCopy: "copiedTemplate" in props ? props.copiedTemplate : undefined,
       variables,
+      searchParams,
     }),
     validationSchema,
     onSubmit,
@@ -217,25 +228,6 @@
               />
             )}
 
-            {/* 
-            This value is always "terraform" in production. 
-            For testing purposes, we expose this as a hidden form element
-            that can be changed. For example, to "echo"
-          */}
-            <Field
-              type="hidden"
-              {...getFieldHelpers("provisioner_type")}
-              data-testid="provisioner-type-input"
-              label="Provisioner type"
-              // This is a bit jank, but when you call 'setAttribute('value', 'echo') from playwright, the formik form
-              // is not updated. So calling 'click' will also update formik. This is super weird, but I cannot find another
-              // way
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Not sure what the actual type is here.
-              onClick={async (e: any) => {
-                await form.setFieldValue("provisioner_type", e.target.value);
-              }}
-            />
-
             <TextField
               {...getFieldHelpers("name")}
               disabled={isSubmitting}