feat: add validation status for formitem

web/app/components/base/encrypted-bottom/index.tsx

@@ -0,0 +1,30 @@
+import cn from '@/utils/classnames'
+import { RiLock2Fill } from '@remixicon/react'
+import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  className?: string
+  frontTextKey?: string
+  backTextKey?: string
+}
+
+export const EncryptedBottom = (props: Props) => {
+  const { t } = useTranslation()
+  const { frontTextKey, backTextKey, className } = props
+
+  return (
+    <div className={cn('system-xs-regular flex items-center border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary', className)}>
+      <RiLock2Fill className='mx-1 h-3 w-3 text-text-quaternary' />
+      {t(frontTextKey || 'common.provider.encrypted.front')}
+      <Link
+        className='mx-1 text-text-accent'
+        target='_blank' rel='noopener noreferrer'
+        href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+      >
+        PKCS1_OAEP
+      </Link>
+      {t(backTextKey || 'common.provider.encrypted.back')}
+    </div>
+  )
+}

web/app/components/base/form/components/base/base-field.tsx

@@ -1,6 +1,6 @@
 import CheckboxList from '@/app/components/base/checkbox-list'
-import type { FormSchema } from '@/app/components/base/form/types'
-import { FormTypeEnum } from '@/app/components/base/form/types'
+import type { FieldState, FormSchema } from '@/app/components/base/form/types'
+import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/form/types'
 import Input from '@/app/components/base/input'
 import Radio from '@/app/components/base/radio'
 import RadioE from '@/app/components/base/radio/ui'
@@ -31,6 +31,29 @@ const getExtraProps = (type: FormTypeEnum) => {
   }
 }
 
