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

[jshao]

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

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


The following commit(s) were added to refs/heads/branch-0.6 by this push:
     new 9a1a0ab27 [#4180] fix(ui): show the required key msg when submit 
validate (#4410)
9a1a0ab27 is described below

commit 9a1a0ab27272d3bd62acf9a0a99ba184681c18c0
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Wed Aug 7 11:31:04 2024 +0800

    [#4180] fix(ui): show the required key msg when submit validate (#4410)
    
    ### 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
    
    Co-authored-by: Qian Xia <lauraxiaq...@gmail.com>
---
 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>