UI update

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

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -1,8 +1,10 @@
 import React, { useState, FC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme, createStyles, Button } from '@material-ui/core';
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import ConditionItem from './Condition';
-import AddIcon from '@material-ui/icons/Add';
+import icons from '../icons/Icons';
+import CustomButton from '../customButton/CustomButton';
 import {
   ConditionGroupProps,
   BinaryLogicalOpProps,
@@ -47,11 +49,18 @@ const BinaryLogicalOp: FC<BinaryLogicalOpProps> = props => {
 // "+ Add condition" component.
 const AddCondition: FC<AddConditionProps> = props => {
   const { className, onClick } = props;
+  const { t: searchTrans } = useTranslation('search');
+  const AddIcon = icons.add;
+
   return (
-    <Button onClick={onClick} color="primary" className={className}>
-      <AddIcon />
-      Add Condition
-    </Button>
+    <CustomButton
+      onClick={onClick}
+      color="primary"
+      className={className}
+      startIcon={<AddIcon />}
+    >
+      {searchTrans('addCondition')}
+    </CustomButton>
   );
 };
 
@@ -191,16 +200,6 @@ const useStyles = makeStyles((theme: Theme) =>
         backgroundColor: 'unset',
         margin: '16px 0',
       },
-
-      '& .radius-top': {
-        borderRadius: '8px 8px 0 0',
-      },
-      '& .radius-bottom': {
-        borderRadius: '0 0 8px 8px',
-      },
-      '& .radius-all': {
-        borderRadius: '8px',
-      },
     },
     addBtn: {},
     binaryLogicOp: {

client/src/components/advancedSearch/Dialog.tsx

@@ -1,24 +1,28 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   makeStyles,
   Theme,
   createStyles,
   Typography,
-  Button,
   IconButton,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
 } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import CachedIcon from '@material-ui/icons/Cached';
+import CustomButton from '../customButton/CustomButton';
 import ConditionGroup from './ConditionGroup';
+import icons from '../icons/Icons';
 import CopyBtn from './CopyButton';
 // import DialogTemplate from '../customDialog/DialogTemplate';
 import { DialogProps } from './Types';
 
 const AdvancedDialog = (props: DialogProps) => {
+  // i18n
+  const { t: searchTrans } = useTranslation('search');
+  const { t: btnTrans } = useTranslation('btn');
+
   const {
     open = false,
     onClose,
@@ -29,12 +33,14 @@ const AdvancedDialog = (props: DialogProps) => {
     conditions: flatConditions = [],
     isLegal = false,
     expression: filterExpression = '',
-    title = 'Advanced Filter',
+    title = searchTrans('advancedFilter'),
     fields = [],
     ...others
   } = props;
   const { addCondition } = handleConditions;
   const classes = useStyles();
+  const ResetIcon = icons.refresh;
+  const CloseIcon = icons.clear;
 
   useEffect(() => {
     flatConditions.length === 0 && addCondition();
@@ -87,33 +93,34 @@ const AdvancedDialog = (props: DialogProps) => {
           </div>
         </DialogContent>
         <DialogActions className={classes.dialogActions}>
-          <Button
+          <CustomButton
             onClick={onReset}
             color="primary"
             className={classes.resetBtn}
             size="small"
+            startIcon={<ResetIcon />}
           >
-            <CachedIcon />
-            Reset
-          </Button>
+            <Typography variant="button"> {btnTrans('reset')}</Typography>
+          </CustomButton>
           <div>
-            <Button
+            <CustomButton
               autoFocus
               onClick={onCancel}
               color="primary"
               className={classes.cancelBtn}
             >
-              Cancel
-            </Button>
-            <Button
+              <Typography variant="button"> {btnTrans('cancel')}</Typography>
+            </CustomButton>
+
+            <CustomButton
               onClick={onSubmit}
               variant="contained"
               color="primary"
               className={classes.applyBtn}
               disabled={!isLegal}
             >
-              Apply Filters
-            </Button>
+              {btnTrans('applyFilter')}
+            </CustomButton>
           </div>
         </DialogActions>
       </Dialog>
@@ -184,18 +191,15 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     resetBtn: {},
     cancelBtn: {
-      marginRight: theme.spacing(4)
+      marginRight: theme.spacing(1),
     },
     applyBtn: {
       backgroundColor: theme.palette.primary.main,
       color: 'white',
     },
-    copyButton: {
-      borderRadius: '0',
-    },
+    copyButton: {},
     expResult: {
       background: '#F9F9F9',
-      borderRadius: '8px',
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
@@ -209,7 +213,6 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     expWrapper: {
       background: '#F9F9F9',
-      borderRadius: '8px',
       minWidth: '480px',
       minHeight: '104px',
       padding: theme.spacing(1.5),

client/src/components/advancedSearch/Filter.tsx

@@ -6,7 +6,7 @@ import {
   Chip,
   Tooltip,
 } from '@material-ui/core';
-import FilterListIcon from '@material-ui/icons/FilterList';
+import icons from '@/components/icons/Icons';
 import { generateIdByHash } from '@/utils/Common';
 import AdvancedDialog from './Dialog';
 import { FilterProps, ConditionData } from './Types';
@@ -32,6 +32,8 @@ const Filter = forwardRef((props: FilterProps, ref) => {
   const [isConditionsLegal, setIsConditionsLegal] = useState(false);
   const [filterExpression, setFilterExpression] = useState('');
 
+  const FilterIcon = icons.filter;
+
   // if fields if empty array, reset all conditions
   useEffect(() => {
     if (fields.length === 0) {
@@ -296,10 +298,10 @@ const Filter = forwardRef((props: FilterProps, ref) => {
       <div className={`${classes.wrapper} ${className}`} {...others}>
         <CustomButton
           disabled={filterDisabled}
-          className={`${classes.afBtn} af-btn`}
+          className={classes.afBtn}
           onClick={handleClickOpen}
+          startIcon={<FilterIcon />}
         >
-          <FilterListIcon />
           {showTitle ? title : ''}
         </CustomButton>
         {showTooltip && initConditions.length > 0 && (

client/src/components/cards/EmptyCard.tsx

@@ -41,16 +41,14 @@ const EmptyCard: FC<EmptyCardProps> = ({
   const classes = useStyles();
 
   return (
-    <Card
-      className={`flex-center card-wrapper ${classes.wrapper} ${wrapperClass}`}
-    >
+    <section className={`flex-center ${classes.wrapper} ${wrapperClass}`}>
       <CardContent>
         {loading && <StatusIcon type={ChildrenStatusType.CREATING} size={40} />}
         {icon}
         <Typography className={classes.text}>{text}</Typography>
         <Typography className={classes.subText}>{subText}</Typography>
       </CardContent>
-    </Card>
+    </section>
   );
 };
 

client/src/components/code/CodeBlock.tsx

@@ -10,7 +10,6 @@ const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     position: 'relative',
     padding: theme.spacing(3),
-    borderRadius: 8,
     backgroundColor: '#fff',
     color: '#454545',
   },

client/src/components/code/CodeView.tsx

@@ -13,7 +13,6 @@ const getStyles = makeStyles((theme: Theme) => ({
 
     padding: theme.spacing(4),
     backgroundColor: theme.palette.attuDark.main,
-    borderRadius: 8,
     display: 'flex',
     flexDirection: 'column',
     color: '#fff',

client/src/components/customDialog/CustomDialog.tsx

@@ -17,7 +17,6 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     paper: {
       minWidth: 480,
-      borderRadius: 8,
       padding: 0,
 
       backgroundColor: 'transparent',

client/src/components/customDialog/DialogTemplate.tsx

@@ -22,7 +22,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   block: {
-    borderRadius: 8,
     backgroundColor: '#fff',
   },
   dialog: {

client/src/components/customInput/SearchInput.tsx

@@ -11,7 +11,6 @@ const useSearchStyles = makeStyles(theme => ({
   },
   input: {
     backgroundColor: '#fff',
-    borderRadius: '4px',
     padding: theme.spacing(1),
     width: '240px',
     border: '1px solid #e9e9ed',

client/src/components/customProgress/CustomLinearProgress.tsx

@@ -24,7 +24,6 @@ const getProgressStyles = makeStyles((theme: Theme) => ({
 const BorderLinearProgress = withStyles((theme: Theme) => ({
   root: {
     height: 10,
-    borderRadius: 8,
     border: '1px solid #e9e9ed',
     minWidth: 85,
   },
@@ -32,7 +31,6 @@ const BorderLinearProgress = withStyles((theme: Theme) => ({
     backgroundColor: '#fff',
   },
   bar: {
-    borderRadius: 5,
     backgroundColor: theme.palette.primary.main,
   },
 }))(LinearProgress);

client/src/components/customSelector/CustomSelector.tsx

@@ -1,11 +1,26 @@
 import { FC } from 'react';
-import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  makeStyles,
+  Theme,
+} from '@material-ui/core';
 import { CustomSelectorType } from './Types';
 import { generateId } from '../../utils/Common';
 
-/**
- *  label: We may need label lowecase or capitalize, so we cant control css inside.
- * */
+const getStyles = makeStyles((theme: Theme) => ({
+  root: {
+    '& .MuiFilledInput-underline:before': {
+      borderWidth: 1,
+    },
+    '& .MuiFilledInput-underline:after': {
+      borderWidth: 1,
+    },
+  },
+}));
+
 const CustomSelector: FC<CustomSelectorType> = props => {
   const {
     label,
@@ -20,16 +35,22 @@ const CustomSelector: FC<CustomSelectorType> = props => {
     ...others
   } = props;
   const id = generateId('selector');
+  const localClasses = getStyles();
 
   return (
-    <FormControl variant={variant} className={wrapperClass} size={size}>
+    <FormControl
+      variant={variant}
+      className={wrapperClass}
+      size={size}
+      classes={{ ...localClasses }}
+    >
       {label && (
         <InputLabel classes={{ root: labelClass }} htmlFor={id}>
           {label}
         </InputLabel>
       )}
       <Select
-        classes={classes}
+        classes={{ ...classes }}
         {...others}
         value={value}
         onChange={onChange}

client/src/components/customSnackBar/CustomSnackBar.tsx

@@ -18,7 +18,6 @@ function SlideTransition(props: TransitionProps) {
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      borderRadius: '4px',
       maxWidth: '50vh',
       wordBreak: 'break-all'
     },

client/src/components/grid/Grid.tsx

@@ -190,6 +190,8 @@ const AttuGrid: FC<AttuGridType> = props => {
 
       const rowCount = Math.floor(totalHeight / rowHeight);
 
+      console.log('hasToolbar', hasToolbar, showPagination);
+
       // fix loading mask
       setLoadingRowCount(rowCount);
 

client/src/components/grid/LoadingTable.tsx

@@ -6,12 +6,10 @@ const getStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(2),
     paddingTop: 0,
     backgroundColor: '#fff',
-    borderRadius: '4px',
   },
   skeleton: {
     transform: 'scale(1)',
     background: 'linear-gradient(90deg, #f0f4f9 0%, #f9f9f9 50%)',
-    borderRadius: '2px',
   },
   tr: {
     display: 'grid',

client/src/components/grid/Table.tsx

@@ -33,7 +33,6 @@ const useStyles = makeStyles(theme => ({
     },
 
     '&::-webkit-scrollbar-thumb': {
-      borderRadius: '8px',
       backgroundColor: '#eee',
     },
   },

client/src/components/grid/TablePaginationActions.tsx

@@ -1,11 +1,6 @@
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  IconButton,
-  Typography,
-} from '@material-ui/core';
-import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
+import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';
+import CustomButton from '../customButton/CustomButton';
+import icons from '../icons/Icons';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TablePaginationActionsProps } from './Types';
@@ -16,7 +11,6 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       alignItems: 'center',
       flexShrink: 0,
-      marginLeft: theme.spacing(2.5),
     },
     page: {
       display: 'flex',
@@ -27,12 +21,9 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.common.white,
     },
     btn: {
-      width: '24px',
-      height: '24px',
-      border: '1px solid #c4c4c4',
-      borderRadius: '2px 0 0 2px',
-      backgroundColor: 'rgba(0,0,0,0.1)',
-      cursor: 'pointer',
+      paddingLeft: 8,
+      paddingRight: 8,
+      minWidth: '24px',
     },
   })
 );
@@ -41,6 +32,10 @@ const TablePaginationActions = (props: TablePaginationActionsProps) => {
   const classes = useStyles();
   const { count, page, rowsPerPage, onPageChange } = props;
 
+  // icons
+  const NextIcon = icons.next;
+  const PrevIcon = icons.prev;
+
   // i18n
   const { t: commonTrans } = useTranslation();
   const gridTrans = commonTrans('grid');
@@ -59,25 +54,25 @@ const TablePaginationActions = (props: TablePaginationActionsProps) => {
 
   return (
     <div className={classes.root}>
-      <IconButton
+      <CustomButton
         onClick={handleBackButtonClick}
         disabled={page === 0}
         aria-label={gridTrans.prevLabel}
         className={classes.btn}
       >
-        <KeyboardArrowLeft />
-      </IconButton>
+        <PrevIcon />
+      </CustomButton>
       <Typography variant="body2" className={classes.page}>
         {page + 1}
       </Typography>
-      <IconButton
+      <CustomButton
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label={gridTrans.nextLabel}
         className={classes.btn}
       >
-        <KeyboardArrowRight />
-      </IconButton>
+        <NextIcon />
+      </CustomButton>
     </div>
   );
 };

client/src/components/icons/Icons.tsx

@@ -1,20 +1,9 @@
 import React from 'react';
 import { IconsType } from './Types';
+import { SvgIcon } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
-import ClearIcon from '@material-ui/icons/Clear';
-import ReorderIcon from '@material-ui/icons/Reorder';
 import AppsIcon from '@material-ui/icons/Apps';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
 import CancelIcon from '@material-ui/icons/Cancel';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
-import ExpandLess from '@material-ui/icons/ExpandLess';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import DatePicker from '@material-ui/icons/Event';
-import { SvgIcon } from '@material-ui/core';
 import ZillizIcon from '@/assets/icons/attu.svg?react';
 import ConsoleIcon from '@/assets/icons/console.svg?react';
 import KeyIcon from '@/assets/icons/key.svg?react';
@@ -91,7 +80,23 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
       ></path>
     </SvgIcon>
   ),
-  list: (props = {}) => <ReorderIcon {...props} />,
+  list: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14 12.85L1 12.85L1 14.15L14 14.15L14 12.85ZM14 8.85002L1 8.85002L1 10.15L14 10.15L14 8.85002ZM1 4.85003L14 4.85003L14 6.15003L1 6.15002L1 4.85003ZM14 0.850025L1 0.850025L1 2.15002L14 2.15002L14 0.850025Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
   copy: (props = {}) => (
     <SvgIcon
       width="15"
@@ -110,13 +115,75 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
     </SvgIcon>
   ),
   error: (props = {}) => <CancelIcon {...props} />,
-  clear: (props = {}) => <ClearIcon {...props} />,
-  more: (props = {}) => <MoreVertIcon {...props} />,
+  clear: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
   app: (props = {}) => <AppsIcon {...props} />,
-  success: (props = {}) => <CheckCircleIcon {...props} />,
-  expandLess: (props = {}) => <ExpandLess {...props} />,
-  expandMore: (props = {}) => <ExpandMore {...props} />,
-  back: (props = {}) => <ArrowBackIosIcon {...props} />,
+  visible: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
+  invisible: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 10.9999 7.50001 10.9999C6.99965 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.3989 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 9.99991 7.50001 9.99991C10.3078 9.99991 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
+  back: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
   logout: (props = {}) => (
     <SvgIcon
       width="15"
@@ -134,7 +201,23 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
       ></path>
     </SvgIcon>
   ),
-  rightArrow: (props = {}) => <ArrowForwardIosIcon {...props} />,
+  rightArrow: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
   remove: (props = {}) => (
     <SvgIcon
       width="15"
@@ -152,9 +235,39 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
       ></path>
     </SvgIcon>
   ),
-  dropdown: (props = {}) => <ArrowDropDownIcon {...props} />,
-  filter: (props = {}) => <FilterListIcon {...props} />,
-  datePicker: (props = {}) => <DatePicker {...props} />,
+  dropdown: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
+  filter: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM3.5 7.5C3.22386 7.5 3 7.72386 3 8C3 8.27614 3.22386 8.5 3.5 8.5H11.5C11.7761 8.5 12 8.27614 12 8C12 7.72386 11.7761 7.5 11.5 7.5H3.5ZM5.5 11.5C5.22386 11.5 5 11.7239 5 12C5 12.2761 5.22386 12.5 5.5 12.5H9.5C9.77614 12.5 10 12.2761 10 12C10 11.7239 9.77614 11.5 9.5 11.5H5.5Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
   download: (props = {}) => (
     <SvgIcon
       width="15"
@@ -499,6 +612,74 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
       ></path>
     </SvgIcon>
   ),
+  next: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
+  prev: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
+  expand: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
+  github: (props = {}) => (
+    <SvgIcon
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </SvgIcon>
+  ),
 };
 
 export default icons;

client/src/components/icons/Types.ts

@@ -9,8 +9,6 @@ export type IconsType =
   | 'error'
   | 'clear'
   | 'app'
-  | 'more'
-  | 'success'
   | 'zilliz'
   | 'navOverview'
   | 'navCollection'
@@ -18,8 +16,6 @@ export type IconsType =
   | 'navSearch'
   | 'navSystem'
   | 'navPerson'
-  | 'expandLess'
-  | 'expandMore'
   | 'back'
   | 'logout'
   | 'rightArrow'
@@ -34,7 +30,6 @@ export type IconsType =
   | 'refresh'
   | 'filter'
   | 'copyExpression'
-  | 'datePicker'
   | 'download'
   | 'source'
   | 'edit'
@@ -44,4 +39,10 @@ export type IconsType =
   | 'saveAs'
   | 'settings'
   | 'avatar'
-  | 'flush';
+  | 'flush'
+  | 'visible'
+  | 'invisible'
+  | 'next'
+  | 'prev'
+  | 'expand'
+  | 'github';

client/src/components/layout/Header.tsx

@@ -21,7 +21,6 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: 'center',
       color: theme.palette.common.black,
       paddingRight: theme.spacing(1),
-      paddingBottom: theme.spacing(1),
       backgroundColor: '#fff',
       borderBottom: '1px solid #e0e0e0',
     },
@@ -29,8 +28,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingTop: theme.spacing(1),
-      paddingLeft: theme.spacing(2),
+      paddingLeft: theme.spacing(1.5),
       flex: 1,
     },
     navigation: {
@@ -115,7 +113,11 @@ const Header: FC<HeaderType> = props => {
                 const database = e.target.value as string;
                 await useDatabase(database);
                 setDatabase(database);
-                navigate(`/databases/${database}`);
+
+                // if url contains databases, go to the database page
+                if (window.location.pathname.includes('databases')) {
+                  navigate(`/databases/${database}`);
+                }
               }}
               options={dbOptions}
               variant="filled"

client/src/components/menu/CommunityBtn.tsx

@@ -69,7 +69,6 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   block: {
     border: '1px solid #f9f9f9',
-    borderRadius: theme.spacing(1),
     boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
     marginBottom: theme.spacing(3),
     padding: theme.spacing(2),

client/src/components/menu/NavMenu.tsx

@@ -11,7 +11,6 @@ import { NavMenuItem, NavMenuType } from './Types';
 import icons from '../icons/Icons';
 import { useTranslation } from 'react-i18next';
 import Typography from '@material-ui/core/Typography';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 
 const timeout = 150;
 const duration = `${timeout}ms`;
@@ -93,7 +92,6 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     actionIcon: {
       position: 'fixed',
-      borderRadius: '50%',
       backgroundColor: 'white',
       top: '24px',
       transition: theme.transitions.create('all', {
@@ -188,6 +186,7 @@ const NavMenu: FC<NavMenuType> = props => {
   };
 
   const Logo = icons.zilliz;
+  const ExpandIcon = icons.expand;
 
   return (
     <List
@@ -221,7 +220,7 @@ const NavMenu: FC<NavMenuType> = props => {
             [classes.collapseIcon]: !expanded,
           })}
         >
-          <ChevronRightIcon />
+          <ExpandIcon />
         </Button>
         <NestList data={data} />
         <Typography

client/src/components/menu/SimpleMenu.tsx

@@ -10,7 +10,6 @@ import { makeStyles, Theme } from '@material-ui/core';
 const getStyles = makeStyles((theme: Theme) => ({
   menuPaper: {
     boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.08)',
-    borderRadius: '4px',
   },
   menuItem: {
     minWidth: (props: { minWidth: string }) => props.minWidth,

client/src/context/Root.tsx

@@ -49,7 +49,6 @@ export const RootProvider = (props: { children: React.ReactNode }) => {
   const classes = makeStyles({
     paper: {
       minWidth: '300px',
-      borderRadius: '0px',
     },
     paperAnchorRight: {
       width: '40vw',

client/src/i18n/cn/button.ts

@@ -32,6 +32,7 @@ const btnTrans = {
   compact: '压缩(Compact)',
   copyJson: '复制为JSON',
   star: '给我一颗小星星',
+  applyFilter: '应用过滤器',
 
   // tips
   loadColTooltip: '加载Collection',

client/src/i18n/cn/search.ts

@@ -16,6 +16,8 @@ const searchTrans = {
   timeTravelPrefix: '之前的数据',
   dynamicFields: '动态字段',
   collectionNotLoaded: 'Collection 没有加载',
+  advancedFilter: '高级过滤',
+  addCondition: '添加条件',
 };
 
 export default searchTrans;

client/src/i18n/en/button.ts

@@ -32,6 +32,7 @@ const btnTrans = {
   compact: 'Compact',
   copyJson: 'Copy as JSON',
   star: 'Give me a Star',
+  applyFilter: 'Apply Filters',
 
   // tips
   loadColTooltip: 'Load Collection',

client/src/i18n/en/search.ts

@@ -16,6 +16,8 @@ const searchTrans = {
   timeTravelPrefix: 'Data before',
   dynamicFields: 'Dynamic Fields',
   collectionNotLoaded: 'Please load the collection first.',
+  advancedFilter: 'Advanced Filter',
+  addCondition: 'Add Condition',
 };
 
 export default searchTrans;

client/src/pages/collections/Aliases.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import { AliasesProps } from './Types';
 import icons from '@/components/icons/Icons';
-import DeleteIcon from '@material-ui/icons/Delete';
 import CreateAliasDialog from '../dialogs/CreateAliasDialog';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 
@@ -40,6 +39,7 @@ export default function Aliases(props: AliasesProps) {
   const { t: successTrans } = useTranslation('success');
 
   const AddIcon = icons.add;
+  const DeleteIcon = icons.delete;
 
   const handleCreate = (e: React.MouseEvent) => {
     setDialog({

client/src/pages/collections/CreateFields.tsx

@@ -102,12 +102,12 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 type inputType = {
   label: string;
-  value: string | number;
+  value: string | number | null;
   handleChange?: (value: string) => void;
   className?: string;
   inputClassName?: string;
   isReadOnly?: boolean;
-  validate?: (value: string | number) => string;
+  validate?: (value: string | number | null) => string;
   type?: 'number' | 'text';
 };
 

client/src/pages/collections/Types.ts

@@ -40,7 +40,7 @@ export type CreateFieldType =
   | 'number';
 
 export type FieldType = {
-  name: string;
+  name: string | null;
   data_type: DataTypeEnum;
   element_type?: DataTypeEnum;
   is_primary_key: boolean;

client/src/pages/connect/AuthForm.tsx

@@ -24,8 +24,6 @@ import {
   MILVUS_DATABASE,
 } from '@/consts';
 import { CustomRadio } from '@/components/customRadio/CustomRadio';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import GitHubIcon from '@material-ui/icons/GitHub';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -78,14 +76,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     textDecoration: 'none',
     marginRight: theme.spacing(1),
     fontWeight: 500,
-    borderRadius: 4,
     '&:hover': {
       fontWeight: 'bold',
     },
   },
   icon: {
     verticalAlign: '-5px',
-    marginRight: theme.spacing(),
+    marginRight: theme.spacing(1),
   },
 }));
 
@@ -99,6 +96,7 @@ export const AuthForm = (props: any) => {
   const { setDatabase } = useContext(dataContext);
 
   const Logo = icons.zilliz;
+  const GithubIcon = icons.github;
   const { t: commonTrans } = useTranslation();
   const attuTrans = commonTrans('attu');
   const { t: btnTrans } = useTranslation('btn');
@@ -302,11 +300,7 @@ export const AuthForm = (props: any) => {
           target="_blank"
           className={classes.star}
         >
-          <SvgIcon
-            viewBox="0 0 24 24"
-            component={GitHubIcon}
-            className={classes.icon}
-          />
+          <GithubIcon className={classes.icon} />
           {btnTrans('star')}
         </a>
       </section>

client/src/pages/connect/ConnectContainer.tsx

@@ -12,7 +12,6 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
     width: '480px',
     backgroundColor: '#fff',
     boxShadow: '0px 10px 30px rgba(0, 0, 0, 0.1)',
-    borderRadius: '8px',
     padding: theme.spacing(5, 0),
   },
 }));

client/src/pages/dialogs/insert/Import.tsx

@@ -58,7 +58,6 @@ const getStyles = makeStyles((theme: Theme) => ({
       alignItems: 'center',
 
       border: '1px solid #e9e9ed',
-      borderRadius: '4px',
       padding: theme.spacing(1),
 
       backgroundColor: '#fff',

client/src/pages/overview/Overview.tsx

@@ -60,7 +60,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     background: 'rgb(239, 239, 239)',
     padding: theme.spacing(1, 2, 2),
     order: 1,
-    borderRadius: 8,
   },
   sysCard: {
     '& p': {

client/src/pages/overview/collectionCard/CollectionCard.tsx

@@ -149,7 +149,7 @@ const CollectionCard: FC<CollectionCardProps> = ({
 
   return (
     <Card
-      className={`card-wrapper ${classes.wrapper} ${wrapperClass} ${
+      className={`${classes.wrapper} ${wrapperClass} ${
         collection.status === LOADING_STATE.LOADING && classes.loading
       }`}
     >

client/src/pages/overview/statisticsCard/StatisticsCard.tsx

@@ -33,7 +33,7 @@ const StatisticsCard: FC<StatisticsCardProps> = ({
   const classes = useStyles();
 
   return (
-    <Card className={`card-wrapper ${wrapperClass}`}>
+    <Card className={`${wrapperClass}`}>
       <CardContent className={`${classes.wrapper}`}>
         {data.map(item => (
           <div key={item.label}>

client/src/pages/query/Query.tsx

@@ -298,7 +298,7 @@ const Query = () => {
                 }}
                 disabled={!collection.loaded}
                 InputLabelProps={{ shrink: true }}
-                label={collectionTrans('exprPlaceHolder')}
+                label={expression ? ' ' : collectionTrans('exprPlaceHolder')}
                 onKeyDown={e => {
                   if (e.key === 'Enter') {
                     // reset page
@@ -316,7 +316,7 @@ const Query = () => {
               />
               <Filter
                 ref={filterRef}
-                title="Advanced Filter"
+                title={btnTrans('advFilter')}
                 fields={collection.schema.fields.filter(
                   i =>
                     i.data_type !== DataTypeStringEnum.FloatVector &&
@@ -346,8 +346,9 @@ const Query = () => {
                 className="btn"
                 onClick={handleFilterReset}
                 disabled={!collection.loaded}
+                startIcon={<ResetIcon classes={{ root: 'icon' }} />}
               >
-                <ResetIcon classes={{ root: 'icon' }} />
+                {btnTrans('reset')}
               </CustomButton>
               <CustomButton
                 variant="contained"

client/src/pages/query/Styles.ts

@@ -8,7 +8,6 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
   },
   emptyCard: {
     height: '100%',
-    borderRadius: theme.spacing(0, 0, 0.5, 0.5),
     boxShadow: 'none',
   },
   toolbar: {
@@ -18,7 +17,6 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     backgroundColor: 'white',
     padding: theme.spacing(0, 0, 1),
     gap: theme.spacing(2),
-    borderRadius: theme.spacing(0.5, 0.5, 0, 0),
 
     '& .left': {
       display: 'flex',

client/src/pages/search/Styles.ts

@@ -12,11 +12,11 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
     gap: theme.spacing(0),
     width: 360,
     flexShrink: 0,
+    backgroundColor: '#fff',
+    border: '1px solid #e0e0e0',
 
     '& textarea': {
       border: `1px solid ${theme.palette.attuGrey.main}`,
-      borderRadius: theme.spacing(0.5),
-      padding: theme.spacing(0.5, 1),
       marginTop: theme.spacing(0),
       marginBottom: theme.spacing(1),
       overflow: 'scroll',
@@ -61,11 +61,13 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
   },
 
   resultsWrapper: {
+    border: '1px solid #e0e0e0',
+    background: '#fff',
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 0,
-    width: 'calc(100vw - 500px)', // replace 300px with the actual width of your form
-    height: `calc(100vh - 112px)`,
+    width: '100%',
+    padding: theme.spacing(1),
   },
   toolbar: {
     display: 'flex',

client/src/pages/search/VectorSearch.tsx

@@ -358,7 +358,7 @@ const VectorSearch = () => {
 
   return (
     <section className={`page-wrapper ${classes.pageContainer}`}>
-      <Card className={classes.form}>
+      <section className={classes.form}>
         <CardContent className={classes.s1}>
           <div className="wrapper">
             <CustomSelector
@@ -458,7 +458,7 @@ const VectorSearch = () => {
             setParamsDisabled={setParamDisabled}
           />
         </CardContent>
-      </Card>
+      </section>
 
       <section className={classes.resultsWrapper}>
         <section className={classes.toolbar}>
@@ -498,14 +498,17 @@ const VectorSearch = () => {
               onClick={() => {
                 saveCsvAs(searchResult, `search_result_${selectedCollection}`);
               }}
+              startIcon={<ExportIcon classes={{ root: 'icon' }}></ExportIcon>}
             >
-              <ExportIcon classes={{ root: 'icon' }} />
               {btnTrans('export')}
             </CustomButton>
           </div>
           <div className="right">
-            <CustomButton className="btn" onClick={handleReset}>
-              <ResetIcon classes={{ root: 'icon' }} />
+            <CustomButton
+              className="btn"
+              onClick={handleReset}
+              startIcon={<ResetIcon classes={{ root: 'icon' }} />}
+            >
               {btnTrans('reset')}
             </CustomButton>
           </div>
@@ -520,7 +523,7 @@ const VectorSearch = () => {
             rowCount={total}
             primaryKey="rank"
             page={currentPage}
-            rowHeight={43}
+            rowHeight={41}
             onPageChange={handlePageChange}
             rowsPerPage={pageSize}
             setRowsPerPage={handlePageSize}

client/src/pages/systemHealthy/HealthyIndexLegend.tsx

@@ -30,7 +30,6 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   legendIcon: {
     width: '16px',
-    borderRadius: '1px',
   },
   legendText: { marginLeft: '8px', fontWeight: 500, color: '#666' },
 }));

client/src/pages/systemHealthy/SystemHealthyView.tsx

@@ -33,7 +33,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'column',
   },
   mainView: {
-    borderRadius: '8px',
     boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
     display: 'grid',
     gridTemplateColumns: '1fr auto',

client/src/styles/common.css

@@ -21,12 +21,6 @@ fieldset {
 .with-max-content {
   width: max-content;
 }
-.card-wrapper {
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);
-}
-
 /* used for fill remaining height of page */
 .page-wrapper {
   /* set flex basis to make child item height 100% work on Safari */