coder · Parkreiner · Oct 9, 2023 · Oct 9, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/site/src/api/queries/workspaceBuilds.ts b/site/src/api/queries/workspaceBuilds.ts
@@ -1,7 +1,18 @@
-import { UseInfiniteQueryOptions } from "react-query";
+import { QueryOptions, UseInfiniteQueryOptions } from "react-query";
 import * as API from "api/api";
 import { WorkspaceBuild, WorkspaceBuildsRequest } from "api/typesGenerated";
 
+export function workspaceBuildParametersKey(workspaceId: string) {
+  return ["workspaceBuilds", workspaceId, "parameters"] as const;
+}
+
+export function workspaceBuildParameters(workspaceBuildId: string) {
+  return {
+    queryKey: workspaceBuildParametersKey(workspaceBuildId),
+    queryFn: () => API.getWorkspaceBuildParameters(workspaceBuildId),
+  } as const satisfies QueryOptions;
+}
+
 export const workspaceBuildByNumber = (
   username: string,
   workspaceName: string,

diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -26,7 +26,7 @@ export const workspaceByOwnerAndName = (
   };
 };
 
-type AutoCreateWorkspaceOptions = {
+export type AutoCreateWorkspaceOptions = {
   templateName: string;
   versionId?: string;
   organizationId: string;
@@ -84,6 +84,27 @@ export const autoCreateWorkspace = (queryClient: QueryClient) => {
   };
 };
 
+export function workspaceParametersKey(workspaceId: string) {
+  return ["workspaces", workspaceId, "parameters"] as const;
+}
+
+export function workspaceParameters(workspace: Workspace) {
+  return {
+    queryKey: workspaceParametersKey(workspace.id),
+    queryFn: () => API.getWorkspaceParameters(workspace),
+  } as const;
+}
+
+export function updateWorkspaceParameters(workspaceId: string) {
+  return {
+    mutationFn: (buildParameters: WorkspaceBuildParameter[]) =>
+      API.postWorkspaceBuild(workspaceId, {
+        transition: "start",
+        rich_parameter_values: buildParameters,
+      }),
+  } as const;
+}
+
 export function workspacesKey(config: WorkspacesRequest = {}) {
   const { q, limit } = config;
   return ["workspaces", { q, limit }] as const;

diff --git a/site/src/components/TemplateParameters/TemplateParameters.tsx b/site/src/components/TemplateParameters/TemplateParameters.tsx
@@ -17,68 +17,60 @@ export type TemplateParametersSectionProps = {
 export const MutableTemplateParametersSection: FC<
   TemplateParametersSectionProps
 > = ({ templateParameters, getInputProps, ...formSectionProps }) => {
-  const hasMutableParameters =
-    templateParameters.filter((p) => p.mutable).length > 0;
+  const mutableParameters = templateParameters.filter((p) => p.mutable);
+
+  if (mutableParameters.length === 0) {
+    return null;
+  }
 
   return (
-    <>
-      {hasMutableParameters && (
-        <FormSection
-          {...formSectionProps}
-          title="Parameters"
-          description="Settings used by your template"
-        >
-          <FormFields>
-            {templateParameters.map(
-              (parameter, index) =>
-                parameter.mutable && (
-                  <RichParameterInput
-                    {...getInputProps(parameter, index)}
-                    key={parameter.name}
-                    parameter={parameter}
-                  />
-                ),
-            )}
-          </FormFields>
-        </FormSection>
-      )}
-    </>
+    <FormSection
+      {...formSectionProps}
+      title="Parameters"
+      description="Settings used by your template"
+    >
+      <FormFields>
+        {mutableParameters.map((parameter, index) => (
+          <RichParameterInput
+            {...getInputProps(parameter, index)}
+            key={parameter.name}
+            parameter={parameter}
+          />
+        ))}
+      </FormFields>
+    </FormSection>
   );
 };
 
 export const ImmutableTemplateParametersSection: FC<
   TemplateParametersSectionProps
 > = ({ templateParameters, getInputProps, ...formSectionProps }) => {
-  const hasImmutableParameters =
-    templateParameters.filter((p) => !p.mutable).length > 0;
+  const immutableParams = templateParameters.filter((p) => !p.mutable);
+
+  if (immutableParams.length === 0) {
+    return null;
+  }
 
   return (
-    <>
-      {hasImmutableParameters && (
-        <FormSection
-          {...formSectionProps}
-          title="Immutable parameters"
-          description={
-            <>
-              These settings <strong>cannot be changed</strong> after creating
-              the workspace.
-            </>
-          }
-        >
-          <FormFields>
-            {templateParameters.map(
-              (parameter, index) =>
-                !parameter.mutable && (
-                  <RichParameterInput
-                    {...getInputProps(parameter, index)}
-                    key={parameter.name}
-                    parameter={parameter}
-                  />
-                ),
-            )}
-          </FormFields>
-        </FormSection>
-      )}
-    </>
+    <FormSection
+      {...formSectionProps}
+      title="Immutable parameters"
+      description={
+        <>
+          These settings <strong>cannot be changed</strong> after creating the
+          workspace.
+        </>
+      }
+    >
+      <FormFields>
+        {immutableParams.map((parameter, index) => (
+          <RichParameterInput
+            {...getInputProps(parameter, index)}
+            key={parameter.name}
+            parameter={parameter}
+          />
+        ))}
+      </FormFields>
+    </FormSection>
   );
 };