From 8e9fe792756dbe0c60618d8f668bc7039cec0e36 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@carberry.com>
Date: Fri, 23 Sep 2022 20:09:50 +0000
Subject: [PATCH] fix: Replace getFormHelpers

Fixes #3209.
---
 .../SettingsAccountForm.tsx                   |  4 ++--
 .../SettingsSecurityForm.tsx                  |  4 ++--
 site/src/components/SignInForm/SignInForm.tsx |  7 ++----
 .../WorkspaceScheduleForm.tsx                 |  7 ++----
 .../CreateWorkspacePageView.tsx               |  4 ++--
 .../TemplateSettingsForm.tsx                  |  4 ++--
 site/src/util/formUtils.test.ts               |  6 ++---
 site/src/util/formUtils.ts                    | 23 +++++++------------
 8 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
index 9842fcc258fb1..2873c3e6bfe86 100644
--- a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
+++ b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -3,7 +3,7 @@ import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
-import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
@@ -47,7 +47,7 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
     onSubmit,
     initialTouched,
   })
-  const getFieldHelpers = getFormHelpersWithError<AccountFormValues>(form, updateProfileError)
+  const getFieldHelpers = getFormHelpers<AccountFormValues>(form, updateProfileError)
 
   return (
     <>
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
index 0d71cd01f4f7e..1409960854def 100644
--- a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
+++ b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -3,7 +3,7 @@ import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
@@ -62,7 +62,7 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
     onSubmit,
     initialTouched,
   })
-  const getFieldHelpers = getFormHelpersWithError<SecurityFormValues>(form, updateSecurityError)
+  const getFieldHelpers = getFormHelpers<SecurityFormValues>(form, updateSecurityError)
 
   return (
     <>
diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
index 10a94d0a23b0f..8ddacdd92fccc 100644
--- a/site/src/components/SignInForm/SignInForm.tsx
+++ b/site/src/components/SignInForm/SignInForm.tsx
@@ -11,7 +11,7 @@ import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import { AuthMethods } from "../../api/typesGenerated"
-import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { Welcome } from "../Welcome/Welcome"
 import { LoadingButton } from "./../LoadingButton/LoadingButton"
 
@@ -113,10 +113,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
     onSubmit,
     initialTouched,
   })
-  const getFieldHelpers = getFormHelpersWithError<BuiltInAuthFormValues>(
-    form,
-    loginErrors.authError,
-  )
+  const getFieldHelpers = getFormHelpers<BuiltInAuthFormValues>(form, loginErrors.authError)
 
   return (
     <>
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
index d94c06c3fbe8e..106a653ecb66e 100644
--- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
+++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -21,7 +21,7 @@ import { defaultSchedule, emptySchedule } from "pages/WorkspaceSchedulePage/sche
 import { defaultTTL } from "pages/WorkspaceSchedulePage/ttl"
 import { ChangeEvent, FC } from "react"
 import * as Yup from "yup"
-import { getFormHelpersWithError } from "../../util/formUtils"
+import { getFormHelpers } from "../../util/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
 import { Stack } from "../Stack/Stack"
@@ -189,10 +189,7 @@ export const WorkspaceScheduleForm: FC<React.PropsWithChildren<WorkspaceSchedule
     validationSchema,
     initialTouched,
   })
-  const formHelpers = getFormHelpersWithError<WorkspaceScheduleFormValues>(
-    form,
-    submitScheduleError,
-  )
+  const formHelpers = getFormHelpers<WorkspaceScheduleFormValues>(form, submitScheduleError)
 
   const checkboxes: Array<{ value: boolean; name: string; label: string }> = [
     { value: form.values.sunday, name: "sunday", label: Language.daySundayLabel },
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index d367d07c808ea..03ef6e9a38aba 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -10,7 +10,7 @@ import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
 import { Loader } from "../../components/Loader/Loader"
 import { ParameterInput } from "../../components/ParameterInput/ParameterInput"
 import { Stack } from "../../components/Stack/Stack"
-import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 
 export const Language = {
   templateLabel: "Template",
@@ -84,7 +84,7 @@ export const CreateWorkspacePageView: FC<React.PropsWithChildren<CreateWorkspace
       },
     })
 
