[#5447][#5720][#5727] create topic, disable create table for hudi, enable schema properties and comment for partial paimon (#5771)

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

1. Support creating topic/editing topic/deleting topic/viewing topic
<img width="1417" alt="image"
src="https://github.com/user-attachments/assets/24e0ae59-7ec5-4115-becc-2d8a83dcd8d6">

2. Fix issue with creating a table for hudi
<img width="1481" alt="image"
src="https://github.com/user-attachments/assets/bc64eaa9-1b8e-48b2-98b4-899ebfd6eb02">

3. [Improvement] Paimon catalog, schema properties can be set when
backend is jdbc and hive
<img width="1441" alt="image"
src="https://github.com/user-attachments/assets/9bb2746f-d3b0-4f05-84bc-d5baadb8999d">
<img width="1434" alt="image"
src="https://github.com/user-attachments/assets/537ec2fc-a4fa-48ff-bbd1-f606751a2a46">

### Why are the changes needed?
N/A

Fix: #5447, #5720, #5727

### Does this PR introduce _any_ user-facing change?
N/A

### How was this patch tested?
manually

---------

Co-authored-by: Qiming Teng <tengqm@outlook.com>

Author: LauraXia123

web/web/src/app/metalakes/CreateMetalakeDialog.js

@@ -316,8 +316,8 @@ const CreateMetalakeDialog = props => {
                       )}
                       {item.invalid && (
                         <FormHelperText className={'twc-text-error-main'}>
-                          Invalid key, matches strings starting with a letter/underscore, followed by alphanumeric
-                          characters, underscores, hyphens, or dots.
+                          Valid key must starts with a letter/underscore, followed by alphanumeric characters,
+                          underscores, hyphens, or dots.
                         </FormHelperText>
                       )}
                     </FormControl>

web/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js

@@ -680,12 +680,12 @@ const CreateCatalogDialog = props => {
                           )}
                           {item.key && item.invalid && (
                             <FormHelperText className={'twc-text-error-main'}>
-                              Invalid key, matches strings starting with a letter/underscore, followed by alphanumeric
-                              characters, underscores, hyphens, or dots.
+                              Valid key must starts with a letter/underscore, followed by alphanumeric characters,
+                              underscores, hyphens, or dots.
                             </FormHelperText>
                           )}
                           {!item.key.trim() && (
-                            <FormHelperText className={'twc-text-error-main'}>Key is required field</FormHelperText>
+                            <FormHelperText className={'twc-text-error-main'}>Key is required</FormHelperText>
                           )}
                         </FormControl>
                       </Grid>

web/web/src/app/metalakes/metalake/rightContent/CreateFilesetDialog.js

@@ -461,12 +461,12 @@ const CreateFilesetDialog = props => {
                         )}
                         {item.key && item.invalid && (
                           <FormHelperText className={'twc-text-error-main'}>
-                            Invalid key, matches strings starting with a letter/underscore, followed by alphanumeric
-                            characters, underscores, hyphens, or dots.
+                            Valid key must starts with a letter/underscore, followed by alphanumeric characters,
+                            underscores, hyphens, or dots.
                           </FormHelperText>
                         )}
                         {!item.key.trim() && (
-                          <FormHelperText className={'twc-text-error-main'}>Key is required field</FormHelperText>
+                          <FormHelperText className={'twc-text-error-main'}>Key is required</FormHelperText>
                         )}
                       </FormControl>
                     </Grid>

web/web/src/app/metalakes/metalake/rightContent/CreateSchemaDialog.js

@@ -23,20 +23,18 @@ import { useState, forwardRef, useEffect, Fragment } from 'react'
 
 import {
   Box,
-  Grid,
   Button,
   Dialog,
-  TextField,
-  Typography,
-  DialogContent,
   DialogActions,
-  IconButton,
+  DialogContent,
   Fade,
-  Select,
-  MenuItem,
-  InputLabel,
   FormControl,
-  FormHelperText
+  FormHelperText,
+  Grid,
+  IconButton,
+  InputLabel,
+  TextField,
+  Typography
 } from '@mui/material'
 
 import Icon from '@/components/Icon'
