feat: add drop collection button on the schema page (#806)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/pages/databases/collections/Collections.tsx

@@ -279,7 +279,7 @@ const Collections = () => {
       disabled: data => data.length !== 1,
     },
     {
-      icon: 'delete',
+      icon: 'cross',
       type: 'button',
       btnVariant: 'text',
       onClick: () => {

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -389,7 +389,7 @@ const CollectionData = (props: CollectionDataProps) => {
         });
       },
       label: btnTrans('delete'),
-      icon: 'delete',
+      icon: 'cross2',
       tooltip: btnTrans('deleteTooltip'),
       disabledTooltip: collectionTrans('deleteDisabledTooltip'),
       disabled: () => !selectedData?.length,

client/src/pages/databases/collections/partitions/Partitions.tsx

@@ -152,7 +152,7 @@ const Partitions = () => {
       disabled: () => partitions.length === 0 || selectedPartitions.length > 1,
     },
     {
-      icon: 'delete',
+      icon: 'cross',
       type: 'button',
       btnVariant: 'text',
       btnColor: 'secondary',

client/src/pages/databases/collections/schema/Schema.tsx

@@ -15,10 +15,11 @@ import { useStyles } from './Styles';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
 import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
 import RenameCollectionDialog from '@/pages/dialogs/RenameCollectionDialog';
+import DropCollectionDialog from '@/pages/dialogs/DropCollectionDialog';
 import CopyButton from '@/components/advancedSearch/CopyButton';
 import RefreshButton from '@/components/customButton/RefreshButton';
 import { CollectionService } from '@/http';
-import type { FieldObject, KeyValuePair } from '@server/types';
+import type { FieldObject } from '@server/types';
 
 const Overview = () => {
   const { fetchCollection, collections, loading, database } =
@@ -339,6 +340,29 @@ const Overview = () => {
                   tooltip={btnTrans('downloadSchema')}
                   icon={<Icons.download />}
                 />
+                <CustomIconButton
+                  className={classes.extraBtn}
+                  tooltip={btnTrans('drop')}
+                  onClick={() => {
+                    setDialog({
+                      open: true,
+                      type: 'custom',
+                      params: {
+                        component: (
+                          <DropCollectionDialog
+                            collections={[collection]}
+                            onDelete={() => {
+                              navigate(`/databases/${database}`);
+                            }}
+                          />
+                        ),
+                      },
+                    });
+                  }}
+                >
+                  <Icons.cross />
+                </CustomIconButton>
+
                 <RefreshButton
                   className={classes.extraBtn}
                   tooltip={btnTrans('refresh')}

client/src/pages/user/Roles.tsx

@@ -239,7 +239,7 @@ const Roles = () => {
         selectedRole.findIndex(v => v.roleName === 'admin') > -1 ||
         selectedRole.findIndex(v => v.roleName === 'public') > -1,
       disabledTooltip: userTrans('deleteRoleTip'),
-      icon: 'delete',
+      icon: 'cross',
     },
   ];
 

client/src/pages/user/User.tsx

@@ -224,7 +224,7 @@ const Users = () => {
         selectedUser.length === 0 ||
         selectedUser.findIndex(v => v.username === 'root') > -1,
       disabledTooltip: userTrans('deleteTip'),
-      icon: 'delete',
+      icon: 'cross',
     },
   ];