Add error validation for submitting the create workspace form

coder · kylecarbs · Feb 27, 2023 · Feb 22, 2023 · Feb 22, 2023 · Feb 22, 2023
commit 6b75f3e9caa65369bd2d247f74b4aa29a7dadfe6
@@ -1,5 +1,6 @@
 import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import FormHelperText from "@material-ui/core/FormHelperText"
+import { makeStyles, Theme } from "@material-ui/core/styles"
 import { SvgIconProps } from "@material-ui/core/SvgIcon"
 import Tooltip from "@material-ui/core/Tooltip"
 import GitHub from "@material-ui/icons/GitHub"
@@ -14,14 +15,18 @@ export interface GitAuthProps {
   type: TypesGen.GitProvider
   authenticated: boolean
   authenticateURL: string
+  error?: string
 }
 
 export const GitAuth: FC<GitAuthProps> = ({
   type,
   authenticated,
   authenticateURL,
+  error,
 }) => {
-  const styles = useStyles()
+  const styles = useStyles({
+    error: typeof error !== "undefined",
+  })
 
   let prettyName: string
   let Icon: (props: SvgIconProps) => JSX.Element
@@ -57,41 +62,42 @@ export const GitAuth: FC<GitAuthProps> = ({
         authenticated ? "You're already authenticated! No action needed." : ``
       }
     >
-      <a
-        href={redirectURL}
-        className={styles.link}
-        onClick={(event) => {
-          event.preventDefault()
-          // If the user is already authenticated, we don't want to redirect them
-          if (authenticated || authenticateURL === "") {
-            return
-          }
-          window.open(redirectURL, "_blank", "width=900,height=600")
-        }}
-      >
-        <Button className={styles.button} disabled={authenticated} fullWidth>
-          <div className={styles.root}>
-            <Icon className={styles.icon} />
-            <div className={styles.text}>
+      <div>
+        <a
+          href={redirectURL}
+          className={styles.link}
+          onClick={(event) => {
+            event.preventDefault()
+            // If the user is already authenticated, we don't want to redirect them
+            if (authenticated || authenticateURL === "") {
+              return
+            }
+            window.open(redirectURL, "_blank", "width=900,height=600")
+          }}
+        >
+          <Button className={styles.button} disabled={authenticated} fullWidth>
+            <div className={styles.root}>
+              <Icon className={styles.icon} />
               <Typography variant="body2">
                 {authenticated
                   ? `You're authenticated with ${prettyName}!`
                   : `Click to login with ${prettyName}!`}
               </Typography>
-              {!authenticated && (
-                <Typography variant="caption" color="textSecondary">
-                  {"You'll be redirected back here once authenticated."}
-                </Typography>
-              )}
             </div>
-          </div>
-        </Button>
-      </a>
+          </Button>
+        </a>
+        {error && <FormHelperText error>{error}</FormHelperText>}
+      </div>
     </Tooltip>
   )
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles<
+  Theme,
+  {
+    error: boolean
+  }
+>((theme) => ({
   link: {
     textDecoration: "none",
   },
@@ -104,11 +110,8 @@ const useStyles = makeStyles(() => ({
   },
   button: {
     height: "unset",
-  },
-  text: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4,
+    border: ({ error }) =>
+      error ? `1px solid ${theme.palette.error.main}` : "unset",
   },
   icon: {
     width: 32,

@@ -6,7 +6,7 @@ import { RichParameterInput } from "components/RichParameterInput/RichParameterI
 import { Stack } from "components/Stack/Stack"
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
-import { FC, useState } from "react"
+import { FC, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
 import * as Yup from "yup"
@@ -58,6 +58,10 @@ export const CreateWorkspacePageView: FC<
     props.templateParameters,
     props.defaultParameterValues,
   )
+  const [gitAuthErrors, setGitAuthErrors] = useState<Record<string, string>>({})
+  useEffect(() => {
+    setGitAuthErrors({})
+  }, [props.templateGitAuth])
 
   const { t } = useTranslation("createWorkspacePage")
 
@@ -78,6 +82,20 @@ export const CreateWorkspacePageView: FC<
       enableReinitialize: true,
       initialTouched: props.initialTouched,
       onSubmit: (request) => {
+        for (let i = 0; i < (props.templateGitAuth?.length || 0); i++) {
+          const auth = props.templateGitAuth?.[i]
+          if (!auth) {
+            continue
+          }
+          if (!auth.authenticated) {
+            setGitAuthErrors({
+              [auth.id]: "You must authenticate to create a workspace!",
+            })
+            form.setSubmitting(false)
+            return
+          }
+        }
+
         if (!props.templateSchema) {
           throw new Error("No template schema loaded")
         }
@@ -231,8 +249,8 @@ export const CreateWorkspacePageView: FC<
                   Git Authentication
                 </h2>
                 <p className={styles.formSectionInfoDescription}>
-                  This template requires authentication to automatically
-                  perform Git operations on create.
+                  This template requires authentication to automatically perform
+                  Git operations on create.
                 </p>
               </div>
 
@@ -247,6 +265,7 @@ export const CreateWorkspacePageView: FC<
                     authenticateURL={auth.authenticate_url}
                     authenticated={auth.authenticated}
                     type={auth.type}
+                    error={gitAuthErrors[auth.id]}
                   />
                 ))}
               </Stack>