Add link to template field

coder · BrunoQuaresma · May 31, 2022 · May 27, 2022 · May 31, 2022 · May 31, 2022
commit 453db7dae4d92a9a25cbec06053e9fb0e9e4f513
diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx
@@ -1,8 +1,7 @@
 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 { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { FC } from "react"
 import { ParameterSchema } from "../../api/typesGenerated"
@@ -17,15 +16,15 @@ export interface ParameterInputProps {
 export const ParameterInput: FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
   const styles = useStyles()
   return (
-    <Paper className={styles.paper}>
+    <div className={styles.root}>
       <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>
+    </div>
   )
 }
 
@@ -67,28 +66,26 @@ const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, sch
 }
 
 const useStyles = makeStyles((theme) => ({
-  paper: {
+  root: {
     display: "flex",
     flexDirection: "column",
     fontFamily: MONOSPACE_FONT_FAMILY,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
   },
   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),
+      paddingTop: theme.spacing(1),
     },
   },
   input: {
-    padding: theme.spacing(3),
+    marginTop: theme.spacing(2),
     display: "flex",
     flexDirection: "column",
-    maxWidth: 480,
   },
 }))
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -167,8 +167,8 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
 
   return (
     <FullPageForm onCancel={onCancel} title="Workspace Schedule">
-      <form className={styles.form} onSubmit={form.handleSubmit}>
-        <Stack className={styles.stack}>
+      <form onSubmit={form.handleSubmit}>
+        <Stack>
           <TextField
             {...formHelpers("startTime", Language.startTimeHelperText)}
             disabled={form.isSubmitting || isLoading}
@@ -212,6 +212,9 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
                       disabled={!form.values.startTime || form.isSubmitting || isLoading}
                       onChange={form.handleChange}
                       name={checkbox.name}
+                      color="primary"
+                      size="small"
+                      disableRipple
                     />
                   }
                   key={checkbox.name}
@@ -240,18 +243,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
 }
 
 const useStyles = makeStyles({
-  form: {
-    display: "flex",
-    justifyContent: "center",
-  },
-  stack: {
-    // REMARK: 360 is 'arbitrary' in that it gives the helper text enough room
-    //         to render on one line. If we change the text, we might want to
-    //         adjust these. Without constraining the width, the date picker
-    //         and number inputs aren't visually appealing or maximally usable.
-    maxWidth: 360,
-    minWidth: 360,
-  },
   daysOfWeekLabel: {
     fontSize: 12,
   },

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -1,7 +1,11 @@
+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 { 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 { FormFooter } from "../../components/FormFooter/FormFooter"
@@ -34,6 +38,7 @@ export const validationSchema = Yup.object({
 
 export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props) => {
   const [parameterValues, setParameterValues] = useState<Record<string, string>>({})
+  const styles = useStyles()
   const form: FormikContextType<TypesGen.CreateWorkspaceRequest> = useFormik<TypesGen.CreateWorkspaceRequest>({
     initialValues: {
       name: "",
@@ -66,6 +71,10 @@ 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) {
@@ -99,6 +108,18 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
               label={Language.templateLabel}
               variant="outlined"
               select
+              helperText={
+                selectedTemplate && (
+                  <Link
+                    className={styles.readMoreLink}
+                    component={RouterLink}
+                    to={`/templates/${selectedTemplate.name}`}
+                    target="_blank"
+                  >
+                    Read more about this template <OpenInNewIcon />
+                  </Link>
+                )
+              }
             >
               {props.templates.map((template) => (
                 <MenuItem key={template.id} value={template.id}>
@@ -146,3 +167,16 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
     </FullPageForm>
   )
 }
+
+const useStyles = makeStyles((theme) => ({
+  readMoreLink: {
+    display: "flex",
+    alignItems: "center",
+
+    "& svg": {
+      width: 12,
+      height: 12,
+      marginLeft: theme.spacing(0.5),
+    },
+  },
+}))