coder · mtojek · Feb 1, 2023 · Jan 24, 2023 · Jan 24, 2023 · Jan 25, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -7,6 +7,7 @@ import GroupsPage from "pages/GroupsPage/GroupsPage"
 import LoginPage from "pages/LoginPage/LoginPage"
 import { SetupPage } from "pages/SetupPage/SetupPage"
 import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
+import { WorkspaceBuildParametersPage } from "pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage"
 import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
 import UsersPage from "pages/UsersPage/UsersPage"
 import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
@@ -213,6 +214,10 @@ export const AppRouter: FC = () => {
                     path="change-version"
                     element={<WorkspaceChangeVersionPage />}
                   />
+                  <Route
+                    path="build-parameters"
+                    element={<WorkspaceBuildParametersPage />}
+                  />
                 </Route>
               </Route>
             </Route>

diff --git a/site/src/api/api.ts b/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
+}
diff --git a/site/src/components/DropdownButton/ActionCtas.tsx b/site/src/components/DropdownButton/ActionCtas.tsx
@@ -4,6 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import BlockIcon from "@material-ui/icons/Block"
 import CloudQueueIcon from "@material-ui/icons/CloudQueue"
 import UpdateOutlined from "@material-ui/icons/UpdateOutlined"
+import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
 import CropSquareIcon from "@material-ui/icons/CropSquare"
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"
 import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
@@ -51,6 +52,23 @@ export const ChangeVersionButton: FC<
   )
 }
 
+export const BuildParametersButton: FC<
+  React.PropsWithChildren<WorkspaceAction>
+> = ({ handleAction }) => {
+  const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
+
+  return (
+    <Button
+      className={styles.actionButton}
+      startIcon={<SettingsOutlined />}
+      onClick={handleAction}
+    >
+      {t("actionButton.buildParameters")}
+    </Button>
+  )
+}
+
 export const StartButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
   handleAction,
 }) => {

diff --git a/site/src/components/GoBackButton/GoBackButton.tsx b/site/src/components/GoBackButton/GoBackButton.tsx
@@ -0,0 +1,19 @@
+import Button from "@material-ui/core/Button"
+
+interface GoBackButtonProps {
+  onClick: () => void
+}
+
+export const Language = {
+  ariaLabel: "Go back",
+}
+
+export const GoBackButton: React.FC<
+  React.PropsWithChildren<GoBackButtonProps>
+> = ({ onClick }) => {
+  return (
+    <Button onClick={onClick} size="small" aria-label={Language.ariaLabel}>
+      Go back
+    </Button>
+  )
+}
diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -0,0 +1,95 @@
+import { Story } from "@storybook/react"
+import { TemplateVersionParameter } from "api/typesGenerated"
+import {
+  RichParameterInput,
+  RichParameterInputProps,
+} from "./RichParameterInput"
+
+export default {
+  title: "components/RichParameterInput",
+  component: RichParameterInput,
+}
+
+const Template: Story<RichParameterInputProps> = (
+  args: RichParameterInputProps,
+) => <RichParameterInput {...args} />
+
+const createTemplateVersionParameter = (
+  partial: Partial<TemplateVersionParameter>,
+): TemplateVersionParameter => {
+  return {
+    name: "first_parameter",
+    description: "This is first parameter.",
+    type: "string",
+    mutable: false,
+    default_value: "default string",
+    icon: "/icon/folder.svg",
+    options: [],
+    validation_error: "",
+    validation_regex: "",
+    validation_min: 0,
+    validation_max: 0,
+
+    ...partial,
+  }
+}
+
+export const Basic = Template.bind({})
+Basic.args = {
+  initialValue: "initial-value",
+  parameter: createTemplateVersionParameter({
+    name: "project_name",
+    description:
+      "Customize the name of a Google Cloud project that will be created!",
+  }),
+}
+
+export const NumberType = Template.bind({})
+NumberType.args = {
+  initialValue: "4",
+  parameter: createTemplateVersionParameter({
+    name: "number_parameter",
+    type: "number",
+    description: "Numeric parameter",
+  }),
+}
+
+export const BooleanType = Template.bind({})
+BooleanType.args = {
+  initialValue: "false",
+  parameter: createTemplateVersionParameter({
+    name: "bool_parameter",
+    type: "bool",
+    description: "Boolean parameter",
+  }),
+}
+
+export const OptionsType = Template.bind({})
+OptionsType.args = {
+  initialValue: "first_option",
+  parameter: createTemplateVersionParameter({
+    name: "options_parameter",
+    type: "string",
+    description: "Parameter with options",
+    options: [
+      {
+        name: "First option",
+        value: "first_option",
+        description: "This is option 1",
+        icon: "",
+      },
+      {
+        name: "Second option",
+        value: "second_option",
+        description: "This is option 2",
+        icon: "/icon/database.svg",
+      },
+      {
+        name: "Third option",
+        value: "third_option",
+        description: "This is option 3",
+        icon: "/icon/aws.png",
+      },
+    ],
+  }),
+}