fix(site): fix workspace parameters update when having immutable parameters (#9500)

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx

@@ -36,7 +36,7 @@ export const LoadingBuildLogs: Story = {
 
 const failedBuild = {
   ...MockFailedWorkspaceBuild("delete"),
-  build_number: new Date().getDate(),
+  build_number: 123123123123,
 }
 
 export const FailedDelete: Story = {

site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx

@@ -13,6 +13,8 @@ import {
   MockWorkspaceBuildParameter1,
   MockWorkspaceBuildParameter2,
   MockWorkspaceBuild,
+  MockTemplateVersionParameter4,
+  MockWorkspaceBuildParameter4,
 } from "testHelpers/entities"
 
 test("Submit the workspace settings page successfully", async () => {
@@ -20,18 +22,18 @@ test("Submit the workspace settings page successfully", async () => {
   jest
     .spyOn(api, "getWorkspaceByOwnerAndName")
     .mockResolvedValueOnce(MockWorkspace)
-  jest
-    .spyOn(api, "getTemplateVersionRichParameters")
-    .mockResolvedValueOnce([
-      MockTemplateVersionParameter1,
-      MockTemplateVersionParameter2,
-    ])
-  jest
-    .spyOn(api, "getWorkspaceBuildParameters")
-    .mockResolvedValueOnce([
-      MockWorkspaceBuildParameter1,
-      MockWorkspaceBuildParameter2,
-    ])
+  jest.spyOn(api, "getTemplateVersionRichParameters").mockResolvedValueOnce([
+    MockTemplateVersionParameter1,
+    MockTemplateVersionParameter2,
+    // Immutable parameters
+    MockTemplateVersionParameter4,
+  ])
+  jest.spyOn(api, "getWorkspaceBuildParameters").mockResolvedValueOnce([
+    MockWorkspaceBuildParameter1,
+    MockWorkspaceBuildParameter2,
+    // Immutable value
+    MockWorkspaceBuildParameter4,
+  ])
   // Mock the API calls that submit data
   const postWorkspaceBuildSpy = jest
     .spyOn(api, "postWorkspaceBuild")

site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx

@@ -14,19 +14,20 @@ import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import { FC } from "react"
 import { isApiValidationError } from "api/errors"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { WorkspaceBuildParameter } from "api/typesGenerated"
 
 const WorkspaceParametersPage = () => {
   const { workspace } = useWorkspaceSettingsContext()
-  const query = useQuery({
+  const parameters = useQuery({
     queryKey: ["workspace", workspace.id, "parameters"],
     queryFn: () => getWorkspaceParameters(workspace),
   })
   const navigate = useNavigate()
-  const mutation = useMutation({
-    mutationFn: (formValues: WorkspaceParametersFormValues) =>
+  const updateParameters = useMutation({
+    mutationFn: (buildParameters: WorkspaceBuildParameter[]) =>
       postWorkspaceBuild(workspace.id, {
         transition: "start",
-        rich_parameter_values: formValues.rich_parameter_values,
+        rich_parameter_values: buildParameters,
       }),
     onSuccess: () => {
       navigate(`/${workspace.owner_name}/${workspace.name}`)
@@ -40,10 +41,20 @@ const WorkspaceParametersPage = () => {
       </Helmet>
 
       <WorkspaceParametersPageView
-        data={query.data}
-        submitError={mutation.error}
-        isSubmitting={mutation.isLoading}
-        onSubmit={mutation.mutate}
+        data={parameters.data}
+        submitError={updateParameters.error}
+        isSubmitting={updateParameters.isLoading}
+        onSubmit={(values) => {
+          // When updating the parameters, the API does not accept immutable
+          // values so we need to filter them
+          const onlyMultableValues = parameters
+            .data!.templateVersionRichParameters.filter((p) => p.mutable)
+            .map(
+              (p) =>
+                values.rich_parameter_values.find((v) => v.name === p.name)!,
+            )
+          updateParameters.mutate(onlyMultableValues)
+        }}
         onCancel={() => {
           navigate("../..")
         }}

site/src/testHelpers/entities.ts

@@ -2078,6 +2078,11 @@ export const MockWorkspaceBuildParameter3: TypesGen.WorkspaceBuildParameter = {
   value: "my-database",
 }
 
+export const MockWorkspaceBuildParameter4: TypesGen.WorkspaceBuildParameter = {
+  name: MockTemplateVersionParameter4.name,
+  value: "immutable-value",
+}
+
 export const MockWorkspaceBuildParameter5: TypesGen.WorkspaceBuildParameter = {
   name: MockTemplateVersionParameter5.name,
   value: "5",