[#1350] fix(UI): Fix fields validation when create a catalog in the w…

…eb UI (#1375)

### What changes were proposed in this pull request?

Fix fields validation when create a catalog in the web UI.

Currently, after clicking submit, it will verify correctly based on the
`provider` and specific `properties`.

### Why are the changes needed?

Fix: #1350 

### Does this PR introduce _any_ user-facing change?

N/A

### How was this patch tested?

N/A

web/app/metalakes/CreateCatalogDialog.js

@@ -83,11 +83,13 @@ const CreateCatalogDialog = props => {
     reset,
     watch,
     setValue,
+    getValues,
     handleSubmit,
+    trigger,
     formState: { errors }
   } = useForm({
     defaultValues,
-    mode: 'onChange',
+    mode: 'all',
     resolver: yupResolver(schema)
   })
 
@@ -146,43 +148,69 @@ const CreateCatalogDialog = props => {
     setOpen(false)
   }
 
+  const handleClickSubmit = e => {
+    e.preventDefault()
+
+    return handleSubmit(onSubmit(getValues()), onError)
+  }
+
   const onSubmit = data => {
     const { propItems, ...mainData } = data
 
-    const properties = innerProps.reduce((acc, item) => {
-      acc[item.key] = item.value
+    let nextProps = []
 
-      return acc
-    }, {})
-
-    const catalogData = {
-      ...mainData,
-      properties
+    if (propItems[0]?.key === 'catalog-backend' && propItems[0]?.value === 'hive') {
+      nextProps = propItems.slice(0, 3)
+    } else {
+      nextProps = propItems
     }
 
-    if (type === 'create') {
-      dispatch(createCatalog({ data: catalogData, metalake }))
-    }
+    trigger()
+
+    const validData = { propItems: nextProps, ...mainData }
+
+    schema
+      .validate(validData)
+      .then(() => {
+        const properties = innerProps.reduce((acc, item) => {
+          acc[item.key] = item.value
+
+          return acc
+        }, {})
+
+        const catalogData = {
+          ...mainData,
+          properties
+        }
+
+        if (type === 'create') {
+          dispatch(createCatalog({ data: catalogData, metalake }))
+        }
 
-    handleClose()
+        handleClose()
+      })
+      .catch(err => {
+        console.error('valid error', err)
+      })
   }
 
   const onError = errors => {
     console.error('fields error', errors)
   }
 
   useEffect(() => {
-    const providerItemIndex = providers.findIndex(i => i.value === providerSelect)
-
     let defaultProps = []
 
+    const providerItemIndex = providers.findIndex(i => i.value === providerSelect)
+
     if (providerItemIndex !== -1) {
       defaultProps = providers[providerItemIndex].defaultProps
 
       resetPropsFields(providers, providerItemIndex)
       setInnerProps(defaultProps)
+      setValue('propItems', providers[providerItemIndex].defaultProps)
     }
-  }, [providerSelect, setInnerProps])
+  }, [providerSelect, setInnerProps, setValue])
 
   useEffect(() => {
     if (open && JSON.stringify(data) !== '{}') {
@@ -205,7 +233,7 @@ const CreateCatalogDialog = props => {
 
   return (
     <Dialog fullWidth maxWidth='sm' scroll='body' TransitionComponent={Transition} open={open} onClose={handleClose}>
-      <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <form onSubmit={e => handleClickSubmit(e)}>
         <DialogContent
           sx={{
             position: 'relative',