feat: Adjust forms to include Rich Parameters (#5856)

* XService: GetTemplateParameters

* Rich parameter input shows up

* Render option icons

* Icons

* WIP

* For testing purposes: template

* Fix: useState

* WIP: dynamic validation

* Yup validation

* Translations

* Remove temporary template

* make fmt

* WIP

* Fix: tests

* Fix: fmt

* URL param

* Refactor

* Test: rich param value

* Storybook

* Fix

* Refactor for testing purposes

* Typo

* test: string validation

* Button: build parameters

* Full screen page

* Fix: navigate

* XState done

* refactor: postWorkspaceBuild

* RichParameterInput rendered

* Fix: bad initial value

* Validation works

* Maybe

* Fix

* Go back button

* GoBack button

* Form

* Fix

* Storybook

* Fix: CreateWorkspacePage

* fmt

* Test

* ns

* fmt

* All tests

* feat: WorkspaceActions depend on template parameters

* Fix

site/src/api/api.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosRequestHeaders } from "axios"
 import dayjs from "dayjs"
 import * as Types from "./types"
-import { WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"
 
 export const hardCodedCSRFCookie = (): string => {
@@ -288,6 +287,15 @@ export const getTemplateVersionParameters = async (
   return response.data
 }
 
+export const getTemplateVersionRichParameters = async (
+  versionId: string,
+): Promise<TypesGen.TemplateVersionParameter[]> => {
+  const response = await axios.get(
+    `/api/v2/templateversions/${versionId}/rich-parameters`,
+  )
+  return response.data
+}
+
 export const createTemplate = async (
   organizationId: string,
   data: TypesGen.CreateTemplateRequest,
@@ -390,26 +398,29 @@ export const getWorkspaceByOwnerAndName = async (
   return response.data
 }
 
-const postWorkspaceBuild =
-  (transition: WorkspaceBuildTransition) =>
-  async (
-    workspaceId: string,
-    template_version_id?: string,
-  ): Promise<TypesGen.WorkspaceBuild> => {
-    const payload = {
-      transition,
-      template_version_id,
-    }
-    const response = await axios.post(
-      `/api/v2/workspaces/${workspaceId}/builds`,
-      payload,
-    )
-    return response.data
-  }
+export const postWorkspaceBuild = async (
+  workspaceId: string,
+  data: TypesGen.CreateWorkspaceBuildRequest,
+): Promise<TypesGen.WorkspaceBuild> => {
+  const response = await axios.post(
+    `/api/v2/workspaces/${workspaceId}/builds`,
+    data,
+  )
+  return response.data
+}
 
-export const startWorkspace = postWorkspaceBuild("start")
-export const stopWorkspace = postWorkspaceBuild("stop")
-export const deleteWorkspace = postWorkspaceBuild("delete")
+export const startWorkspace = (
+  workspaceId: string,
+  templateVersionID: string,
+) =>
+  postWorkspaceBuild(workspaceId, {
+    transition: "start",
+    template_version_id: templateVersionID,
+  })
+export const stopWorkspace = (workspaceId: string) =>
+  postWorkspaceBuild(workspaceId, { transition: "stop" })
+export const deleteWorkspace = (workspaceId: string) =>
+  postWorkspaceBuild(workspaceId, { transition: "delete" })
 
 export const cancelWorkspaceBuild = async (
   workspaceBuildId: TypesGen.WorkspaceBuild["id"],
@@ -790,3 +801,12 @@ export const updateWorkspaceVersion = async (
   const template = await getTemplate(workspace.template_id)
   return startWorkspace(workspace.id, template.active_version_id)
 }
+
+export const getWorkspaceBuildParameters = async (
+  workspaceBuildId: TypesGen.WorkspaceBuild["id"],
+): Promise<TypesGen.WorkspaceBuildParameter[]> => {
+  const response = await axios.get<TypesGen.WorkspaceBuildParameter[]>(
+    `/api/v2/workspacebuilds/${workspaceBuildId}/parameters`,
+  )
+  return response.data
+}