Extend getFormHelpers to remap field name

presleyp · presleyp · commit 77df9ca36e90 · 2022-07-27T22:42:03.000Z
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -266,7 +266,7 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
           </FormControl>
 
           <TextField
-            {...formHelpers("ttl", ttlShutdownAt(form.values.ttl))}
+            {...formHelpers("ttl", ttlShutdownAt(form.values.ttl), "ttl_ms")}
             disabled={isLoading}
             inputProps={{ min: 0, step: 1 }}
             label={Language.ttlLabel}
diff --git a/site/src/util/formUtils.ts b/site/src/util/formUtils.ts
@@ -25,19 +25,21 @@ interface FormHelpers {
   helperText?: ReactNode
 }
 
+// backendErrorName can be used if the backend names a field differently than the frontend does
 export const getFormHelpers =
-  <T>(form: FormikContextType<T>, formErrors?: FormikErrors<T>) =>
-  (name: keyof T, HelperText: ReactNode = ""): FormHelpers => {
+  <T>(form: FormikContextType<T>, apiValidationErrors?: FormikErrors<T>) =>
+  (name: keyof T, HelperText: ReactNode = "", backendErrorName?: string): FormHelpers => {
     if (typeof name !== "string") {
       throw new Error(`name must be type of string, instead received '${typeof name}'`)
     }
+    const apiErrorName = backendErrorName ?? name
 
     // getIn is a util function from Formik that gets at any depth of nesting
     // and is necessary for the types to work
     const touched = getIn(form.touched, name)
-    const apiError = getIn(formErrors, name)
-    const validationError = getIn(form.errors, name)
-    const error = apiError ?? validationError
+    const apiError = getIn(apiValidationErrors, apiErrorName)
+    const frontendError = getIn(form.errors, name)
+    const error = apiError ?? frontendError
     return {
       ...form.getFieldProps(name),
       id: name,
@@ -49,7 +51,7 @@ export const getFormHelpers =
 export const getFormHelpersWithError = <T>(
   form: FormikContextType<T>,
   error?: Error | unknown,
-): ((name: keyof T, HelperText?: ReactNode) => FormHelpers) => {
+): ((name: keyof T, HelperText?: ReactNode, errorName?: string) => FormHelpers) => {
   const apiValidationErrors =
     isApiError(error) && hasApiFieldErrors(error)
       ? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
