finish v5 upgrade

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

client/src/components/layout/Header.tsx

@@ -23,7 +23,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingLeft: theme.spacing(1.5),
     flex: 1,
     height: 48,
   },
@@ -51,17 +50,18 @@ const useStyles = makeStyles((theme: Theme) => ({
       },
 
       '& .status': {
-        fontSize: '11px',
+        fontSize: '12px',
         lineHeight: 1.3,
         color: '#1ba954',
       },
     },
   },
+  title: {
+    paddingLeft: theme.spacing(2),
+  },
   database: {
     transform: 'translateY(-4px)',
     width: theme.spacing(16),
-    marginRight: theme.spacing(2),
-    // make the label of the selector top = 4px
     '& .MuiInputLabel-root': {
       top: '4px',
     },
@@ -132,7 +132,11 @@ const Header: FC = () => {
               <StatusIcon type={LoadingType.CREATING} />
             ))}
 
-          <Typography variant="h5" color="textPrimary">
+          <Typography
+            variant="h5"
+            color="textPrimary"
+            className={classes.title}
+          >
             {navInfo.navTitle}
           </Typography>
           {navInfo.extra}
@@ -150,7 +154,7 @@ const Header: FC = () => {
               </div>
             </Tooltip>
           )}
-          <Tooltip title={''}>
+          <Tooltip title={'disconnect'}>
             <div>
               <LogoutIcon
                 classes={{ root: classes.icon }}

client/src/components/menu/NavMenu.tsx

@@ -3,10 +3,12 @@ import clsx from 'clsx';
 import { Theme } from '@mui/material/styles';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { NavMenuItem, NavMenuType } from './Types';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
+import icons from '@/components/icons/Icons';
 
 const timeout = 150;
 const duration = `${timeout}ms`;
@@ -14,93 +16,42 @@ const duration = `${timeout}ms`;
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     backgroundColor: '#fff',
-    paddingTop: 0,
+    padding: `${theme.spacing(0)}px ${theme.spacing(4)}px`,
     boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
-    paddingBottom: theme.spacing(4),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    transition: theme.transitions.create('width', {
-      duration,
-    }),
+    borderRight: `1px solid ${theme.palette.divider}`,
+    transition: theme.transitions.create('width', { duration }),
+    width: 48,
   },
