oh boy

coder · aslilac · Feb 28, 2024 · Feb 28, 2024 · Feb 28, 2024 · Feb 28, 2024
commit cdb9f26804ba7ecad4217f1d7426c09143b1fe64
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
@@ -48,9 +48,9 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
     queryKey: ["workspace", workspace.id, "parameters"],
     queryFn: () => getWorkspaceParameters(workspace),
   });
-  const ephemeralParameters = parameters?.templateVersionRichParameters.filter(
-    (p) => p.ephemeral,
-  );
+  const ephemeralParameters = parameters
+    ? parameters.templateVersionRichParameters.filter((p) => p.ephemeral)
+    : undefined;
 
   return (
     <Popover>
@@ -70,6 +70,7 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
       >
         <BuildParametersPopoverContent
           ephemeralParameters={ephemeralParameters}
+          buildParameters={parameters?.buildParameters}
           onSubmit={onSubmit}
         />
       </PopoverContent>
@@ -79,19 +80,21 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
 
 interface BuildParametersPopoverContentProps {
   ephemeralParameters?: TemplateVersionParameter[];
+  buildParameters?: WorkspaceBuildParameter[];
   onSubmit: (buildParameters: WorkspaceBuildParameter[]) => void;
 }
 
 const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
   ephemeralParameters,
+  buildParameters,
   onSubmit,
 }) => {
   const theme = useTheme();
   const popover = usePopover();
 
   return (
     <>
-      {ephemeralParameters ? (
+      {buildParameters && ephemeralParameters ? (
         ephemeralParameters.length > 0 ? (
           <>
             <div
@@ -113,6 +116,12 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
                   popover.setIsOpen(false);
                 }}
                 ephemeralParameters={ephemeralParameters}
+                buildParameters={buildParameters.map(
+                  (p): AutofillBuildParameter => ({
+                    ...p,
+                    source: "active_build",
+                  }),
+                )}
               />
             </div>
           </>
@@ -146,13 +155,21 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
 
 interface FormProps {
   ephemeralParameters: TemplateVersionParameter[];
+  buildParameters: AutofillBuildParameter[];
   onSubmit: (buildParameters: WorkspaceBuildParameter[]) => void;
 }
 
-const Form: FC<FormProps> = ({ ephemeralParameters, onSubmit }) => {
+const Form: FC<FormProps> = ({
+  ephemeralParameters,
+  buildParameters,
+  onSubmit,
+}) => {
   const form = useFormik({
     initialValues: {
-      rich_parameter_values: getInitialRichParameterValues(ephemeralParameters),
+      rich_parameter_values: getInitialRichParameterValues(
+        ephemeralParameters,
+        buildParameters,
+      ),
     },
     onSubmit: (values) => {
       onSubmit(values.rich_parameter_values);

diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx
@@ -10,6 +10,7 @@ import {
 } from "components/Form/Form";
 import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
 import {
+  AutofillBuildParameter,
   getInitialRichParameterValues,
   useValidationSchemaForRichParameters,
 } from "utils/richParameters";
@@ -27,6 +28,7 @@ export type WorkspaceParametersFormValues = {
 interface WorkspaceParameterFormProps {
   workspace: Workspace;
   templateVersionRichParameters: TemplateVersionParameter[];
+  autofillParams: AutofillBuildParameter[];
   isSubmitting: boolean;
   canChangeVersions: boolean;
   error: unknown;
@@ -39,6 +41,7 @@ export const WorkspaceParametersForm: FC<WorkspaceParameterFormProps> = ({
   onCancel,
   onSubmit,
   templateVersionRichParameters,
+  autofillParams,
   error,
   canChangeVersions,
   isSubmitting,
@@ -48,6 +51,7 @@ export const WorkspaceParametersForm: FC<WorkspaceParameterFormProps> = ({
     initialValues: {
       rich_parameter_values: getInitialRichParameterValues(
         templateVersionRichParameters,
+        autofillParams,
       ),
     },
     validationSchema: Yup.object({

@@ -1,29 +1,30 @@
-import Button from "@mui/material/Button";
-import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
-import { type FC } from "react";
-import { Helmet } from "react-helmet-async";
-import { useMutation, useQuery } from "react-query";
-import { useNavigate } from "react-router-dom";
 import { getWorkspaceParameters, postWorkspaceBuild } from "api/api";
-import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
+import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import {
   WorkspacePermissions,
   workspaceChecks,
 } from "../../WorkspacePage/permissions";
 import { checkAuthorization } from "api/queries/authCheck";
-import { templateByName } from "api/queries/templates";
 import { useWorkspaceSettings } from "../WorkspaceSettingsLayout";
+import { templateByName } from "api/queries/templates";
+import { useMutation, useQuery } from "react-query";
 import { Loader } from "components/Loader/Loader";
 import {
-  type WorkspaceParametersFormValues,
+  WorkspaceParametersFormValues,
   WorkspaceParametersForm,
 } from "./WorkspaceParametersForm";
+import { useNavigate } from "react-router-dom";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import { type FC } from "react";
 import { isApiValidationError } from "api/errors";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { EmptyState } from "components/EmptyState/EmptyState";
+import Button from "@mui/material/Button";
+import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import { docs } from "utils/docs";
+import { AutofillBuildParameter } from "utils/richParameters";
 
 const WorkspaceParametersPage: FC = () => {
   const workspace = useWorkspaceSettings();
@@ -126,6 +127,10 @@ export const WorkspaceParametersPageView: FC<
           <WorkspaceParametersForm
             workspace={workspace}
             canChangeVersions={canChangeVersions}
+            autofillParams={data.buildParameters.map((p) => ({
+              ...p,
+              source: "active_build",
+            }))}
             templateVersionRichParameters={data.templateVersionRichParameters}
             error={submitError}
             isSubmitting={isSubmitting}

@@ -1,4 +1,4 @@
-import { TemplateVersionParameter } from "api/typesGenerated";
+import type { TemplateVersionParameter } from "api/typesGenerated";
 import { getInitialRichParameterValues } from "./richParameters";
 
 test("getInitialRichParameterValues return default value when default build parameter is not valid", () => {
@@ -44,8 +44,10 @@ test("getInitialRichParameterValues return default value when default build para
   ];
 
   const cpuParameter = templateParameters[0];
-  const [cpuParameterInitialValue] =
-    getInitialRichParameterValues(templateParameters);
+  const [cpuParameterInitialValue] = getInitialRichParameterValues(
+    templateParameters,
+    [{ name: cpuParameter.name, value: "100", source: "url" }],
+  );
 
   expect(cpuParameterInitialValue.value).toBe(cpuParameter.default_value);
 });
@@ -14,11 +14,42 @@ export type AutofillBuildParameter = {
 
 export const getInitialRichParameterValues = (
   templateParams: TemplateVersionParameter[],
+  autofillParams: AutofillBuildParameter[],
 ): WorkspaceBuildParameter[] => {
-  return templateParams.map((parameter) => ({
-    name: parameter.name,
-    value: parameter.default_value,
-  }));
+  return templateParams.map((parameter) => {
+    // Short-circuit for ephemeral parameters, which are always reset to
+    // the template-defined default.
+    if (parameter.ephemeral) {
+      return {
+        name: parameter.name,
+        value: parameter.default_value,
+      };
+    }
+
+    const autofillParam = autofillParams?.find(
+      ({ name }) => name === parameter.name,
+    );
+
+    return {
+      name: parameter.name,
+      value:
+        autofillParam && isValidValue(parameter, autofillParam)
+          ? autofillParam.value
+          : parameter.default_value,
+    };
+  });
+};
+
+const isValidValue = (
+  templateParam: TemplateVersionParameter,
+  buildParam: WorkspaceBuildParameter,
+) => {
+  if (templateParam.options.length > 0) {
+    const validValues = templateParam.options.map((option) => option.value);
+    return validValues.includes(buildParam.value);
+  }
+
+  return true;
 };
 
 export const useValidationSchemaForRichParameters = (