-  const getFieldHelpers = getFormHelpersWithError<TypesGen.CreateWorkspaceRequest>(
+  const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(
     form,
     props.createWorkspaceErrors[CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR],
   )
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
index 11a0143d7892c..f8b7318c87d3a 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -13,7 +13,7 @@ import { Stack } from "components/Stack/Stack"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC, useRef, useState } from "react"
 import { colors } from "theme/colors"
-import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "util/formUtils"
+import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
 import * as Yup from "yup"
 
 export const Language = {
@@ -79,7 +79,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
     },
     initialTouched,
   })
-  const getFieldHelpers = getFormHelpersWithError<UpdateTemplateMeta>(form, error)
+  const getFieldHelpers = getFormHelpers<UpdateTemplateMeta>(form, error)
   const styles = useStyles()
   const hasIcon = form.values.icon && form.values.icon !== ""
   const emojiButtonRef = useRef<HTMLButtonElement>(null)
diff --git a/site/src/util/formUtils.test.ts b/site/src/util/formUtils.test.ts
index 41d4005e71a6e..65cba1ce74606 100644
--- a/site/src/util/formUtils.test.ts
+++ b/site/src/util/formUtils.test.ts
@@ -71,19 +71,19 @@ describe("form util functions", () => {
       it("shows an error if there is only an API error", () => {
         const getFieldHelpers = getFormHelpers<TestType>(form, { touchedGoodField: "API error!" })
         const result = getFieldHelpers("touchedGoodField")
-        expect(result.error).toBeTruthy
+        expect(result.error).toBeTruthy()
         expect(result.helperText).toEqual("API error!")
       })
       it("shows an error if there is only a validation error", () => {
         const getFieldHelpers = getFormHelpers<TestType>(form, {})
         const result = getFieldHelpers("touchedBadField")
-        expect(result.error).toBeTruthy
+        expect(result.error).toBeTruthy()
         expect(result.helperText).toEqual("oops!")
       })
       it("shows the API error if both are present", () => {
         const getFieldHelpers = getFormHelpers<TestType>(form, { touchedBadField: "API error!" })
         const result = getFieldHelpers("touchedBadField")
-        expect(result.error).toBeTruthy
+        expect(result.error).toBeTruthy()
         expect(result.helperText).toEqual("API error!")
       })
     })
diff --git a/site/src/util/formUtils.ts b/site/src/util/formUtils.ts
index af0f32723aa6e..d02c165d13355 100644
--- a/site/src/util/formUtils.ts
+++ b/site/src/util/formUtils.ts
@@ -27,8 +27,12 @@ interface FormHelpers {
 
 // backendErrorName can be used if the backend names a field differently than the frontend does
 export const getFormHelpers =
-  <T>(form: FormikContextType<T>, apiValidationErrors?: FormikErrors<T>) =>
+  <T>(form: FormikContextType<T>, error?: Error | unknown) =>
   (name: keyof T, HelperText: ReactNode = "", backendErrorName?: string): FormHelpers => {
+    const apiValidationErrors =
+      isApiError(error) && hasApiFieldErrors(error)
+        ? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
+        : error
     if (typeof name !== "string") {
       throw new Error(`name must be type of string, instead received '${typeof name}'`)
     }
@@ -39,26 +43,15 @@ export const getFormHelpers =
     const touched = getIn(form.touched, name)
     const apiError = getIn(apiValidationErrors, apiErrorName)
     const frontendError = getIn(form.errors, name)
-    const error = apiError ?? frontendError
+    const returnError = apiError ?? frontendError
     return {
       ...form.getFieldProps(name),
       id: name,
-      error: touched && Boolean(error),
-      helperText: touched ? error || HelperText : HelperText,
+      error: touched && Boolean(returnError),
+      helperText: touched ? returnError || HelperText : HelperText,
     }
   }
 
-export const getFormHelpersWithError = <T>(
-  form: FormikContextType<T>,
-  error?: Error | unknown,
-): ((name: keyof T, HelperText?: ReactNode, errorName?: string) => FormHelpers) => {
-  const apiValidationErrors =
-    isApiError(error) && hasApiFieldErrors(error)
-      ? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
-      : undefined
-  return getFormHelpers(form, apiValidationErrors)
-}
-
 export const onChangeTrimmed =
   <T>(form: FormikContextType<T>) =>
   (event: ChangeEvent<HTMLInputElement>): void => {

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4181.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4181.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4181.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/4181.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>