Pre-fill info from example data

BrunoQuaresma · BrunoQuaresma · commit ce82a858319a · 2022-12-12T17:20:02.000Z
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -39,24 +39,36 @@ const defaultInitialValues: FormValues = {
 }
 
 interface CreateTemplateFormProps {
-  initialValues?: typeof defaultInitialValues
   starterTemplate?: TemplateExample
   errors?: unknown
   isSubmitting: boolean
   onCancel: () => void
 }
 
+const getInitialValues = (starterTemplate?: TemplateExample) => {
+  if (!starterTemplate) {
+    return defaultInitialValues
+  }
+
+  return {
+    ...defaultInitialValues,
+    name: starterTemplate.id,
+    display_name: starterTemplate.name,
+    icon: starterTemplate.icon,
+    description: starterTemplate.description,
+  }
+}
+
 export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
-  initialValues = defaultInitialValues,
   starterTemplate,
   errors,
   isSubmitting,
   onCancel,
 }) => {
   const styles = useStyles()
   const formFooterStyles = useFormFooterStyles()
-  const form = useFormik({
-    initialValues,
+  const form = useFormik<FormValues>({
+    initialValues: getInitialValues(starterTemplate),
     validationSchema,
     onSubmit: () => {
       console.log("Submit")
@@ -79,11 +91,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
             </p>
           </div>
 
-          <Stack
-            direction="column"
-            spacing={1}
-            className={styles.formSectionFields}
-          >
+          <Stack direction="column" className={styles.formSectionFields}>
             {starterTemplate && <SelectedTemplate template={starterTemplate} />}
 
             <TextField
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -26,6 +26,7 @@ const CreateTemplatePage: FC = () => {
       },
     },
   })
+  const { starterTemplate } = state.context
 
   const onCancel = () => {
     navigate(-1)
@@ -40,7 +41,11 @@ const CreateTemplatePage: FC = () => {
       <FullPageHorizontalForm title={t("title")} onCancel={onCancel}>
         {state.hasTag("loading") && <Loader />}
         {state.matches("idle") && (
-          <CreateTemplateForm isSubmitting={false} onCancel={onCancel} />
+          <CreateTemplateForm
+            starterTemplate={starterTemplate}
+            isSubmitting={false}
+            onCancel={onCancel}
+          />
         )}
       </FullPageHorizontalForm>
     </>
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -15,6 +15,7 @@ import PlusIcon from "@material-ui/icons/AddOutlined"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { useTranslation } from "react-i18next"
 import { Stack } from "components/Stack/Stack"
+import { Link } from "react-router-dom"
 
 export interface StarterTemplatePageViewProps {
   context: StarterTemplateContext
@@ -53,7 +54,13 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
             >
               {t("actions.viewSourceCode")}
             </Button>
-            <Button startIcon={<PlusIcon />}>{t("actions.useTemplate")}</Button>
+            <Button
+              component={Link}
+              to={`/templates/new?exampleId=${starterTemplate.id}`}
+              startIcon={<PlusIcon />}
+            >
+              {t("actions.useTemplate")}
+            </Button>
           </>
         }
       >
diff --git a/site/src/xServices/createTemplate/createTemplateXService.ts b/site/src/xServices/createTemplate/createTemplateXService.ts
@@ -19,7 +19,7 @@ export const createTemplateMachine = createMachine(
       context: {} as CreateTemplateContext,
       events: {} as { type: "CREATE"; data: any },
       services: {} as {
-        loadingStarterTemplate: {
+        loadStarterTemplate: {
           data: TemplateExample
         }
         createTemplate: {
@@ -95,8 +95,8 @@ export const createTemplateMachine = createMachine(
       },
     },
     actions: {
-      assignError: (_, { data }) => assign({ error: data }),
-      assignStarterTemplate: (_, { data }) => assign({ starterTemplate: data }),
+      assignError: assign({ error: (_, { data }) => data }),
+      assignStarterTemplate: assign({ starterTemplate: (_, { data }) => data }),
     },
     guards: {
       isExampleProvided: ({ exampleId }) => Boolean(exampleId),
