(gravitino) branch main updated: [#6747] improvement(web): can be dropped while set not in-use false (#6748)

[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 f90472a016 [#6747] improvement(web): can be dropped while set not 
in-use false (#6748)
f90472a016 is described below

commit f90472a016aeb9bedd90ac05aa68449aece3dfa4
Author: Qian Xia <q...@datastrato.com>
AuthorDate: Fri Mar 28 01:02:30 2025 +0800

    [#6747] improvement(web): can be dropped while set not in-use false (#6748)
    
    ### What changes were proposed in this pull request?
    can be droped while set not in-use false
    <img width="910" alt="image"
    
src="https://github.com/user-attachments/assets/77c792db-9546-48d0-8048-1938b9ec3f48";
    />
    <img width="807" alt="image"
    
src="https://github.com/user-attachments/assets/0d75ca12-62b1-462f-b9c8-24ddf3b183fa";
    />
    
    
    ### Why are the changes needed?
    The user experience is bad: can not be dropped even if set in-use false
    
    Fix: #6747
    
    ### Does this PR introduce _any_ user-facing change?
    N/A
    
    ### How was this patch tested?
    manually
---
 .../tabsContent/tableView/TableView.js             |  8 ++++--
 web/web/src/components/ConfirmDeleteDialog.js      | 32 +++++++++++++---------
 web/web/src/lib/api/catalogs/index.js              |  2 +-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git 
a/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
 
b/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
index 12716677ed..aca7960b23 100644
--- 
a/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
+++ 
b/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
@@ -336,7 +336,9 @@ const TableView = () => {
               title='Delete'
               size='small'
               sx={{ color: theme => theme.palette.error.light }}
-              onClick={() => handleDelete({ name: row.name, type: row.node, 
catalogType: row.type })}
+              onClick={() =>
+                handleDelete({ name: row.name, type: row.node, catalogType: 
row.type, inUse: row.inUse === 'true' })
+              }
               data-refer={`delete-entity-${row.name}`}
             >
               <DeleteIcon />
@@ -640,9 +642,9 @@ const TableView = () => {
     }
   }
 
-  const handleDelete = ({ name, type, catalogType }) => {
+  const handleDelete = ({ name, type, catalogType, inUse }) => {
     setOpenConfirmDelete(true)
-    setConfirmCacheData({ name, type, catalogType })
+    setConfirmCacheData({ name, type, catalogType, inUse })
   }
 
   const handleCloseConfirm = () => {
diff --git a/web/web/src/components/ConfirmDeleteDialog.js 
b/web/web/src/components/ConfirmDeleteDialog.js
index b551a1fbfd..558bd4bce8 100644
--- a/web/web/src/components/ConfirmDeleteDialog.js
+++ b/web/web/src/components/ConfirmDeleteDialog.js
@@ -37,25 +37,31 @@ const ConfirmDeleteDialog = props => {
           <Typography variant='h4' className={'twc-mb-5 '} sx={{ color: 
'text.secondary' }}>
             Confirm Drop?
           </Typography>
-          {['metalake', 'catalog'].includes(confirmCacheData?.type) ? (
+          {confirmCacheData?.type === 'catalog' && confirmCacheData?.inUse ? (
+            <Typography>Make sure the {confirmCacheData.type} is not 
in-use.</Typography>
+          ) : (
             <Typography>
-              Make sure the {confirmCacheData.type} is not in-use, and all 
sub-entities in it are dropped. This action
-              can not be reversed!
+              {confirmCacheData?.type === 'metalake' && (
+                <span>
+                  Make sure the {confirmCacheData.type} is not in-use, and all 
sub-entities in it are dropped.{' '}
+                </span>
+              )}
+              This action can not be reversed!
             </Typography>
-          ) : (
-            <Typography>This action can not be reversed!</Typography>
           )}
         </Box>
       </DialogContent>
       <DialogActions className={'twc-justify-center twc-px-5 twc-pb-8'}>
-        <Button
-          variant='contained'
-          data-refer='confirm-delete'
-          className={'twc-mr-2'}
-          onClick={() => handleConfirmDeleteSubmit()}
-        >
-          Drop
-        </Button>
+        {!(confirmCacheData?.type === 'catalog' && confirmCacheData?.inUse) && 
(
+          <Button
+            variant='contained'
+            data-refer='confirm-delete'
+            className={'twc-mr-2'}
+            onClick={() => handleConfirmDeleteSubmit()}
+          >
+            Drop
+          </Button>
+        )}
         <Button variant='outlined' color='secondary' onClick={() => 
handleClose()}>
           Cancel
         </Button>
diff --git a/web/web/src/lib/api/catalogs/index.js 
b/web/web/src/lib/api/catalogs/index.js
index 8b0ca0e38b..67746d5684 100644
--- a/web/web/src/lib/api/catalogs/index.js
+++ b/web/web/src/lib/api/catalogs/index.js
@@ -28,7 +28,7 @@ const Apis = {
   UPDATE: ({ metalake, catalog }) =>
     
`/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`,
   DELETE: ({ metalake, catalog }) =>
-    
`/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`,
+    
`/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}?force=true`,
   UPDATEINUSE: ({ metalake, catalog }) =>
     
`/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`
 }