+const VALIDATE_STATUS_STYLE_MAP: Record<FormItemValidateStatusEnum, { componentClassName: string, textClassName: string, infoFieldName: string }> = {
+  [FormItemValidateStatusEnum.Error]: {
+    componentClassName: 'border-components-input-border-destructive focus:border-components-input-border-destructive',
+    textClassName: 'text-text-destructive',
+    infoFieldName: 'errors',
+  },
+  [FormItemValidateStatusEnum.Warning]: {
+    componentClassName: 'border-components-input-border-warning focus:border-components-input-border-warning',
+    textClassName: 'text-text-warning',
+    infoFieldName: 'warnings',
+  },
+  [FormItemValidateStatusEnum.Success]: {
+    componentClassName: '',
+    textClassName: '',
+    infoFieldName: '',
+  },
+  [FormItemValidateStatusEnum.Validating]: {
+    componentClassName: '',
+    textClassName: '',
+    infoFieldName: '',
+  },
+}
+
 export type BaseFieldProps = {
   fieldClassName?: string
   labelClassName?: string
@@ -40,6 +63,7 @@ export type BaseFieldProps = {
   field: AnyFieldApi
   disabled?: boolean
   onChange?: (field: string, value: any) => void
+  fieldState?: FieldState
 }
 
 const BaseField = ({
@@ -51,6 +75,7 @@ const BaseField = ({
   field,
   disabled: propsDisabled,
   onChange,
+  fieldState,
 }: BaseFieldProps) => {
   const renderI18nObject = useRenderI18nObject()
   const {
@@ -168,7 +193,7 @@ const BaseField = ({
             <Input
               id={field.name}
               name={field.name}
-              className={cn(inputClassName)}
+              className={cn(inputClassName, VALIDATE_STATUS_STYLE_MAP[fieldState?.validateStatus as FormItemValidateStatusEnum]?.componentClassName)}
               value={value || ''}
               onChange={(e) => {
                 handleChange(e.target.value)
@@ -266,6 +291,14 @@ const BaseField = ({
             </Radio.Group>
           )
         }
+        {fieldState?.validateStatus && [FormItemValidateStatusEnum.Error, FormItemValidateStatusEnum.Warning].includes(fieldState?.validateStatus) && (
+          <div className={cn(
+            'system-xs-regular mt-1 px-0 py-[2px]',
+            VALIDATE_STATUS_STYLE_MAP[fieldState?.validateStatus].textClassName,
+          )}>
+            {fieldState?.[VALIDATE_STATUS_STYLE_MAP[fieldState?.validateStatus].infoFieldName as keyof FieldState]}
+          </div>
+        )}
         {
           formSchema.url && (
             <a

web/app/components/base/form/components/base/base-form.tsx

@@ -3,6 +3,7 @@ import {
   useCallback,
   useImperativeHandle,
   useMemo,
+  useState,
 } from 'react'
 import type {
   AnyFieldApi,
@@ -12,9 +13,12 @@ import {
   useForm,
   useStore,
 } from '@tanstack/react-form'
-import type {
-  FormRef,
-  FormSchema,
+import {
+  type FieldState,
+  FormItemValidateStatusEnum,
+  type FormRef,
+  type FormSchema,
+  type SetFieldsParam,
 } from '@/app/components/base/form/types'
 import {
   BaseField,
@@ -72,6 +76,8 @@ const BaseForm = ({
   const { getFormValues } = useGetFormValues(form, formSchemas)
   const { getValidators } = useGetValidators()
 
+  const [fieldStates, setFieldStates] = useState<Record<string, FieldState>>({})
+
   const showOnValues = useStore(form.store, (s: any) => {
     const result: Record<string, any> = {}
     formSchemas.forEach((schema) => {
@@ -85,6 +91,34 @@ const BaseForm = ({
     return result
   })
 
+  const setFields = useCallback((fields: SetFieldsParam[]) => {
+    const newFieldStates: Record<string, FieldState> = { ...fieldStates }
+
+    for (const field of fields) {
+      const { name, value, errors, warnings, validateStatus, help } = field
+
+      if (value !== undefined)
+        form.setFieldValue(name, value)
+
+      let finalValidateStatus = validateStatus
+      if (!finalValidateStatus) {
+        if (errors && errors.length > 0)
+          finalValidateStatus = FormItemValidateStatusEnum.Error
+        else if (warnings && warnings.length > 0)
+          finalValidateStatus = FormItemValidateStatusEnum.Warning
+      }
+
+      newFieldStates[name] = {
+        validateStatus: finalValidateStatus,
+        help,
+        errors,
+        warnings,
+      }
+    }
+
+    setFieldStates(newFieldStates)
+  }, [form, fieldStates])
+
   useImperativeHandle(ref, () => {
     return {
       getForm() {
@@ -93,8 +127,9 @@ const BaseForm = ({
       getFormValues: (option) => {
         return getFormValues(option)
       },
+      setFields,
     }
-  }, [form, getFormValues])
+  }, [form, getFormValues, setFields])
 
   const renderField = useCallback((field: AnyFieldApi) => {
     const formSchema = formSchemas?.find(schema => schema.name === field.name)
@@ -110,12 +145,13 @@ const BaseForm = ({
           inputClassName={inputClassName}
           disabled={disabled}
           onChange={onChange}
+          fieldState={fieldStates[field.name]}
         />
       )
     }
 
     return null
-  }, [formSchemas, fieldClassName, labelClassName, inputContainerClassName, inputClassName, disabled, onChange])
+  }, [formSchemas, fieldClassName, labelClassName, inputContainerClassName, inputClassName, disabled, onChange, fieldStates])
 
   const renderFieldWrapper = useCallback((formSchema: FormSchema) => {
     const validators = getValidators(formSchema)

web/app/components/base/form/types.ts

@@ -45,6 +45,13 @@ export type FormOption = {
 
 export type AnyValidators = FieldValidators<any, any, any, any, any, any, any, any, any, any>
 
+export enum FormItemValidateStatusEnum {
+  Success = 'success',
+  Warning = 'warning',
+  Error = 'error',
+  Validating = 'validating',
+}
+
 export type FormSchema = {
   type: FormTypeEnum
   name: string
@@ -79,11 +86,25 @@ export type GetValuesOptions = {
   needTransformWhenSecretFieldIsPristine?: boolean
   needCheckValidatedValues?: boolean
 }
+
+export type FieldState = {
+  validateStatus?: FormItemValidateStatusEnum
+  help?: string | ReactNode
+  errors?: string[]
+  warnings?: string[]
+}
+
+export type SetFieldsParam = {
+  name: string
+  value?: any
+} & FieldState
+
 export type FormRefObject = {
   getForm: () => AnyFormApi
   getFormValues: (obj: GetValuesOptions) => {
     values: Record<string, any>
     isCheckValidated: boolean
   }
+  setFields: (fields: SetFieldsParam[]) => void
 }
 export type FormRef = ForwardedRef<FormRefObject>