Merge pull request #155 from zilliztech/fix-grid-auto-height

unify grid row height

client/src/components/advancedSearch/Types.ts

@@ -48,6 +48,7 @@ export interface CopyButtonProps {
   label: string;
   value: string;
   others?: any;
+  size?: 'medium' | 'small' | undefined;
 }
 
 export interface DialogProps {

client/src/components/customButton/CustomIconButton.tsx

@@ -11,7 +11,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     display: 'inline-block',
   },
   iconBtn: {
-    padding: theme.spacing(1),
+    padding: theme.spacing(0.5),
   },
 }));
 

client/src/components/grid/ActionBar.tsx

@@ -5,6 +5,7 @@ import {
   Theme,
   createStyles,
   Button,
+  Typography,
 } from '@material-ui/core';
 import Icons from '../icons/Icons';
 import { ActionBarType } from './Types';
@@ -37,6 +38,10 @@ const useStyles = makeStyles((theme: Theme) =>
         color: '#fff',
       },
     },
+    link: {
+      textDecoration: 'underline',
+      color: theme.palette.common.black,
+    }
   })
 );
 
@@ -73,6 +78,18 @@ const ActionBar: FC<ActionBarType> = props => {
                     ? v.renderIconFn && v.renderIconFn(row)
                     : Icons[v.icon]()}
                 </IconButton>
+              ) : v.linkButton ? (
+                <Typography
+                  component="a"
+                  href="#/users"
+                  className={classes.link}
+                  onClick={e => {
+                    e.stopPropagation();
+                    v.onClick(e, row);
+                  }}
+                >
+                  {v.text}
+                </Typography>
               ) : (
                 <Button
                   aria-label={label || ''}
@@ -80,6 +97,7 @@ const ActionBar: FC<ActionBarType> = props => {
                     e.stopPropagation();
                     v.onClick(e, row);
                   }}
+                  size="small"
                   disabled={v.disabled ? v.disabled(row) : false}
                   classes={{
                     disabled: classes.disabled,

client/src/components/grid/Table.tsx

@@ -1,5 +1,4 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -22,6 +21,7 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
     /* set flex basis to make child item height 100% work on Safari */
     flexBasis: 0,
+    background: '#fff',
 
     // change scrollbar style
     '&::-webkit-scrollbar': {
@@ -137,21 +137,19 @@ const EnhancedTable: FC<TableType> = props => {
   } = props;
   const classes = useStyles({ tableCellMaxWidth });
   const [loadingRowCount, setLoadingRowCount] = useState<number>(0);
-
   const containerRef = useRef<HTMLDivElement | null>(null);
-
   const { t: commonTrans } = useTranslation();
   const copyTrans = commonTrans('copy');
 
   useEffect(() => {
-    // if the type of containerRef is null, set height 57px.
-    let height: number = containerRef.current?.offsetHeight || 57;
-    // table header is 57px. If offsetHeight is smaller than 57px (this might happen when users resize the screen), the count will be negative and will cause an error.
-    if (height < 57) {
-      height = 57;
+    // if the type of containerRef is null, set default height.
+    let height: number =
+      containerRef.current?.offsetHeight || tableHeaderHeight;
+    if (height < tableHeaderHeight) {
+      height = tableHeaderHeight;
     }
-    // table header 57px, loading row 40px
-    let count = Math.floor((height - 57) / 40);
+    // calculate how many rows can be fit in the container
+    const count = Math.floor((height - tableHeaderHeight) / rowHeight);
     setLoadingRowCount(count);
   }, [containerRef]);
 
@@ -160,7 +158,6 @@ const EnhancedTable: FC<TableType> = props => {
       const containerHeight: number = (containerRef.current as any)!
         .offsetHeight;
 
-      // table header default height is 57
       if (rowHeight > 0) {
         const pageSize = Math.floor(
           (containerHeight - tableHeaderHeight) / rowHeight
@@ -272,6 +269,7 @@ const EnhancedTable: FC<TableType> = props => {
                                     color="primary"
                                     data-data={row[colDef.id]}
                                     data-index={index}
+                                    size="small"
                                     onClick={e => {
                                       colDef.onClick && colDef.onClick(e, row);
                                     }}
@@ -289,6 +287,7 @@ const EnhancedTable: FC<TableType> = props => {
                                     color="primary"
                                     data-data={row[colDef.id]}
                                     data-index={index}
+                                    size="small"
                                     onClick={e => {
                                       colDef.onClick && colDef.onClick(e, row);
                                     }}
@@ -305,6 +304,7 @@ const EnhancedTable: FC<TableType> = props => {
                               <CopyButton
                                 label={copyTrans.label}
                                 value={row[colDef.id]}
+                                size="small"
                                 className={classes.copyBtn}
                               />
                             )}

client/src/pages/collections/Types.ts

@@ -128,3 +128,10 @@ export interface AliasesProps {
   onCreate?: Function;
   onDelete?: Function;
 }
+
+export enum TAB_EMUM {
+  'schema',
+  'partition',
+  'data-preview',
+  'data-query',
+}

client/src/pages/preview/Preview.tsx

@@ -9,7 +9,6 @@ import { usePaginationHook } from '../../hooks/Pagination';
 import CopyButton from '../../components/advancedSearch/CopyButton';
 import { ToolBarConfig } from '../../components/grid/Types';
 import CustomToolBar from '../../components/grid/ToolBar';
-import { DataTypeStringEnum } from '../collections/Types';
 import { generateVector } from '../../utils/Common';
 import { DataTypeEnum } from '../../pages/collections/Types';
 

client/src/pages/query/Styles.ts

@@ -56,5 +56,11 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  copyBtn: {},
+  copyBtn: {
+    padding: '4px',
+    width: '16px',
+    height: '16px',
+    position: 'relative',
+    top: '-3px'
+  },
 }));

client/src/pages/search/VectorSearch.tsx

@@ -133,6 +133,7 @@ const VectorSearch = () => {
             align: 'left',
             disablePadding: false,
             label: key,
+            needCopy: primaryKeyField === key
           }))
       : [];
   }, [searchResult, primaryKeyField]);

client/src/pages/user/User.tsx

@@ -1,12 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { UserHttp } from '../../http/User';
 import AttuGrid from '../../components/grid/Grid';
-import {
-  ColDefinitionsType,
-  ToolBarConfig,
-} from '../../components/grid/Types';
+import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
 import {
   CreateUserParams,
   DeleteUserParams,
@@ -20,20 +16,9 @@ import { ALL_ROUTER_TYPES } from '../../router/Types';
 import CreateUser from './Create';
 import UpdateUser from './Update';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  actionButton: {
-    position: 'relative',
-    left: ' -10px',
-    '& .MuiButton-root': {
-      color: theme.palette.primary.main,
-    },
-  },
-}));
-
 const Users = () => {
   useNavigationHook(ALL_ROUTER_TYPES.USER);
 
-  const classes = useStyles();
   const [users, setUsers] = useState<UserData[]>([]);
   const [selectedUser, setSelectedUser] = useState<UserData[]>([]);
   const { setDialog, handleCloseDialog, openSnackBar } =
@@ -153,8 +138,8 @@ const Users = () => {
               },
             });
           },
+          linkButton: true,
           text: 'Update password',
-          className: classes.actionButton,
         },
       ],
     },