Accept pre defined template

BrunoQuaresma · BrunoQuaresma · commit 20f8742108b6 · 2022-05-23T19:20:35.000Z
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -1,6 +1,6 @@
 import { useActor, useMachine } from "@xstate/react"
 import React, { useContext } from "react"
-import { useNavigate } from "react-router-dom"
+import { useNavigate, useSearchParams } from "react-router-dom"
 import { Template } from "../../api/typesGenerated"
 import { createWorkspaceMachine } from "../../xServices/createWorkspace/createWorkspaceXService"
 import { XServiceContext } from "../../xServices/StateContext"
@@ -20,9 +20,11 @@ const useOrganizationId = () => {
 
 const CreateWorkspacePage: React.FC = () => {
   const organizationId = useOrganizationId()
+  const [searchParams] = useSearchParams()
+  const preSelectedTemplateName = searchParams.get("template")
   const navigate = useNavigate()
   const [createWorkspaceState, send] = useMachine(createWorkspaceMachine, {
-    context: { organizationId },
+    context: { organizationId, preSelectedTemplateName },
     actions: {
       onCreateWorkspace: (_, event) => {
         navigate("/workspaces/" + event.data.id)
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -50,8 +50,9 @@ export const CreateWorkspacePageView: React.FC<CreateWorkspacePageViewProps> = (
   const form: FormikContextType<TypesGen.CreateWorkspaceRequest> = useFormik<TypesGen.CreateWorkspaceRequest>({
     initialValues: {
       name: "",
-      template_id: "",
+      template_id: props.selectedTemplate ? props.selectedTemplate.id : "",
     },
+    enableReinitialize: true,
     validationSchema,
     onSubmit: (request) => {
       if (!props.templateSchema) {
@@ -84,9 +85,13 @@ export const CreateWorkspacePageView: React.FC<CreateWorkspacePageViewProps> = (
       throw new Error("Templates are not loaded")
     }
 
-    // The TextField + MenuItem returns the index of the selected option
-    const templateIndex = Number(event.currentTarget.value)
-    const selectedTemplate = props.templates[templateIndex]
+    const templateId = event.target.value
+    const selectedTemplate = props.templates.find((template) => template.id === templateId)
+
+    if (!selectedTemplate) {
+      throw new Error(`Template ${templateId} not found`)
+    }
+
     form.setFieldValue("template_id", selectedTemplate.id)
     props.onSelectTemplate(selectedTemplate)
   }
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -83,7 +83,11 @@ export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
                     <Avatar variant="square" className={styles.templateAvatar}>
                       {firstLetter(template.name)}
                     </Avatar>
-                    <Link component={RouterLink} to={`/templates/${template.name}/new`} className={styles.templateLink}>
+                    <Link
+                      component={RouterLink}
+                      to={`/workspaces/new?template=${template.name}`}
+                      className={styles.templateLink}
+                    >
                       <b>{template.name}</b>
                       <span>{template.description}</span>
                     </Link>
diff --git a/site/src/xServices/createWorkspace/createWorkspaceXService.ts b/site/src/xServices/createWorkspace/createWorkspaceXService.ts
@@ -9,6 +9,10 @@ type CreateWorkspaceContext = {
   templateSchema?: ParameterSchema[]
   createWorkspaceRequest?: CreateWorkspaceRequest
   createdWorkspace?: Workspace
+  // This is useful when the user wants to create a workspace from the template
+  // page having it pre selected. It is string or null because of the
+  // useSearchQuery
+  preSelectedTemplateName: string | null
 }
 
 type CreateWorkspaceEvent =
@@ -45,10 +49,17 @@ export const createWorkspaceMachine = createMachine(
       gettingTemplates: {
         invoke: {
           src: "getTemplates",
-          onDone: {
-            actions: ["assignTemplates"],
-            target: "selectingTemplate",
-          },
+          onDone: [
+            {
+              actions: ["assignTemplates", "assignPreSelectedTemplate"],
+              target: "gettingTemplateSchema",
+              cond: "hasValidPreSelectedTemplate",
+            },
+            {
+              actions: ["assignTemplates"],
+              target: "selectingTemplate",
+            },
+          ],
           onError: {
             target: "error",
           },
@@ -67,14 +78,14 @@ export const createWorkspaceMachine = createMachine(
           src: "getTemplateSchema",
           onDone: {
             actions: ["assignTemplateSchema"],
-            target: "fillingForm",
+            target: "fillingParams",
           },
           onError: {
             target: "error",
           },
         },
       },
-      fillingForm: {
+      fillingParams: {
         on: {
           CREATE_WORKSPACE: {
             actions: ["assignCreateWorkspaceRequest"],
@@ -122,6 +133,15 @@ export const createWorkspaceMachine = createMachine(
         return createWorkspace(organizationId, createWorkspaceRequest)
       },
     },
+    guards: {
+      hasValidPreSelectedTemplate: (ctx, event) => {
+        if (!ctx.preSelectedTemplateName) {
+          return false
+        }
+        const template = event.data.find((template) => template.name === ctx.preSelectedTemplateName)
+        return !!template
+      },
+    },
     actions: {
       assignTemplates: assign({
         templates: (_, event) => event.data,
@@ -135,6 +155,17 @@ export const createWorkspaceMachine = createMachine(
       assignCreateWorkspaceRequest: assign({
         createWorkspaceRequest: (_, event) => event.request,
       }),
+      assignPreSelectedTemplate: assign({
+        selectedTemplate: (ctx, event) => {
+          const selectedTemplate = event.data.find((template) => template.name === ctx.preSelectedTemplateName)
+          // The proper validation happens on hasValidPreSelectedTemplate
+          if (!selectedTemplate) {
+            throw new Error("Invalid template selected")
+          }
+
+          return selectedTemplate
+        },
+      }),
     },
   },
 )
