Fix inconsistent validation error when deploying new app interface (#547)

* fix: use setError instead of trigger to show validation error

* fix: use setError in app details too

Author: PatrickDinh

src/features/app-interfaces/components/create/app-details.tsx

@@ -45,7 +45,7 @@ type FormInnerProps = {
 
 function FormInner({ helper }: FormInnerProps) {
   const formCtx = useFormContext<z.infer<typeof schema>>()
-  const { setValue, trigger } = formCtx
+  const { setValue, setError, clearErrors } = formCtx
   const loadableAppInterfaces = useLoadableAppInterfacesAtom()
   const appInterfaceNameFieldValue = formCtx.watch('name')
   const [appInterfaceName] = useDebounce(appInterfaceNameFieldValue, 500)
@@ -56,9 +56,17 @@ function FormInner({ helper }: FormInnerProps) {
         (appInterface) => appInterface.name.toLowerCase() === appInterfaceName.toLowerCase()
       )
       setValue('appInterfaceExists', appInterfaceExists)
-      trigger('name')
+
+      if (appInterfaceExists) {
+        setError('name', {
+          type: 'manual',
+          message: 'App interface with this name already exists',
+        })
+      } else {
+        clearErrors('name')
+      }
     }
-  }, [appInterfaceName, loadableAppInterfaces, setValue, trigger])
+  }, [appInterfaceName, loadableAppInterfaces, setValue, setError, clearErrors])
 
   return (
     <>

src/features/app-interfaces/components/create/deployment-details.tsx

@@ -61,7 +61,7 @@ function FormInner({
   helper,
 }: FormInnerProps) {
   const formCtx = useFormContext<z.infer<BaseForm>>()
-  const { setValue, trigger } = formCtx
+  const { setValue, setError, clearErrors } = formCtx
   const loadableAppInterfaces = useLoadableAppInterfacesAtom()
   const appInterfaceNameFieldValue = formCtx.watch('name')
   const [appInterfaceName] = useDebounce(appInterfaceNameFieldValue, 500)
@@ -72,9 +72,17 @@ function FormInner({
         (appInterface) => appInterface.name.toLowerCase() === appInterfaceName.toLowerCase()
       )
       setValue('appInterfaceExists', appInterfaceExists)
-      trigger('name')
+
+      if (appInterfaceExists) {
+        setError('name', {
+          type: 'manual',
+          message: 'App interface with this name already exists',
+        })
+      } else {
+        clearErrors('name')
+      }
     }
-  }, [appInterfaceName, loadableAppInterfaces, setValue, trigger])
+  }, [appInterfaceName, loadableAppInterfaces, setValue, setError, clearErrors])
 
   return (
     <>