-  rootCollapse: {
-    width: '48px',
-  },
-  rootExpand: {
-    width: (props: any) => props.width || '100%',
-  },
-  nested: {},
   item: {
-    boxSizing: 'content-box',
     width: 'initial',
-    color: theme.palette.attuGrey.dark,
     borderRadius: 8,
-    fontWeight: 500,
     margin: theme.spacing(0.5),
-
+    cursor: 'pointer',
     '&:hover': {
       backgroundColor: theme.palette.primary.main,
-
-      '& .icon': {
-        color: '#fff',
-      },
       color: '#fff',
+      '& .icon': { color: '#fff' },
     },
-    cursor: 'pointer',
-  },
-  itemIcon: {
-    minWidth: '24px',
-    marginRight: theme.spacing(1),
-    marginLeft: '-8px',
-  },
-  itemText: {
-    whiteSpace: 'nowrap',
-    pointerEvents: 'none',
-  },
-  active: {
-    borderRadius: 8,
-    backgroundColor: theme.palette.primary.main,
-
-    '& .icon': {
-      color: '#fff',
+    '&.attu .icon': {
+      color: theme.palette.primary.main,
+      '&:hover': { color: '#fff' },
+      '&.active:hover': { color: '#fff' },
     },
-    color: '#fff',
-  },
-  actionIcon: {
-    position: 'fixed',
-    top: 24,
-    transition: theme.transitions.create('all', {
-      duration,
-    }),
-    minWidth: '16px',
-    padding: 0,
-
-    '& svg': {
-      fontSize: '16px',
-    },
-
-    '& svg path': {
-      fill: theme.palette.attuGrey.dark,
+    '& .itemIcon': {
+      marginLeft: -8,
+      minWidth: 24,
     },
-
-    '&:hover': {
+    '&.active': {
+      borderRadius: 8,
       backgroundColor: theme.palette.primary.main,
-      '& svg path': {
-        fill: 'white',
-      },
+      color: '#fff',
+      '& .icon path': { fill: '#fff' },
     },
   },
-  expandIcon: {
-    left: '160px',
-    transform: 'rotateZ(180deg)',
-  },
-  collapseIcon: {
-    left: 48,
-  },
+
   version: {
     position: 'absolute',
-    fontSize: '10px',
+    fontSize: 10,
     bottom: 8,
     left: 8,
   },
@@ -108,9 +59,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const NavMenu: FC<NavMenuType> = props => {
   const { width, data, defaultActive = '', versionInfo } = props;
-  const [expanded, setExpanded] = useState<boolean>(false);
-
-  const classes = useStyles({ width, expanded });
+  const classes = useStyles({ width });
   const [active, setActive] = useState<string>(defaultActive);
 
   useEffect(() => {
@@ -139,16 +88,19 @@ const NavMenu: FC<NavMenuType> = props => {
               title={v.label}
               className={clsx(classes.item, {
                 [className]: className,
-                [classes.active]: isActive,
+                ['active']: isActive,
+                ['attu']: v.icon === icons.attu,
               })}
               onClick={() => {
                 setActive(v.label);
                 v.onClick && v.onClick();
               }}
             >
-              <ListItemIcon className={classes.itemIcon}>
-                <IconComponent classes={{ root: iconClass }} />
-              </ListItemIcon>
+              <Tooltip title={v.label} placement="right">
+                <ListItemIcon className="itemIcon">
+                  <IconComponent classes={{ root: iconClass }} />
+                </ListItemIcon>
+              </Tooltip>
             </ListItem>
           );
         })}
@@ -157,13 +109,7 @@ const NavMenu: FC<NavMenuType> = props => {
   };
 
   return (
-    <List
-      component="nav"
-      className={clsx(classes.root, {
-        [classes.rootExpand]: expanded,
-        [classes.rootCollapse]: !expanded,
-      })}
-    >
+    <List component="nav" className={clsx(classes.root)}>
       <div>
         <NestList data={data} />
         <Typography

client/src/i18n/cn/nav.ts

@@ -1,5 +1,5 @@
 const navTrans = {
-  overview: '概览',
+  overview: 'Milvus 主页',
   welcome: '欢迎来到 Milvus！',
   collection: 'Collection',
   console: '搜索控制台',

client/src/i18n/en/nav.ts

@@ -1,5 +1,5 @@
 const navTrans = {
-  overview: 'Overview',
+  overview: 'Milvus Home',
   welcome: 'Welcome to Milvus!',
   collection: 'Collection',
   console: 'Search Console',

client/src/pages/databases/collections/segments/Segments.tsx

@@ -217,6 +217,8 @@ const Segments = () => {
         showPagination={true}
         openCheckBox={false}
         page={currentPage}
+        tableHeaderHeight={46}
+        rowHeight={40}
         onPageChange={handlePageChange}
         rowsPerPage={pageSize}
         setRowsPerPage={handlePageSize}

client/src/pages/databases/tree/index.tsx

@@ -165,7 +165,7 @@ const CollectionNode: React.FC<{ data: CollectionObject }> = ({ data }) => {
   return (
     <div className={classes.collectionNode}>
       <div className={classes.collectionName}>
-        <Tooltip title={data.collection_name}>
+        <Tooltip title={data.collection_name} placement="top">
           <Typography noWrap className="collectionName">
             {data.collection_name}
           </Typography>

client/src/styles/theme.ts

@@ -1,8 +1,4 @@
-import {
-  // for strict mode
-  unstable_createMuiStrictModeTheme as createMuiTheme,
-  adaptV4Theme,
-} from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 
 declare module '@mui/material/styles/createPalette' {
   interface Palette {
@@ -62,11 +58,11 @@ const commonThemes = {
   spacing: (factor: number) => `${8 * factor}px`,
 };
 
-export const theme = createMuiTheme(
-  adaptV4Theme({
-    ...commonThemes,
-    overrides: {
-      MuiTypography: {
+export const theme = createTheme({
+  ...commonThemes,
+  components: {
+    MuiTypography: {
+      styleOverrides: {
         button: {
           textTransform: 'initial',
           lineHeight: '16px',
@@ -105,23 +101,22 @@ export const theme = createMuiTheme(
           lineHeight: '24px',
           letterSpacing: '-0.01em',
         },
-        // style for element p
         body1: {
           fontSize: '14px',
           lineHeight: 1.5,
         },
-        // small caption
         body2: {
           fontSize: '12px',
           lineHeight: '16px',
         },
-        // tiny caption
         caption: {
           fontSize: '10px',
           lineHeight: '12px',
         },
       },
-      MuiButton: {
+    },
+    MuiButton: {
+      styleOverrides: {
         root: {
           textTransform: 'initial',
           fontWeight: 'bold',
@@ -132,39 +127,50 @@ export const theme = createMuiTheme(
           },
         },
       },
-      MuiDialog: {
+    },
+    MuiDialog: {
+      styleOverrides: {
         paper: {
           borderRadius: 8,
         },
       },
-      MuiDialogActions: {
+    },
+    MuiDialogActions: {
+      styleOverrides: {
         spacing: {
           padding: commonThemes.spacing(4),
         },
       },
-      MuiDialogContent: {
+    },
+    MuiDialogContent: {
+      styleOverrides: {
         root: {
           padding: `${commonThemes.spacing(1)} ${commonThemes.spacing(4)}`,
         },
       },
-      MuiDialogTitle: {
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
         root: {
           padding: commonThemes.spacing(4),
           paddingBottom: commonThemes.spacing(1),
         },
       },
-      MuiFormHelperText: {
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
         contained: {
           marginLeft: 0,
         },
       },
-      MuiTextField: {
-        root: {},
-      },
-      MuiFilledInput: {
+    },
+    MuiTextField: {
+      styleOverrides: {},
+    },
+    MuiFilledInput: {
+      styleOverrides: {
         root: {
           backgroundColor: '#f4f4f4',
-
           '&:hover': {
             backgroundColor: '#f4f4f4',
           },
@@ -177,8 +183,9 @@ export const theme = createMuiTheme(
           borderColor: 'transparent',
         },
       },
-
-      MuiInput: {
+    },
+    MuiInput: {
+      styleOverrides: {
         underline: {
           '&:hover:not(.Mui-disabled):before': {
             borderWidth: 1,
@@ -188,5 +195,7 @@ export const theme = createMuiTheme(
         },
       },
     },
-  })
-);
+  },
+});
+
+export default theme;