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> = ({ onSubmit, initialTouched, }) - const getFieldHelpers = getFormHelpersWithError(form, updateProfileError) + const getFieldHelpers = getFormHelpers(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 = ({ onSubmit, initialTouched, }) - const getFieldHelpers = getFormHelpersWithError(form, updateSecurityError) + const getFieldHelpers = getFormHelpers(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> = ({ onSubmit, initialTouched, }) - const getFieldHelpers = getFormHelpersWithError( - form, - loginErrors.authError, - ) + const getFieldHelpers = getFormHelpers(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( - form, - submitScheduleError, - ) + const formHelpers = getFormHelpers(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( + const getFieldHelpers = getFormHelpers( 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 = ({ }, initialTouched, }) - const getFieldHelpers = getFormHelpersWithError(form, error) + const getFieldHelpers = getFormHelpers(form, error) const styles = useStyles() const hasIcon = form.values.icon && form.values.icon !== "" const emojiButtonRef = useRef(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(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(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(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 = - (form: FormikContextType, apiValidationErrors?: FormikErrors) => + (form: FormikContextType, error?: Error | unknown) => (name: keyof T, HelperText: ReactNode = "", backendErrorName?: string): FormHelpers => { + const apiValidationErrors = + isApiError(error) && hasApiFieldErrors(error) + ? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors) + : 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 = ( - form: FormikContextType, - error?: Error | unknown, -): ((name: keyof T, HelperText?: ReactNode, errorName?: string) => FormHelpers) => { - const apiValidationErrors = - isApiError(error) && hasApiFieldErrors(error) - ? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors) - : undefined - return getFormHelpers(form, apiValidationErrors) -} - export const onChangeTrimmed = (form: FormikContextType) => (event: ChangeEvent): void => {