(gravitino) branch main updated: [#4180] fix(ui): show the required key msg when submit validate (#4388)

[jshao]

This is an automated email from the ASF dual-hosted git repository.

jshao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/gravitino.git


The following commit(s) were added to refs/heads/main by this push:
     new 2a23085a8 [#4180] fix(ui): show the required key msg when submit 
validate (#4388)
2a23085a8 is described below

commit 2a23085a82b230a534b431c996d5af121ce9ebb8
Author: Qian Xia <lauraxiaq...@gmail.com>
AuthorDate: Wed Aug 7 11:24:40 2024 +0800

    [#4180] fix(ui): show the required key msg when submit validate (#4388)
    
    ### What changes were proposed in this pull request?
    
    Show the required key msg when submit validate
    <img width="603" alt="image"
    
src="https://github.com/user-attachments/assets/b3d8dca8-8b6d-43b8-aa39-203e6e32ffa1";>
    
    
    ### Why are the changes needed?
    N/A
    
    Fix: #4180
    
    ### Does this PR introduce _any_ user-facing change?
    N/A
    
    ### How was this patch tested?
    manually operated
---
 web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js 
b/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
index b0eb05c3f..6c37eefe1 100644
--- a/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
+++ b/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
@@ -562,7 +562,7 @@ const CreateCatalogDialog = props => {
                                   value={item.key}
                                   disabled={item.required || item.disabled}
                                   onChange={event => handleFormChange({ index, 
event })}
-                                  error={item.hasDuplicateKey}
+                                  error={item.hasDuplicateKey || item.invalid 
|| !item.key.trim()}
                                   data-refer={`props-key-${index}`}
                                 />
                               </Box>
@@ -621,12 +621,15 @@ const CreateCatalogDialog = props => {
                           {item.hasDuplicateKey && (
                             <FormHelperText 
className={'twc-text-error-main'}>Key already exists</FormHelperText>
                           )}
-                          {item.invalid && (
+                          {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.
                             </FormHelperText>
                           )}
+                          {!item.key.trim() && (
+                            <FormHelperText 
className={'twc-text-error-main'}>Key is required field</FormHelperText>
+                          )}
                         </FormControl>
                       </Grid>
                     </Fragment>