pref: refactor DatabaseCard

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

client/src/components/customButton/CustomButton.tsx

@@ -29,7 +29,7 @@ const CustomButton = ({
   if (!tooltip) return button;
   return (
     <Tooltip title={tooltip} placement={tooltipPlacement} arrow>
-      <span style={{ display: 'inline-block' }}>{button}</span>
+      <span>{button}</span>
     </Tooltip>
   );
 };

client/src/pages/home/DatabaseCard.tsx

@@ -1,89 +1,16 @@
 import { FC, useContext } from 'react';
-import { Theme, Typography, useTheme } from '@mui/material';
+import { Typography, useTheme, Box } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { MilvusService } from '@/http';
 import icons from '@/components/icons/Icons';
-import CustomButton from '@/components/customButton/CustomButton';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { rootContext, authContext } from '@/context';
 import CreateDatabaseDialog from '../dialogs/CreateDatabaseDialog';
 import { CREATE_DB } from './Home';
-import { makeStyles } from '@mui/styles';
 import type { DatabaseObject, ResStatus } from '@server/types';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    position: 'relative',
-    display: `flex`,
-    flexDirection: `column`,
-    gap: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(2),
-    border: `1px solid ${theme.palette.divider}`,
-    minWidth: '168px',
-    minHeight: '168px',
-    cursor: 'pointer',
-    borderRadius: 8,
-    '&:hover': {
-      boxShadow: '0px 0px 4px 0px #00000029',
-      borderColor: theme.palette.primary.main,
-    },
-    '&.current': {
-      boxShadow: '0px 0px 4px 0px #00000029',
-      borderColor: theme.palette.primary.main,
-    },
-  },
-  dbTitle: {
-    fontSize: '20px',
-    lineHeight: '24px',
-    fontWeight: 'bold',
-    marginBottom: theme.spacing(1),
-    '& svg': {
-      verticalAlign: '-3px',
-    },
-    maxWidth: '168px',
-    wordBreak: 'break-all',
-  },
-  label: {
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: theme.palette.text.secondary,
-  },
-  value: {
-    fontSize: '24px',
-    lineHeight: '28px',
-    fontWeight: 'bold',
-    marginBottom: theme.spacing(1),
-  },
-  delIcon: {
-    color: theme.palette.text.secondary,
-    cursor: 'pointer',
-    position: 'absolute',
-    width: 24,
-    height: 24,
-    lineHeight: 24,
-    display: 'flex',
-    top: 8,
-    right: 8,
-    minWidth: 8,
-    '& svg': {
-      width: 16,
-      height: 16,
-      overflow: 'hidden',
-    },
-    padding: theme.spacing(1),
-  },
-
-  // create db
-  create: {
-    border: `1px dashed ${theme.palette.primary.main}`,
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.palette.text.primary,
-  },
-}));
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 
 export interface DatabaseCardProps {
   wrapperClass?: string;
@@ -113,8 +40,6 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
   const { t: dialogTrans } = useTranslation('dialog');
 
   const navigate = useNavigate();
-
-  const classes = useStyles();
   const theme = useTheme();
   const DbIcon = icons.database;
   const DeleteIcon = icons.delete;
@@ -122,36 +47,43 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
   const ZillizIcon = icons.zilliz;
 
   const onClick = async () => {
-    // use database
     await MilvusService.useDatabase({ database: database.name });
-    // set database
     setDatabase(database.name);
-
-    // navigate to database detail page
     const targetPath = `/databases/${database.name}/collections`;
-
     navigate(targetPath);
   };
 
   const handleDelete = async () => {
     await dropDatabase({ db_name: database.name });
-
     openSnackBar(successTrans('delete', { name: dbTrans('database') }));
-
-    // use database
     await MilvusService.useDatabase({ database: 'default' });
-
     handleCloseDialog();
   };
 
   // empty database => create new database
   if (database.name === CREATE_DB.name) {
     return (
-      <section
-        className={`${wrapperClass} ${classes.wrapper} ${classes.create}`}
+      <Box
+        component="section"
+        className={wrapperClass}
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1,
+          backgroundColor: theme => theme.palette.background.paper,
+          color: theme => theme.palette.text.primary,
+          padding: 2,
+          border: theme => `1px dashed ${theme.palette.primary.main}`,
+          minWidth: '168px',
+          minHeight: '168px',
+          cursor: 'pointer',
+          borderRadius: 2,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
         onClick={() => {
           if (isServerless) {
-            // go to https://cloud.zilliz.com/orgs/
             window.open('https://cloud.zilliz.com/', '_blank');
             return;
           }
@@ -166,77 +98,150 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
       >
         <PlusIcon />
         <Typography variant="h6">{dbTrans('createTitle')}</Typography>
-      </section>
+      </Box>
     );
   }
 
   return (
-    <section className={`${wrapperClass}`}>
-      <section
-        className={`${classes.wrapper} ${isActive ? 'current' : ''}`}
+    <Box component="section" className={wrapperClass}>
+      <Box
+        component="section"
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1,
+          backgroundColor: theme => theme.palette.background.paper,
+          color: theme => theme.palette.text.primary,
+          padding: 2,
+          border: theme => `1px solid ${theme.palette.divider}`,
+          minWidth: '168px',
+          minHeight: '168px',
+          cursor: 'pointer',
+          borderRadius: 2,
+          '&:hover': {
+            boxShadow: '0px 0px 4px 0px #00000029',
+            borderColor: theme => theme.palette.primary.main,
+          },
+          ...(isActive && {
+            boxShadow: '0px 0px 4px 0px #00000029',
+            borderColor: theme => theme.palette.primary.main,
+          }),
+        }}
         onClick={onClick}
       >
         <>
           {isManaged ? <ZillizIcon /> : <DbIcon />}
-
-          <Typography variant="h3" className={classes.dbTitle}>
+          <Typography
+            variant="h3"
+            sx={{
+              fontSize: '20px',
+              lineHeight: '24px',
+              fontWeight: 'bold',
+              mb: 1,
+              maxWidth: '168px',
+              wordBreak: 'break-all',
+              '& svg': {
+                verticalAlign: '-3px',
+              },
+            }}
+          >
             {database.name}
           </Typography>
         </>
-        <div>
-          <div key={database.name}>
-            <Typography className={classes.label}>
+        <Box>
+          <Box key={database.name}>
+            <Typography
+              sx={{
+                fontSize: '12px',
+                lineHeight: '16px',
+                color: theme => theme.palette.text.secondary,
+              }}
+            >
               {homeTrans('all')}
             </Typography>
-
             <Typography
-              className={classes.value}
-              style={{ color: theme.palette.primary.main }}
+              sx={{
+                fontSize: '24px',
+                lineHeight: '28px',
+                fontWeight: 'bold',
+                mb: 1,
+                color: theme.palette.primary.main,
+              }}
             >
               {database.collections.length}
             </Typography>
             {database.createdTime !== -1 && (
               <>
-                <Typography className={classes.label}>
+                <Typography
+                  sx={{
+                    fontSize: '12px',
+                    lineHeight: '16px',
+                    color: theme => theme.palette.text.secondary,
+                  }}
+                >
                   {homeTrans('createdTime')}
                 </Typography>
-                <Typography className={classes.label}>
+                <Typography
+                  sx={{
+                    fontSize: '12px',
+                    lineHeight: '16px',
+                    color: theme => theme.palette.text.secondary,
+                  }}
+                >
                   {new Date(database.createdTime / 1000000).toLocaleString()}
                 </Typography>
               </>
             )}
-          </div>
+          </Box>
           {database.name !== 'default' && !isServerless && (
-            <CustomButton
-              className={classes.delIcon}
-              tooltip={`${btnTrans('drop')} ${dbTrans('database')}`}
-              onClick={(event: any) => {
-                event.stopPropagation();
-                setDialog({
-                  open: true,
-                  type: 'custom',
-                  params: {
-                    component: (
-                      <DeleteTemplate
-                        label={btnTrans('drop')}
-                        title={dialogTrans('deleteTitle', {
-                          type: dbTrans('database'),
-                        })}
-                        text={dbTrans('deleteWarning')}
-                        handleDelete={handleDelete}
-                        compare={database.name}
-                      />
-                    ),
-                  },
-                });
-              }}
+            <Tooltip
+              title={`${btnTrans('drop')} ${dbTrans('database')}`}
+              placement="top"
+              arrow
             >
-              <DeleteIcon />
-            </CustomButton>
+              <IconButton
+                sx={{
+                  color: theme => theme.palette.text.secondary,
+                  position: 'absolute',
+                  top: 8,
+                  right: 8,
+                  width: 24,
+                  height: 24,
+                  p: 0,
+                  '& svg': {
+                    width: 16,
+                    height: 16,
+                  },
+                }}
+                onClick={event => {
+                  event.stopPropagation();
+                  setDialog({
+                    open: true,
+                    type: 'custom',
+                    params: {
+                      component: (
+                        <DeleteTemplate
+                          label={btnTrans('drop')}
+                          title={dialogTrans('deleteTitle', {
+                            type: dbTrans('database'),
+                          })}
+                          text={dbTrans('deleteWarning')}
+                          handleDelete={handleDelete}
+                          compare={database.name}
+                        />
+                      ),
+                    },
+                  });
+                }}
+              >
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
           )}
-        </div>
-      </section>
-    </section>
+        </Box>
+      </Box>
+    </Box>
   );
 };