remove template selector

coder · f0ssel · Jun 9, 2022 · Jun 7, 2022 · Jun 7, 2022 · Jun 7, 2022
commit b774c50e790b7e4ae14c10a30c0c5bf2fb28af79
@@ -2,7 +2,6 @@ import { useMachine } from "@xstate/react"
 import { FC } from "react"
 import { Helmet } from "react-helmet"
 import { useNavigate, useSearchParams } from "react-router-dom"
-import { Template } from "../../api/typesGenerated"
 import { useOrganizationId } from "../../hooks/useOrganizationId"
 import { pageTitle } from "../../util/page"
 import { createWorkspaceMachine } from "../../xServices/createWorkspace/createWorkspaceXService"
@@ -11,10 +10,11 @@ import { CreateWorkspacePageView } from "./CreateWorkspacePageView"
 const CreateWorkspacePage: FC = () => {
   const organizationId = useOrganizationId()
   const [searchParams] = useSearchParams()
-  const preSelectedTemplateName = searchParams.get("template")
+  const templateParam = searchParams.get("template")
+  const templateName = templateParam ? templateParam : ""
   const navigate = useNavigate()
   const [createWorkspaceState, send] = useMachine(createWorkspaceMachine, {
-    context: { organizationId, preSelectedTemplateName },
+    context: { organizationId, templateName },
     actions: {
       onCreateWorkspace: (_, event) => {
         navigate(`/@${event.data.owner_name}/${event.data.name}`)
@@ -31,6 +31,7 @@ const CreateWorkspacePage: FC = () => {
         loadingTemplates={createWorkspaceState.matches("gettingTemplates")}
         loadingTemplateSchema={createWorkspaceState.matches("gettingTemplateSchema")}
         creatingWorkspace={createWorkspaceState.matches("creatingWorkspace")}
+        templateName={createWorkspaceState.context.templateName}
         templates={createWorkspaceState.context.templates}
         selectedTemplate={createWorkspaceState.context.selectedTemplate}
         templateSchema={createWorkspaceState.context.templateSchema}
@@ -43,12 +44,6 @@ const CreateWorkspacePage: FC = () => {
             request,
           })
         }}
-        onSelectTemplate={(template: Template) => {
-          send({
-            type: "SELECT_TEMPLATE",
-            template,
-          })
-        }}
       />
     </>
   )

@@ -1,15 +1,10 @@
 import Link from "@material-ui/core/Link"
-import MenuItem from "@material-ui/core/MenuItem"
 import { makeStyles } from "@material-ui/core/styles"
-import TextField, { TextFieldProps } from "@material-ui/core/TextField"
-import OpenInNewIcon from "@material-ui/icons/OpenInNew"
+import TextField from "@material-ui/core/TextField"
 import { FormikContextType, useFormik } from "formik"
 import { FC, useState } from "react"
-import { Link as RouterLink } from "react-router-dom"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
-import { CodeExample } from "../../components/CodeExample/CodeExample"
-import { EmptyState } from "../../components/EmptyState/EmptyState"
 import { FormFooter } from "../../components/FormFooter/FormFooter"
 import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
 import { Loader } from "../../components/Loader/Loader"
@@ -20,29 +15,18 @@ import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formU
 export const Language = {
   templateLabel: "Template",
   nameLabel: "Name",
-  emptyMessage: "Let's create your first template",
-  emptyDescription: (
-    <>
-      To create a workspace you need to have a template. You can{" "}
-      <Link target="_blank" href="https://github.com/coder/coder/blob/main/docs/templates.md">
-        create one from scratch
-      </Link>{" "}
-      or use a built-in template by typing the following Coder CLI command:
-    </>
-  ),
-  templateLink: "Read more about this template",
 }
 
 export interface CreateWorkspacePageViewProps {
   loadingTemplates: boolean
   loadingTemplateSchema: boolean
   creatingWorkspace: boolean
+  templateName: string
   templates?: TypesGen.Template[]
   selectedTemplate?: TypesGen.Template
   templateSchema?: TypesGen.ParameterSchema[]
   onCancel: () => void
   onSubmit: (req: TypesGen.CreateWorkspaceRequest) => void
-  onSelectTemplate: (template: TypesGen.Template) => void
 }
 
 export const validationSchema = Yup.object({
@@ -51,7 +35,8 @@ export const validationSchema = Yup.object({
 
 export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props) => {
   const [parameterValues, setParameterValues] = useState<Record<string, string>>({})
-  const styles = useStyles()
+  useStyles()
+
   const form: FormikContextType<TypesGen.CreateWorkspaceRequest> = useFormik<TypesGen.CreateWorkspaceRequest>({
     initialValues: {
       name: "",
@@ -84,74 +69,20 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
     },
   })
   const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(form)
-  const selectedTemplate =
-    props.templates &&
-    form.values.template_id &&
-    props.templates.find((template) => template.id === form.values.template_id)
-
-  const handleTemplateChange: TextFieldProps["onChange"] = (event) => {
-    if (!props.templates) {
-      throw new Error("Templates are not loaded")
-    }
-
-    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)
-  }
 
   return (
     <FullPageForm title="Create workspace" onCancel={props.onCancel}>
       <form onSubmit={form.handleSubmit}>
         {props.loadingTemplates && <Loader />}
 
         <Stack>
-          {props.templates && props.templates.length === 0 && (
-            <EmptyState
-              className={styles.emptyState}
-              message={Language.emptyMessage}
-              description={Language.emptyDescription}
-              descriptionClassName={styles.emptyStateDescription}
-              cta={
-                <CodeExample className={styles.code} buttonClassName={styles.codeButton} code="coder template init" />
-              }
-            />
-          )}
-          {props.templates && props.templates.length > 0 && (
-            <TextField
-              {...getFieldHelpers("template_id")}
-              disabled={form.isSubmitting}
-              onChange={handleTemplateChange}
-              autoFocus
-              fullWidth
-              label={Language.templateLabel}
-              variant="outlined"
-              select
-              helperText={
-                selectedTemplate && (
-                  <Link
-                    className={styles.readMoreLink}
-                    component={RouterLink}
-                    to={`/templates/${selectedTemplate.name}`}
-                    target="_blank"
-                  >
-                    {Language.templateLink} <OpenInNewIcon />
-                  </Link>
-                )
-              }
-            >
-              {props.templates.map((template) => (
-                <MenuItem key={template.id} value={template.id}>
-                  {template.name}
-                </MenuItem>
-              ))}
-            </TextField>
-          )}
+          <TextField
+            disabled
+            fullWidth
+            label={Language.templateLabel}
+            value={props.templateName}
+            variant="outlined"
+          />
 
           {props.selectedTemplate && props.templateSchema && (
             <>

@@ -4,22 +4,15 @@ import { CreateWorkspaceRequest, ParameterSchema, Template, Workspace } from "..
 
 type CreateWorkspaceContext = {
   organizationId: string
+  templateName: string
   templates?: Template[]
   selectedTemplate?: Template
   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 =
-  | {
-      type: "SELECT_TEMPLATE"
-      template: Template
-    }
   | {
       type: "CREATE_WORKSPACE"
       request: CreateWorkspaceRequest
@@ -45,64 +38,25 @@ export const createWorkspaceMachine = createMachine(
       },
     },
     tsTypes: {} as import("./createWorkspaceXService.typegen").Typegen0,
-    on: {
-      SELECT_TEMPLATE: {
-        actions: ["assignSelectedTemplate"],
-        target: "gettingTemplateSchema",
-      },
-    },
     states: {
       gettingTemplates: {
         invoke: {
           src: "getTemplates",
           onDone: [
             {
               actions: ["assignTemplates"],
-              target: "waitingForTemplateGetCreated",
               cond: "areTemplatesEmpty",
             },
             {
-              actions: ["assignTemplates", "assignPreSelectedTemplate"],
+              actions: ["assignTemplates", "assignSelectedTemplate"],
               target: "gettingTemplateSchema",
-              cond: "hasValidPreSelectedTemplate",
-            },
-            {
-              actions: ["assignTemplates"],
-              target: "selectingTemplate",
             },
           ],
           onError: {
             target: "error",
           },
         },
       },
-      waitingForTemplateGetCreated: {
-        initial: "refreshingTemplates",
-        states: {
-          refreshingTemplates: {
-            invoke: {
-              src: "getTemplates",
-              onDone: [
-                { target: "waiting", cond: "areTemplatesEmpty" },
-                { target: "#createWorkspaceState.selectingTemplate", actions: ["assignTemplates"] },
-              ],
-            },
-          },
-          waiting: {
-            after: {
-              2_000: "refreshingTemplates",
-            },
-          },
-        },
-      },
-      selectingTemplate: {
-        on: {
-          SELECT_TEMPLATE: {
-            actions: ["assignSelectedTemplate"],
-            target: "gettingTemplateSchema",
-          },
-        },
-      },
       gettingTemplateSchema: {
         invoke: {
           src: "getTemplateSchema",
@@ -164,21 +118,20 @@ export const createWorkspaceMachine = createMachine(
       },
     },
     guards: {
-      hasValidPreSelectedTemplate: (ctx, event) => {
-        if (!ctx.preSelectedTemplateName) {
-          return false
-        }
-        const template = event.data.find((template) => template.name === ctx.preSelectedTemplateName)
-        return !!template
-      },
       areTemplatesEmpty: (_, event) => event.data.length === 0,
     },
     actions: {
       assignTemplates: assign({
         templates: (_, event) => event.data,
       }),
       assignSelectedTemplate: assign({
-        selectedTemplate: (_, event) => event.template,
+        selectedTemplate: (ctx, event) => {
+          for (const template of event.data) {
+            if (template.name === ctx.templateName) {
+              return template
+            }
+          }
+        },
       }),
       assignTemplateSchema: assign({
         // Only show parameters that are allowed to be overridden.
@@ -188,17 +141,6 @@ 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
-        },
-      }),
     },
   },
 )