coder · BrunoQuaresma · May 24, 2022 · May 23, 2022 · May 23, 2022 · May 23, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,13 +15,15 @@
     "drpcserver",
     "Dsts",
     "fatih",
+    "Formik",
     "goarch",
     "gographviz",
     "goleak",
     "gossh",
     "gsyslog",
     "hashicorp",
     "hclsyntax",
+    "httpapi",
     "httpmw",
     "idtoken",
     "Iflag",
@@ -63,6 +65,7 @@
     "tfjson",
     "tfstate",
     "trimprefix",
+    "typegen",
     "unconvert",
     "Untar",
     "VMID",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -56,6 +56,16 @@ export const AppRouter: React.FC = () => (
               </AuthAndFrame>
             }
           />
+
+          <Route
+            path="new"
+            element={
+              <RequireAuth>
+                <CreateWorkspacePage />
+              </RequireAuth>
+            }
+          />
+
           <Route path=":workspace">
             <Route
               index
@@ -85,17 +95,6 @@ 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/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -35,7 +35,7 @@ export const FormFooter: React.FC<FormFooterProps> = ({
   const styles = useStyles()
   return (
     <div className={styles.footer}>
-      <Button className={styles.button} onClick={onCancel} variant="outlined">
+      <Button type="button" className={styles.button} onClick={onCancel} variant="outlined">
         {Language.cancelLabel}
       </Button>
       <LoadingButton loading={isLoading} className={styles.button} variant="contained" color="primary" type="submit">

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
@@ -5,10 +5,17 @@ import { reach, StringSchema } from "yup"
 import * as API from "../../api/api"
 import { Language as FooterLanguage } from "../../components/FormFooter/FormFooter"
 import { MockTemplate, MockWorkspace } from "../../testHelpers/entities"
-import { history, render } from "../../testHelpers/renderHelpers"
+import { renderWithAuth } from "../../testHelpers/renderHelpers"
 import CreateWorkspacePage from "./CreateWorkspacePage"
 import { Language, validationSchema } from "./CreateWorkspacePageView"
 
+const renderCreateWorkspacePage = () => {
+  return renderWithAuth(<CreateWorkspacePage />, {
+    route: "/workspaces/new?template=" + MockTemplate.name,
+    path: "/workspaces/new",
+  })
+}
+
 const fillForm = async ({ name = "example" }: { name?: string }) => {
   const nameField = await screen.findByLabelText(Language.nameLabel)
   await userEvent.type(nameField, name)
@@ -19,25 +26,21 @@ const fillForm = async ({ name = "example" }: { name?: string }) => {
 const nameSchema = reach(validationSchema, "name") as StringSchema
 
 describe("CreateWorkspacePage", () => {
-  beforeEach(() => {
-    history.replace("/templates/" + MockTemplate.name + "/new")
-  })
-
   it("renders", async () => {
-    render(<CreateWorkspacePage />)
+    renderCreateWorkspacePage()
     const element = await screen.findByText("Create workspace")
     expect(element).toBeDefined()
   })
 
   it("shows validation error message", async () => {
-    render(<CreateWorkspacePage />)
+    renderCreateWorkspacePage()
     await fillForm({ name: "$$$" })
     const errorMessage = await screen.findByText(Language.nameMatches)
     expect(errorMessage).toBeDefined()
   })
 
   it("succeeds", async () => {
-    render(<CreateWorkspacePage />)
+    renderCreateWorkspacePage()
     // You have to spy the method before it is used.
     jest.spyOn(API, "createWorkspace").mockResolvedValueOnce(MockWorkspace)
     await fillForm({ name: "test" })

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -1,36 +1,59 @@
-import { useMachine } from "@xstate/react"
-import React from "react"
-import { useNavigate } from "react-router"
-import { useParams } from "react-router-dom"
-import { createWorkspace } from "../../api/api"
-import { templateMachine } from "../../xServices/template/templateXService"
+import { useActor, useMachine } from "@xstate/react"
+import React, { useContext } from "react"
+import { useNavigate, useSearchParams } from "react-router-dom"
+import { Template } from "../../api/typesGenerated"
+import { createWorkspaceMachine } from "../../xServices/createWorkspace/createWorkspaceXService"
+import { XServiceContext } from "../../xServices/StateContext"
 import { CreateWorkspacePageView } from "./CreateWorkspacePageView"
 
+const useOrganizationId = () => {
+  const xServices = useContext(XServiceContext)
+  const [authState] = useActor(xServices.authXService)
+  const organizationId = authState.context.me?.organization_ids[0]
+
+  if (!organizationId) {
+    throw new Error("No organization ID found")
+  }
+
+  return organizationId
+}
+
 const CreateWorkspacePage: React.FC = () => {
-  const { template } = useParams()
-  const [templateState] = useMachine(templateMachine, {
-    context: {
-      name: template,
+  const organizationId = useOrganizationId()
+  const [searchParams] = useSearchParams()
+  const preSelectedTemplateName = searchParams.get("template")
+  const navigate = useNavigate()
+  const [createWorkspaceState, send] = useMachine(createWorkspaceMachine, {
+    context: { organizationId, preSelectedTemplateName },
+    actions: {
+      onCreateWorkspace: (_, event) => {
+        navigate("/workspaces/" + event.data.id)
+      },
     },
   })
-  const navigate = useNavigate()
-  const loading = templateState.hasTag("loading")
-  if (!templateState.context.template || !templateState.context.templateSchema) {
-    return null
-  }
 
   return (
     <CreateWorkspacePageView
-      template={templateState.context.template}
-      templateSchema={templateState.context.templateSchema}
-      loading={loading}
-      onCancel={() => navigate("/templates")}
-      onSubmit={async (req) => {
-        if (!templateState.context.template) {
-          throw new Error("template isn't valid")
-        }
-        const workspace = await createWorkspace(templateState.context.template.organization_id, req)
-        navigate("/workspaces/" + workspace.id)
+      loadingTemplates={createWorkspaceState.matches("gettingTemplates")}
+      loadingTemplateSchema={createWorkspaceState.matches("gettingTemplateSchema")}
+      creatingWorkspace={createWorkspaceState.matches("creatingWorkspace")}
+      templates={createWorkspaceState.context.templates}
+      selectedTemplate={createWorkspaceState.context.selectedTemplate}
+      templateSchema={createWorkspaceState.context.templateSchema}
+      onCancel={() => {
+        navigate(preSelectedTemplateName ? "/templates" : "/workspaces")
+      }}
+      onSubmit={(request) => {
+        send({
+          type: "CREATE_WORKSPACE",
+          request,
+        })
+      }}
+      onSelectTemplate={(template: Template) => {
+        send({
+          type: "SELECT_TEMPLATE",
+          template,
+        })
       }}
     />
   )

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -1,9 +1,32 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
-import { createParameterSchema } from "../../components/ParameterInput/ParameterInput.stories"
+import { ParameterSchema } from "../../api/typesGenerated"
 import { MockTemplate } from "../../testHelpers/entities"
 import { CreateWorkspacePageView, CreateWorkspacePageViewProps } from "./CreateWorkspacePageView"
 
+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 default {
   title: "pages/CreateWorkspacePageView",
   component: CreateWorkspacePageView,
@@ -13,13 +36,15 @@ const Template: Story<CreateWorkspacePageViewProps> = (args) => <CreateWorkspace
 
 export const NoParameters = Template.bind({})
 NoParameters.args = {
-  template: MockTemplate,
+  templates: [MockTemplate],
+  selectedTemplate: MockTemplate,
   templateSchema: [],
 }
 
 export const Parameters = Template.bind({})
 Parameters.args = {
-  template: MockTemplate,
+  templates: [MockTemplate],
+  selectedTemplate: MockTemplate,
   templateSchema: [
     createParameterSchema({
       name: "region",