coder · BrunoQuaresma · May 19, 2022 · May 16, 2022 · May 17, 2022 · May 17, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -20,6 +20,7 @@ import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSe
 
 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
 const WorkspacesPage = React.lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
+const CreateWorkspacePage = React.lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
 
 export const AppRouter: React.FC = () => (
   <React.Suspense fallback={<></>}>
@@ -83,6 +84,17 @@ export const AppRouter: React.FC = () => (
               </AuthAndFrame>
             }
           />
+
+          <Route path=":template">
+            <Route
+              path="new"
+              element={
+                <RequireAuth>
+                  <CreateWorkspacePage />
+                </RequireAuth>
+              }
+            />
+          </Route>
         </Route>
 
         <Route path="users">

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1,5 +1,4 @@
 import axios, { AxiosRequestHeaders } from "axios"
-import { mutate } from "swr"
 import { WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"
 
@@ -22,34 +21,6 @@ export const provisioners: TypesGen.ProvisionerDaemon[] = [
   },
 ]
 
-export namespace Workspace {
-  export const create = async (
-    organizationId: string,
-    request: TypesGen.CreateWorkspaceRequest,
-  ): Promise<TypesGen.Workspace> => {
-    const response = await fetch(`/api/v2/organizations/${organizationId}/workspaces`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(request),
-    })
-
-    const body = await response.json()
-    if (!response.ok) {
-      throw new Error(body.message)
-    }
-
-    // Let SWR know that both the /api/v2/workspaces/* and /api/v2/templates/*
-    // endpoints will need to fetch new data.
-    const mutateWorkspacesPromise = mutate("/api/v2/workspaces")
-    const mutateTemplatesPromise = mutate("/api/v2/templates")
-    await Promise.all([mutateWorkspacesPromise, mutateTemplatesPromise])
-
-    return body
-  }
-}
-
 export const login = async (email: string, password: string): Promise<TypesGen.LoginWithPasswordResponse> => {
   const payload = JSON.stringify({
     email,
@@ -115,6 +86,21 @@ export const getTemplates = async (organizationId: string): Promise<TypesGen.Tem
   return response.data
 }
 
+export const getTemplateByName = async (organizationId: string, name: string): Promise<TypesGen.Template> => {
+  const response = await axios.get<TypesGen.Template>(`/api/v2/organizations/${organizationId}/templates/${name}`)
+  return response.data
+}
+
+export const getTemplateVersion = async (versionId: string): Promise<TypesGen.TemplateVersion> => {
+  const response = await axios.get<TypesGen.TemplateVersion>(`/api/v2/templateversions/${versionId}`)
+  return response.data
+}
+
+export const getTemplateVersionSchema = async (versionId: string): Promise<TypesGen.ParameterSchema[]> => {
+  const response = await axios.get<TypesGen.ParameterSchema[]>(`/api/v2/templateversions/${versionId}/schema`)
+  return response.data
+}
+
 export const getWorkspace = async (workspaceId: string): Promise<TypesGen.Workspace> => {
   const response = await axios.get<TypesGen.Workspace>(`/api/v2/workspaces/${workspaceId}`)
   return response.data
@@ -180,6 +166,14 @@ export const createUser = async (user: TypesGen.CreateUserRequest): Promise<Type
   return response.data
 }
 
+export const createWorkspace = async (
+  organizationId: string,
+  workspace: TypesGen.CreateWorkspaceRequest,
+): Promise<TypesGen.Workspace> => {
+  const response = await axios.post<TypesGen.Workspace>(`/api/v2/organizations/${organizationId}/workspaces`, workspace)
+  return response.data
+}
+
 export const getBuildInfo = async (): Promise<TypesGen.BuildInfoResponse> => {
   const response = await axios.get("/api/v2/buildinfo")
   return response.data

diff --git a/site/src/components/ParameterInput/ParameterInput.stories.tsx b/site/src/components/ParameterInput/ParameterInput.stories.tsx
@@ -0,0 +1,52 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { ParameterSchema } from "../../api/typesGenerated"
+import { ParameterInput, ParameterInputProps } from "./ParameterInput"
+
+export default {
+  title: "components/ParameterInput",
+  component: ParameterInput,
+}
+
+const Template: Story<ParameterInputProps> = (args: ParameterInputProps) => <ParameterInput {...args} />
+
+const createParameterSchema = (partial: Partial<ParameterSchema>): ParameterSchema => {
+  return {
+    id: "000000",
+    job_id: "000000",
+    allow_override_destination: false,
+    allow_override_source: true,
+    created_at: "",
+    default_destination_scheme: "none",
+    default_refresh: "",
+    default_source_scheme: "data",
+    default_source_value: "default-value",
+    name: "parameter name",
+    description: "Some description!",
+    redisplay_value: false,
+    validation_condition: "",
+    validation_contains: [],
+    validation_error: "",
+    validation_type_system: "",
+    validation_value_type: "",
+    ...partial,
+  }
+}
+
+export const Basic = Template.bind({})
+Basic.args = {
+  schema: createParameterSchema({
+    name: "project_name",
+    description: "Customize the name of a Google Cloud project that will be created!",
+  }),
+}
+
+export const Contains = Template.bind({})
+Contains.args = {
+  schema: createParameterSchema({
+    name: "region",
+    default_source_value: "🏈 US Central",
+    description: "Where would you like your workspace to live?",
+    validation_contains: ["🏈 US Central", "⚽ Brazil East", "💶 EU West", "🦘 Australia South"],
+  }),
+}
diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx
@@ -0,0 +1,94 @@
+import FormControlLabel from "@material-ui/core/FormControlLabel"
+import Paper from "@material-ui/core/Paper"
+import Radio from "@material-ui/core/Radio"
+import RadioGroup from "@material-ui/core/RadioGroup"
+import { lighten, makeStyles } from "@material-ui/core/styles"
+import TextField from "@material-ui/core/TextField"
+import React from "react"
+import { ParameterSchema } from "../../api/typesGenerated"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+
+export interface ParameterInputProps {
+  disabled?: boolean
+  schema: ParameterSchema
+  onChange: (value: string) => void
+}
+
+export const ParameterInput: React.FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
+  const styles = useStyles()
+  return (
+    <Paper className={styles.paper}>
+      <div className={styles.title}>
+        <h2>var.{schema.name}</h2>
+        {schema.description && <span>{schema.description}</span>}
+      </div>
+      <div className={styles.input}>
+        <ParameterField disabled={disabled} onChange={onChange} schema={schema} />
+      </div>
+    </Paper>
+  )
+}
+
+const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
+  if (schema.validation_contains.length > 0) {
+    return (
+      <RadioGroup
+        defaultValue={schema.default_source_value}
+        onChange={(event) => {
+          onChange(event.target.value)
+        }}
+      >
+        {schema.validation_contains.map((item) => (
+          <FormControlLabel
+            disabled={disabled}
+            key={item}
+            value={item}
+            control={<Radio color="primary" size="small" disableRipple />}
+            label={item}
+          />
+        ))}
+      </RadioGroup>
+    )
+  }
+
+  // A text field can technically handle all cases!
+  // As other cases become more prominent (like filtering for numbers),
+  // we should break this out into more finely scoped input fields.
+  return (
+    <TextField
+      size="small"
+      disabled={disabled}
+      placeholder={schema.default_source_value}
+      onChange={(event) => {
+        onChange(event.target.value)
+      }}
+    />
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: MONOSPACE_FONT_FAMILY,
+  },
+  title: {
+    background: lighten(theme.palette.background.default, 0.1),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(3),
+    display: "flex",
+    flexDirection: "column",
+    "& h2": {
+      margin: 0,
+    },
+    "& span": {
+      paddingTop: theme.spacing(2),
+    },
+  },
+  input: {
+    padding: theme.spacing(3),
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: 480,
+  },
+}))
diff --git a/site/src/forms/CreateWorkspaceForm.test.tsx b/site/src/forms/CreateWorkspaceForm.test.tsx