@@ -90,6 +88,10 @@ const CreateSchemaDialog = props => {
   const activatedCatalogDetail = store.activatedDetails
   const [cacheData, setCacheData] = useState()
 
+  const paimonCatalogBackend =
+    activatedCatalogDetail?.provider === 'lakehouse-paimon' &&
+    ['hive', 'jdbc'].includes(activatedCatalogDetail?.properties['catalog-backend'])
+
   const {
     control,
     reset,
@@ -293,7 +295,8 @@ const CreateSchemaDialog = props => {
               </FormControl>
             </Grid>
 
-            {!['jdbc-mysql', 'lakehouse-paimon', 'jdbc-oceanbase'].includes(activatedCatalogDetail?.provider) && (
+            {(!['jdbc-mysql', 'lakehouse-paimon', 'jdbc-oceanbase'].includes(activatedCatalogDetail?.provider) ||
+              paimonCatalogBackend) && (
               <Grid item xs={12}>
                 <FormControl fullWidth>
                   <Controller
@@ -315,12 +318,14 @@ const CreateSchemaDialog = props => {
                     )}
                   />
                 </FormControl>
+                {activatedCatalogDetail?.properties['catalog-backend']}
               </Grid>
             )}
 
-            {!['jdbc-postgresql', 'lakehouse-paimon', 'kafka', 'jdbc-mysql', 'jdbc-oceanbase'].includes(
+            {(!['jdbc-postgresql', 'lakehouse-paimon', 'kafka', 'jdbc-mysql', 'jdbc-oceanbase'].includes(
               activatedCatalogDetail?.provider
-            ) && (
+            ) ||
+              paimonCatalogBackend) && (
               <Grid item xs={12} data-refer='schema-props-layout'>
                 <Typography sx={{ mb: 2 }} variant='body2'>
                   Properties
@@ -385,12 +390,12 @@ const CreateSchemaDialog = props => {
                           )}
                           {item.key && item.invalid && (
                             <FormHelperText className={'twc-text-error-main'}>
-                              Invalid key, matches strings starting with a letter/underscore, followed by alphanumeric
-                              characters, underscores, hyphens, or dots.
+                              Valid key must starts with a letter/underscore, followed by alphanumeric characters,
+                              underscores, hyphens, or dots.
                             </FormHelperText>
                           )}
                           {!item.key.trim() && (
-                            <FormHelperText className={'twc-text-error-main'}>Key is required field</FormHelperText>
+                            <FormHelperText className={'twc-text-error-main'}>Key is required</FormHelperText>
                           )}
                         </FormControl>
                       </Grid>
@@ -400,9 +405,10 @@ const CreateSchemaDialog = props => {
               </Grid>
             )}
 
-            {!['jdbc-postgresql', 'lakehouse-paimon', 'kafka', 'jdbc-mysql', 'jdbc-oceanbase'].includes(
+            {(!['jdbc-postgresql', 'lakehouse-paimon', 'kafka', 'jdbc-mysql', 'jdbc-oceanbase'].includes(
               activatedCatalogDetail?.provider
-            ) && (
+            ) ||
+              paimonCatalogBackend) && (
               <Grid item xs={12}>
                 <Button
                   size='small'

web/web/src/app/metalakes/metalake/rightContent/CreateTableDialog.js

@@ -784,12 +784,12 @@ const CreateTableDialog = props => {
                         )}
                         {item.key && item.invalid && (
                           <FormHelperText className={'twc-text-error-main'}>
-                            Invalid key, matches strings starting with a letter/underscore, followed by alphanumeric
-                            characters, underscores, hyphens, or dots.
+                            Valid key must starts with a letter/underscore, followed by alphanumeric characters,
+                            underscores, hyphens, or dots.
                           </FormHelperText>
                         )}
                         {!item.key.trim() && (
-                          <FormHelperText className={'twc-text-error-main'}>Key is required field</FormHelperText>
+                          <FormHelperText className={'twc-text-error-main'}>Key is required</FormHelperText>
                         )}
                       </FormControl>
                     </Grid>