Skip to content

Commit 266a3b2

Browse files
kylecarbskylecarbs
authored
fix: Replace getFormHelpers (coder#4181)
Fixes coder#3209.
1 parent f9075ca commit 266a3b2

File tree

8 files changed

+23
-36
lines changed

8 files changed

+23
-36
lines changed

‎site/src/components/SettingsAccountForm/SettingsAccountForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
33
import { FormikContextType, FormikTouched, useFormik } from "formik"
44
import { FC } from "react"
55
import * as Yup from "yup"
6-
import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
6+
import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
77
import { LoadingButton } from "../LoadingButton/LoadingButton"
88
import { Stack } from "../Stack/Stack"
99

@@ -47,7 +47,7 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
4747
onSubmit,
4848
initialTouched,
4949
})
50-
const getFieldHelpers = getFormHelpersWithError<AccountFormValues>(form, updateProfileError)
50+
const getFieldHelpers = getFormHelpers<AccountFormValues>(form, updateProfileError)
5151

5252
return (
5353
<>

‎site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
33
import { FormikContextType, FormikTouched, useFormik } from "formik"
44
import React from "react"
55
import * as Yup from "yup"
6-
import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
6+
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
77
import { LoadingButton } from "../LoadingButton/LoadingButton"
88
import { Stack } from "../Stack/Stack"
99

@@ -62,7 +62,7 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
6262
onSubmit,
6363
initialTouched,
6464
})
65-
const getFieldHelpers = getFormHelpersWithError<SecurityFormValues>(form, updateSecurityError)
65+
const getFieldHelpers = getFormHelpers<SecurityFormValues>(form, updateSecurityError)
6666

6767
return (
6868
<>

‎site/src/components/SignInForm/SignInForm.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { FormikContextType, FormikTouched, useFormik } from "formik"
1111
import { FC } from "react"
1212
import * as Yup from "yup"
1313
import { AuthMethods } from "../../api/typesGenerated"
14-
import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
14+
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
1515
import { Welcome } from "../Welcome/Welcome"
1616
import { LoadingButton } from "./../LoadingButton/LoadingButton"
1717

@@ -113,10 +113,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
113113
onSubmit,
114114
initialTouched,
115115
})
116-
const getFieldHelpers = getFormHelpersWithError<BuiltInAuthFormValues>(
117-
form,
118-
loginErrors.authError,
119-
)
116+
const getFieldHelpers = getFormHelpers<BuiltInAuthFormValues>(form, loginErrors.authError)
120117

121118
return (
122119
<>

‎site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { defaultSchedule, emptySchedule } from "pages/WorkspaceSchedulePage/sche
2121
import { defaultTTL } from "pages/WorkspaceSchedulePage/ttl"
2222
import { ChangeEvent, FC } from "react"
2323
import * as Yup from "yup"
24-
import { getFormHelpersWithError } from "../../util/formUtils"
24+
import { getFormHelpers } from "../../util/formUtils"
2525
import { FormFooter } from "../FormFooter/FormFooter"
2626
import { FullPageForm } from "../FullPageForm/FullPageForm"
2727
import { Stack } from "../Stack/Stack"
@@ -189,10 +189,7 @@ export const WorkspaceScheduleForm: FC<React.PropsWithChildren<WorkspaceSchedule
189189
validationSchema,
190190
initialTouched,
191191
})
192-
const formHelpers = getFormHelpersWithError<WorkspaceScheduleFormValues>(
193-
form,
194-
submitScheduleError,
195-
)
192+
const formHelpers = getFormHelpers<WorkspaceScheduleFormValues>(form, submitScheduleError)
196193

197194
const checkboxes: Array<{ value: boolean; name: string; label: string }> = [
198195
{ value: form.values.sunday, name: "sunday", label: Language.daySundayLabel },

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
1010
import { Loader } from "../../components/Loader/Loader"
1111
import { ParameterInput } from "../../components/ParameterInput/ParameterInput"
1212
import { Stack } from "../../components/Stack/Stack"
13-
import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
13+
import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
1414

1515
export const Language = {
1616
templateLabel: "Template",
@@ -84,7 +84,7 @@ export const CreateWorkspacePageView: FC<React.PropsWithChildren<CreateWorkspace
8484
},
8585
})
8686

