Change the create template flow to use variables

BrunoQuaresma · BrunoQuaresma · commit ea9690c1a0dc · 2023-03-02T18:11:23.000Z
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -5,6 +5,7 @@ import {
   ParameterSchema,
   ProvisionerJobLog,
   TemplateExample,
+  TemplateVersionVariable,
 } from "api/typesGenerated"
 import { FormFooter } from "components/FormFooter/FormFooter"
 import { ParameterInput } from "components/ParameterInput/ParameterInput"
@@ -23,6 +24,7 @@ import * as Yup from "yup"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
 import { LazyIconField } from "components/IconField/LazyIconField"
+import { VariableInput } from "./VariableInput"
 
 const validationSchema = Yup.object({
   name: nameValidator("Name"),
@@ -32,6 +34,9 @@ const validationSchema = Yup.object({
   default_ttl_hours: Yup.number(),
   allow_user_cancel_workspace_jobs: Yup.boolean(),
   parameter_values_by_name: Yup.object().optional(),
+  user_variable_values: Yup.array()
+    .of(Yup.object({ name: Yup.string(), value: Yup.string().optional() }))
+    .optional(),
 })
 
 const defaultInitialValues: CreateTemplateData = {
@@ -42,6 +47,7 @@ const defaultInitialValues: CreateTemplateData = {
   default_ttl_hours: 24,
   allow_user_cancel_workspace_jobs: false,
   parameter_values_by_name: undefined,
+  user_variable_values: undefined,
 }
 
 const getInitialValues = (starterTemplate?: TemplateExample) => {
@@ -62,6 +68,7 @@ interface CreateTemplateFormProps {
   starterTemplate?: TemplateExample
   error?: unknown
   parameters?: ParameterSchema[]
+  variables?: TemplateVersionVariable[]
   isSubmitting: boolean
   onCancel: () => void
   onSubmit: (data: CreateTemplateData) => void
@@ -74,6 +81,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
   starterTemplate,
   error,
   parameters,
+  variables,
   isSubmitting,
   onCancel,
   onSubmit,
@@ -268,6 +276,34 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
           </div>
         )}
 
+        {/* Variables */}
+        {variables && (
+          <div className={styles.formSection}>
+            <div className={styles.formSectionInfo}>
+              <h2 className={styles.formSectionInfoTitle}>Variables</h2>
+              <p className={styles.formSectionInfoDescription}>
+                Enter the user variables
+              </p>
+            </div>
+
+            <Stack direction="column" className={styles.formSectionFields}>
+              {variables.map((variable, index) => (
+                <VariableInput
+                  variable={variable}
+                  disabled={isSubmitting}
+                  key={variable.name}
+                  onChange={async (value) => {
+                    await form.setFieldValue("user_variable_values." + index, {
+                      name: variable.name,
+                      value: value,
+                    })
+                  }}
+                />
+              ))}
+            </Stack>
+          </div>
+        )}
+
         {jobError && (
           <Stack>
             <div className={styles.error}>
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -30,8 +30,15 @@ const CreateTemplatePage: FC = () => {
       },
     },
   })
-  const { starterTemplate, parameters, error, file, jobError, jobLogs } =
-    state.context
+  const {
+    starterTemplate,
+    parameters,
+    error,
+    file,
+    jobError,
+    jobLogs,
+    variables,
+  } = state.context
   const shouldDisplayForm = !state.hasTag("loading")
 
   const onCancel = () => {
@@ -59,6 +66,7 @@ const CreateTemplatePage: FC = () => {
               error={error}
               starterTemplate={starterTemplate}
               isSubmitting={state.hasTag("submitting")}
+              variables={variables}
               parameters={parameters}
               onCancel={onCancel}
               onSubmit={(data) => {
diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx
@@ -0,0 +1,126 @@
+import FormControlLabel from "@material-ui/core/FormControlLabel"
+import Radio from "@material-ui/core/Radio"
+import RadioGroup from "@material-ui/core/RadioGroup"
+import { makeStyles } from "@material-ui/core/styles"
+import TextField from "@material-ui/core/TextField"
+import { Stack } from "components/Stack/Stack"
+import { FC } from "react"
+import { TemplateVersionVariable } from "../../api/typesGenerated"
+
+const isBoolean = (variable: TemplateVersionVariable) => {
+  return variable.type === "bool"
+}
+
+const VariableLabel: React.FC<{ variable: TemplateVersionVariable }> = ({
+  variable,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <label htmlFor={variable.name}>
+      <span className={styles.labelName}>var.{variable.name}</span>
+      <span className={styles.labelDescription}>{variable.description}</span>
+    </label>
+  )
+}
+
+export interface VariableInputProps {
+  disabled?: boolean
+  variable: TemplateVersionVariable
+  onChange: (value: string) => void
+  defaultValue?: string
+}
+
+export const VariableInput: FC<VariableInputProps> = ({
+  disabled,
+  onChange,
+  variable,
+  defaultValue,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Stack direction="column" spacing={0.75}>
+      <VariableLabel variable={variable} />
+      <div className={styles.input}>
+        <VariableField
+          disabled={disabled}
+          onChange={onChange}
+          variable={variable}
+          defaultValue={defaultValue}
+        />
+      </div>
+    </Stack>
+  )
+}
+
+const VariableField: React.FC<VariableInputProps> = ({
+  disabled,
+  onChange,
+  variable,
+  defaultValue,
+}) => {
+  if (isBoolean(variable)) {
+    return (
+      <RadioGroup
+        id={variable.name}
+        defaultValue={variable.default_value}
+        onChange={(event) => {
+          onChange(event.target.value)
+        }}
+      >
+        <FormControlLabel
+          disabled={disabled}
+          value="true"
+          control={<Radio color="primary" size="small" disableRipple />}
+          label="True"
+        />
+        <FormControlLabel
+          disabled={disabled}
+          value="false"
+          control={<Radio color="primary" size="small" disableRipple />}
+          label="False"
+        />
+      </RadioGroup>
+    )
+  }
+
+  return (
+    <TextField
+      id={variable.name}
+      size="small"
+      disabled={disabled}
+      placeholder={variable.sensitive ? "" : variable.default_value}
+      defaultValue={
+        variable.sensitive ? "" : defaultValue ?? variable.default_value
+      }
+      onChange={(event) => {
+        onChange(event.target.value)
+      }}
+    />
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  labelName: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    display: "block",
+    marginBottom: theme.spacing(0.5),
+  },
+  labelDescription: {
+    fontSize: 16,
+    color: theme.palette.text.primary,
+    display: "block",
+    fontWeight: 600,
+  },
+  input: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  checkbox: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  },
+}))
diff --git a/site/src/xServices/createTemplate/createTemplateXService.ts b/site/src/xServices/createTemplate/createTemplateXService.ts
