fix: use custom error message handler (#1685)

Author: dcshzj

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/BaseLinkControl.tsx

@@ -26,6 +26,7 @@ import { trpc } from "~/utils/trpc"
 import { LINK_TYPES } from "../../../LinkEditor/constants"
 import { getLinkHrefType } from "../../../LinkEditor/utils"
 import { LinkErrorBoundary } from "../../components/LinkErrorBoundary"
+import { getCustomErrorMessage } from "./utils"
 import { parseHref } from "./utils/parseHref"
 
 interface SuspendableLabelProps {
@@ -132,7 +133,7 @@ export function BaseLinkControl({
           </Flex>
           {required && (
             <FormErrorMessage>
-              {label} {errors}
+              {label} {getCustomErrorMessage(errors)}
             </FormErrorMessage>
           )}
         </LinkErrorBoundary>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsBooleanControl.tsx

@@ -9,6 +9,7 @@ import {
 } from "@opengovsg/design-system-react"
 
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
+import { getCustomErrorMessage } from "./utils"
 
 export const jsonFormsBooleanControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.BooleanControl,
@@ -50,7 +51,7 @@ export function JsonFormsBooleanControl({
             isChecked={!!data}
             onChange={(e) => handleChange(path, e.target.checked)}
           />
-          <FormErrorMessage>{errors}</FormErrorMessage>
+          <FormErrorMessage>{getCustomErrorMessage(errors)}</FormErrorMessage>
         </Flex>
       </FormControl>
     </Box>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDateControl.tsx

@@ -9,6 +9,7 @@ import {
 } from "@opengovsg/design-system-react"
 
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
+import { getCustomErrorMessage } from "./utils"
 
 export const jsonFormsDateControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.TextControl,
@@ -37,7 +38,7 @@ export function JsonFormsDateControl({
           onInputValueChange={(date) => handleChange(path, date.toString())}
         />
         <FormErrorMessage>
-          {label} {errors}
+          {label} {getCustomErrorMessage(errors)}
         </FormErrorMessage>
       </FormControl>
     </Box>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsEmbedControl.tsx

@@ -41,6 +41,7 @@ import {
   getEmbedNameFromUrl,
   getIframeSrc,
 } from "../../../utils"
+import { getCustomErrorMessage } from "./utils"
 
 const SUPPORTED_FORMS = Object.keys(FORMSG_EMBED_URL_REGEXES).map(
   (key) => EMBED_NAME_MAPPING[key as keyof typeof FORMSG_EMBED_URL_REGEXES],
@@ -237,7 +238,7 @@ export function JsonFormsEmbedControl({
           </HStack>
 
           <FormErrorMessage>
-            {label} {errors}
+            {label} {getCustomErrorMessage(errors)}
           </FormErrorMessage>
         </FormControl>
       </Box>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsIntegerControl.tsx

@@ -23,6 +23,7 @@ import {
 } from "@opengovsg/design-system-react"
 
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
+import { getCustomErrorMessage } from "./utils"
 
 export const jsonFormsIntegerControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.IntegerControl,
@@ -85,7 +86,7 @@ export function JsonFormsIntegerControl({
           </NumberInputStepper>
         </NumberInput>
         <FormErrorMessage>
-          {label} {errors}
+          {label} {getCustomErrorMessage(errors)}
         </FormErrorMessage>
       </FormControl>
     </Box>