delete useless code and format i18n

client/src/components/grid/Grid.tsx

@@ -73,8 +73,11 @@ const userStyle = makeStyles(theme => ({
 
 const MilvusGrid: FC<MilvusGridType> = props => {
   const classes = userStyle();
-  const { t } = useTranslation();
-  const gridTrans = t('grid') as any;
+
+  // i18n
+  const { t: commonTrans } = useTranslation();
+  const gridTrans = commonTrans('grid', { returnObjects: true });
+
   const {
     rowCount = 10,
     rowsPerPage = 5,

client/src/components/grid/Table.tsx

@@ -15,6 +15,7 @@ import { stableSort, getComparator } from './Utils';
 import ActionBar from './ActionBar';
 import LoadingTable from './LoadingTable';
 import CopyButton from '../advancedSearch/CopyButton';
+import { useTranslation } from 'react-i18next';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -137,6 +138,9 @@ const EnhancedTable: FC<TableType> = props => {
 
   const containerRef = useRef(null);
 
+  const { t: commonTrans } = useTranslation();
+  const copyTrans = commonTrans('copy', { returnObjects: true });
+
   const handleRequestSort = (event: any, property: string) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
@@ -317,7 +321,7 @@ const EnhancedTable: FC<TableType> = props => {
 
                               {needCopy && row[colDef.id] && (
                                 <CopyButton
-                                  label="copy button"
+                                  label={copyTrans.label}
                                   value={row[colDef.id]}
                                   className={classes.copyBtn}
                                 />

client/src/components/grid/TablePaginationActions.tsx

@@ -40,8 +40,10 @@ const useStyles = makeStyles((theme: Theme) =>
 const TablePaginationActions = (props: TablePaginationActionsProps) => {
   const classes = useStyles();
   const { count, page, rowsPerPage, onChangePage } = props;
-  const { t } = useTranslation();
-  const gridTrans = t('grid') as any;
+
+  // i18n
+  const { t: commonTrans } = useTranslation();
+  const gridTrans = commonTrans('grid', { returnObjects: true });
 
   const handleBackButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>

client/src/components/layout/GlobalToolbar.tsx

@@ -1,105 +0,0 @@
-import { useContext } from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  // Divider
-} from '@material-ui/core';
-import icons from '../icons/Icons';
-// import CustomButton from '../customButton/CustomButton';
-import SimpleMenu from '../menu/SimpleMenu';
-import { useTranslation } from 'react-i18next';
-import { GlobalCreateType } from './Types';
-import { StatusEnum } from '../status/Types';
-// import { rootContext } from '../../context/Root';
-// import GlobalSearch from './GlobalSearch';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      background: theme.palette.common.white,
-      marginBottom: theme.spacing(3),
-      marginTop: theme.spacing(3),
-      backgroundColor: 'transparent',
-    },
-    buttonWrapper: {
-      boxSizing: 'border-box',
-      padding: theme.spacing(1, 2.5),
-      backgroundColor: theme.palette.common.white,
-      width: (props: any) => props.width,
-
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    button: {
-      paddingLeft: theme.spacing(1),
-      color: theme.palette.common.black,
-      marginTop: theme.spacing(1),
-    },
-    btn: {
-      width: '100%',
-      padding: theme.spacing(1, 0),
-      fontSize: '16px',
-      lineHeight: '24px',
-    },
-    breadcrumb: {
-      padding: theme.spacing(1, 2),
-      backgroundColor: theme.palette.common.white,
-      marginLeft: '2px',
-      flex: 1,
-    },
-    divider: {
-      margin: theme.spacing(1, 0),
-    },
-    container: {},
-  })
-);
-
-const GlobalToolbar = (props: { width: String }) => {
-  const { t } = useTranslation();
-  const classes = useStyles(props);
-  const { t: btnTrans } = useTranslation('btn');
-  // const navTrans: any = t('nav');
-
-  // const SearchIcon = icons.search;
-  const AddIcon = icons.add;
-
-  // const handleGlobalSearch = () => {
-  //   openDialog({
-  //     open: true,
-  //     type: 'custom',
-  //     params: {
-  //       component: <GlobalSearch options={top100Films} />,
-  //       containerClass: classes.container,
-  //     },
-  //   });
-  // };
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.buttonWrapper}>
-        <SimpleMenu
-          label={btnTrans('create')}
-          menuItems={[]}
-          buttonProps={{
-            startIcon: <AddIcon />,
-            variant: 'contained',
-            className: classes.btn,
-          }}
-        ></SimpleMenu>
-
-        {/* <CustomButton
-          startIcon={<SearchIcon />}
-          variant="outlined"
-          className={classes.button}
-          onClick={handleGlobalSearch}
-        >
-          {btnTrans('search')}
-        </CustomButton> */}
-      </div>
-    </div>
-  );
-};
-
-export default GlobalToolbar;

client/src/components/layout/Header.tsx

@@ -61,8 +61,10 @@ const Header: FC<HeaderType> = props => {
   const { navInfo } = useContext(navContext);
   const { address, setAddress } = useContext(authContext);
   const history = useHistory();
-  const { t } = useTranslation();
-  const statusTrans: { [key in string]: string } = t('status');
+  const { t: commonTrans } = useTranslation();
+  const statusTrans = commonTrans('status', {
+    returnObjects: true,
+  });
   const BackIcon = icons.back;
   const LogoutIcon = icons.logout;
 

client/src/components/menu/NavMenu.tsx

@@ -139,7 +139,6 @@ const useStyles = makeStyles((theme: Theme) =>
     collapseIcon: {
       left: '73px',
     },
-
   })
 );
 
@@ -149,8 +148,8 @@ const NavMenu: FC<NavMenuType> = props => {
   const [expanded, setExpanded] = useState<boolean>(true);
   const [active, setActive] = useState<string>(defaultActive);
 
-  const { t } = useTranslation();
-  const milvusTrans: { [key in string]: string } = t('milvus');
+  const { t: commonTrans } = useTranslation();
+  const milvusTrans = commonTrans('milvus', { returnObjects: true });
 
   useEffect(() => {
     if (defaultActive) {
@@ -176,12 +175,10 @@ const NavMenu: FC<NavMenuType> = props => {
               button
               key={v.label}
               title={v.label}
-              className={
-                clsx(classes.item, {
-                  [className]: className,
-                  [classes.active]: isActive,
-                })
-              }
+              className={clsx(classes.item, {
+                [className]: className,
+                [classes.active]: isActive,
+              })}
               onClick={() => {
                 setActive(v.label);
                 v.onClick && v.onClick();
@@ -192,13 +189,11 @@ const NavMenu: FC<NavMenuType> = props => {
               </ListItemIcon>
 
               <Fade in={expanded} timeout={timeout}>
-                <ListItemText className={classes.itemText}
-                  primary={v.label} />
+                <ListItemText className={classes.itemText} primary={v.label} />
               </Fade>
             </ListItem>
           );
-        })
-        }
+        })}
       </>
     );
   };
@@ -206,22 +201,21 @@ const NavMenu: FC<NavMenuType> = props => {
   const Logo = icons.milvus;
 
   return (
-    <List component="nav" className={
-      clsx(classes.root, {
+    <List
+      component="nav"
+      className={clsx(classes.root, {
         [classes.rootExpand]: expanded,
         [classes.rootCollapse]: !expanded,
-      })
-    }>
+      })}
+    >
       <div>
         <div className={classes.logoWrapper}>
           <Logo
             classes={{ root: classes.logo }}
-            className={
-              clsx({
-                [classes.logoExpand]: expanded,
-                [classes.logoCollapse]: !expanded,
-              })
-            }
+            className={clsx({
+              [classes.logoExpand]: expanded,
+              [classes.logoCollapse]: !expanded,
+            })}
           />
           <Fade in={expanded} timeout={timeout}>
             <Typography variant="h3" className="title">
@@ -230,13 +224,13 @@ const NavMenu: FC<NavMenuType> = props => {
           </Fade>
         </div>
         <Button
-          onClick={() => { setExpanded(!expanded) }}
-          className={
-            clsx(classes.actionIcon, {
-              [classes.expandIcon]: expanded,
-              [classes.collapseIcon]: !expanded,
-            })
-          }
+          onClick={() => {
+            setExpanded(!expanded);
+          }}
+          className={clsx(classes.actionIcon, {
+            [classes.expandIcon]: expanded,
+            [classes.collapseIcon]: !expanded,
+          })}
         >
           <ChevronRightIcon />
         </Button>

client/src/components/status/Status.tsx

@@ -41,8 +41,8 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const Status: FC<StatusType> = props => {
   const { status } = props;
-  const { t } = useTranslation();
-  const statusTrans: { [key in string]: string } = t('status');
+  const { t: commonTrans } = useTranslation();
+  const statusTrans = commonTrans('status', { returnObjects: true });
   const { label, color } = useMemo(() => {
     switch (status) {
       case StatusEnum.unloaded:

client/src/i18n/cn/common.ts

@@ -19,10 +19,12 @@ const commonTrans = {
   },
   copy: {
     copy: 'Copy',
-    copied: 'Copied',
+    copied: 'Copied!',
+    label: 'copy button',
   },
   param: 'Parameter',
   search: 'Search by name',
+  code: 'Code View',
 };
 
 export default commonTrans;

client/src/i18n/en/common.ts

@@ -19,10 +19,12 @@ const commonTrans = {
   },
   copy: {
     copy: 'Copy',
-    copied: 'Copied',
+    copied: 'Copied!',
+    label: 'copy button',
   },
   param: 'Parameter',
   search: 'Search by name',
+  code: 'Code View',
 };
 
 export default commonTrans;

client/src/pages/connect/Connect.tsx

@@ -55,7 +55,7 @@ const Connect = () => {
   const classes = useStyles();
   const { t: commonTrans } = useTranslation();
   const { t: warningTrans } = useTranslation('warning');
-  const milvusTrans: { [key in string]: string } = commonTrans('milvus');
+  const milvusTrans = commonTrans('milvus', { returnObjects: true });
   const { t: btnTrans } = useTranslation('btn');
   const { t: successTrans } = useTranslation('success');