87-
const getFieldHelpers = getFormHelpersWithError<TypesGen.CreateWorkspaceRequest>(
87+
const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(
8888
form,
8989
props.createWorkspaceErrors[CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR],
9090
)

‎site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Stack } from "components/Stack/Stack"
1313
import { FormikContextType, FormikTouched, useFormik } from "formik"
1414
import { FC, useRef, useState } from "react"
1515
import { colors } from "theme/colors"
16-
import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "util/formUtils"
16+
import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
1717
import * as Yup from "yup"
1818

1919
export const Language = {
@@ -79,7 +79,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
7979
},
8080
initialTouched,
8181
})
82-
const getFieldHelpers = getFormHelpersWithError<UpdateTemplateMeta>(form, error)
82+
const getFieldHelpers = getFormHelpers<UpdateTemplateMeta>(form, error)
8383
const styles = useStyles()
8484
const hasIcon = form.values.icon && form.values.icon !== ""
8585
const emojiButtonRef = useRef<HTMLButtonElement>(null)

‎site/src/util/formUtils.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,19 @@ describe("form util functions", () => {
7171
it("shows an error if there is only an API error", () => {
7272
const getFieldHelpers = getFormHelpers<TestType>(form, { touchedGoodField: "API error!" })
7373
const result = getFieldHelpers("touchedGoodField")
74-
expect(result.error).toBeTruthy
74+
expect(result.error).toBeTruthy()
7575
expect(result.helperText).toEqual("API error!")
7676
})
7777
it("shows an error if there is only a validation error", () => {
7878
const getFieldHelpers = getFormHelpers<TestType>(form, {})
7979
const result = getFieldHelpers("touchedBadField")
80-
expect(result.error).toBeTruthy
80+
expect(result.error).toBeTruthy()
8181
expect(result.helperText).toEqual("oops!")
8282
})
8383
it("shows the API error if both are present", () => {
8484
const getFieldHelpers = getFormHelpers<TestType>(form, { touchedBadField: "API error!" })
8585
const result = getFieldHelpers("touchedBadField")
86-
expect(result.error).toBeTruthy
86+
expect(result.error).toBeTruthy()
8787
expect(result.helperText).toEqual("API error!")
8888
})
8989
})

‎site/src/util/formUtils.ts

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@ interface FormHelpers {
2727

2828
// backendErrorName can be used if the backend names a field differently than the frontend does
2929
export const getFormHelpers =
30-
<T>(form: FormikContextType<T>, apiValidationErrors?: FormikErrors<T>) =>
30+
<T>(form: FormikContextType<T>, error?: Error | unknown) =>
3131
(name: keyof T, HelperText: ReactNode = "", backendErrorName?: string): FormHelpers => {
32+
const apiValidationErrors =
33+
isApiError(error) && hasApiFieldErrors(error)
34+
? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
35+
: error
3236
if (typeof name !== "string") {
3337
throw new Error(`name must be type of string, instead received '${typeof name}'`)
3438
}
@@ -39,26 +43,15 @@ export const getFormHelpers =
3943
const touched = getIn(form.touched, name)
4044
const apiError = getIn(apiValidationErrors, apiErrorName)
4145
const frontendError = getIn(form.errors, name)
42-
const error = apiError ?? frontendError
46+
const returnError = apiError ?? frontendError
4347
return {
4448
...form.getFieldProps(name),
4549
id: name,
46-
error: touched && Boolean(error),
47-
helperText: touched ? error || HelperText : HelperText,
50+
error: touched && Boolean(returnError),
51+
helperText: touched ? returnError || HelperText : HelperText,
4852
}
4953
}
5054

51-
export const getFormHelpersWithError = <T>(
52-
form: FormikContextType<T>,
53-
error?: Error | unknown,
54-
): ((name: keyof T, HelperText?: ReactNode, errorName?: string) => FormHelpers) => {
55-
const apiValidationErrors =
56-
isApiError(error) && hasApiFieldErrors(error)
57-
? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
58-
: undefined
59-
return getFormHelpers(form, apiValidationErrors)
60-
}
61-
6255
export const onChangeTrimmed =
6356
<T>(form: FormikContextType<T>) =>
6457
(event: ChangeEvent<HTMLInputElement>): void => {

0 commit comments

Comments
 (0)