ui: update all table styles (#918)

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

client/src/components/customTabList/CustomTabList.tsx

@@ -82,7 +82,6 @@ const CustomTabList: FC<ITabListProps> = props => {
             flexBasis: 0,
             flexGrow: 1,
             marginTop: 8,
-            overflow: 'hidden',
           }}
         >
           {tab.component}

client/src/components/grid/Grid.tsx

@@ -44,8 +44,8 @@ const AttuGrid: FC<AttuGridType> = props => {
   const {
     rowCount = 20,
     rowsPerPage = 10,
-    tableHeaderHeight = 46,
-    rowHeight = 43,
+    tableHeaderHeight = 43.5,
+    rowHeight = 41,
     pagerHeight = 52,
     primaryKey = 'id',
     showToolbar = false,

client/src/components/grid/Table.tsx

@@ -43,7 +43,7 @@ const EnhancedTable: FC<TableType> = props => {
     order,
     orderBy,
     rowDecorator = () => ({}),
-    rowHeight = 41,
+    rowHeight,
   } = props;
 
   const hasData = rows && rows.length > 0;
@@ -197,7 +197,7 @@ const EnhancedTable: FC<TableType> = props => {
                             sx={
                               [
                                 (theme: Theme) => ({
-                                  minHeight: rowHeight,
+                                  overflow: 'hidden',
                                   borderBottom: `1px solid ${theme.palette.divider}`,
                                   '& p': {
                                     display: 'inline-block',
@@ -209,7 +209,7 @@ const EnhancedTable: FC<TableType> = props => {
                                   },
                                 }),
                                 (theme: Theme) => ({
-                                  padding: theme.spacing(1, 1.5),
+                                  padding: theme.spacing(1),
                                 }),
                                 cellStyleFromDef,
                               ].filter(Boolean) as any
@@ -219,12 +219,50 @@ const EnhancedTable: FC<TableType> = props => {
                               sx={{
                                 display: 'flex',
                                 whiteSpace: 'nowrap',
-                                minHeight: 24,
+                                alignItems: 'center',
+                                minHeight: rowHeight - 16, // 16 is the padding of the table cell
                               }}
                             >
                               {typeof row[colDef.id] !== 'undefined' && (
                                 <>
-                                  {colDef.onClick ? (
+                                  {colDef.formatter ? (
+                                    colDef.onClick ? (
+                                      <Button
+                                        color="primary"
+                                        data-data={row[colDef.id]}
+                                        data-index={index}
+                                        size="small"
+                                        onClick={e => {
+                                          colDef.onClick &&
+                                            colDef.onClick(e, row);
+                                        }}
+                                      >
+                                        <Typography
+                                          component="div"
+                                          variant="body2"
+                                          title={row[colDef.id]}
+                                        >
+                                          {colDef.formatter(
+                                            row,
+                                            row[colDef.id],
+                                            i
+                                          )}
+                                        </Typography>
+                                      </Button>
+                                    ) : (
+                                      <Typography
+                                        component="div"
+                                        title={row[colDef.id]}
+                                        variant="body2"
+                                      >
+                                        {colDef.formatter(
+                                          row,
+                                          row[colDef.id],
+                                          i
+                                        )}
+                                      </Typography>
+                                    )
+                                  ) : colDef.onClick ? (
                                     <Button
                                       color="primary"
                                       data-data={row[colDef.id]}
@@ -235,18 +273,20 @@ const EnhancedTable: FC<TableType> = props => {
                                           colDef.onClick(e, row);
                                       }}
                                     >
-                                      {colDef.formatter ? (
-                                        colDef.formatter(row, row[colDef.id], i)
-                                      ) : (
-                                        <Typography title={row[colDef.id]}>
-                                          {row[colDef.id]}
-                                        </Typography>
-                                      )}
+                                      <Typography
+                                        component="div"
+                                        title={row[colDef.id]}
+                                        variant="body2"
+                                      >
+                                        {row[colDef.id]}
+                                      </Typography>
                                     </Button>
-                                  ) : colDef.formatter ? (
-                                    colDef.formatter(row, row[colDef.id], i)
                                   ) : (
-                                    <Typography title={row[colDef.id]}>
+                                    <Typography
+                                      component="div"
+                                      title={row[colDef.id]}
+                                      variant="body2"
+                                    >
                                       {row[colDef.id]}
                                     </Typography>
                                   )}
@@ -257,7 +297,7 @@ const EnhancedTable: FC<TableType> = props => {
                                       size="small"
                                       sx={theme => ({
                                         '& svg': {
-                                          fontSize: '14px',
+                                          fontSize: '13px',
                                         },
                                         marginLeft: theme.spacing(0.5),
                                       })}

client/src/components/grid/TableHead.tsx

@@ -30,9 +30,10 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
 }));
 
 const StyledTableHeader = styled(Typography)(({ theme }) => ({
-  padding: theme.spacing(1.5),
+  padding: theme.spacing(1.5, 1),
   fontWeight: 500,
   maxHeight: 45,
+  fontSize: 13,
   overflow: 'hidden',
   whiteSpace: 'nowrap',
 }));

client/src/components/grid/Types.ts

@@ -81,7 +81,7 @@ export type TableType = {
   onSelected: (e: React.MouseEvent, row: any) => void;
   isSelected: (data: any[]) => boolean;
   onSelectedAll: (e: React.ChangeEvent) => void;
-  rowHeight?: number;
+  rowHeight: number;
   rows?: any[];
   colDefinitions: ColDefinitionsType[];
   primaryKey: string;

client/src/pages/databases/collections/Aliases.tsx

@@ -103,7 +103,7 @@ export default function Aliases(props: AliasesProps) {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+    <Box sx={{ display: 'flex', gap: 1 }}>
       {aliases.map(a => (
         <Chip
           key={a}
@@ -117,7 +117,6 @@ export default function Aliases(props: AliasesProps) {
           onDelete={() => {
             _onDelete({ collection, alias: a });
           }}
-          sx={{ mb: 0.5 }}
         />
       ))}
       <IconButton

client/src/pages/databases/collections/Collections.tsx

@@ -384,9 +384,7 @@ const Collections = () => {
         </Box>
       ),
       formatter(v) {
-        return (
-          <Typography variant="body1">{formatNumber(v.rowCount)}</Typography>
-        );
+        return formatNumber(v.rowCount);
       },
       getStyle: () => {
         return { minWidth: '100px' };
@@ -406,7 +404,7 @@ const Collections = () => {
         </Box>
       ),
       formatter(v) {
-        return <Typography variant="body1">{v.description || '--'}</Typography>;
+        return v.description || '--';
       },
       getStyle: () => {
         return { minWidth: '120px' };
@@ -418,11 +416,7 @@ const Collections = () => {
       disablePadding: false,
       label: collectionTrans('createdTime'),
       formatter(data) {
-        return (
-          <Typography variant="body1">
-            {new Date(data.createdTime).toLocaleString()}
-          </Typography>
-        );
+        return new Date(data.createdTime).toLocaleString();
       },
       getStyle: () => {
         return { minWidth: '165px' };
@@ -448,11 +442,7 @@ const Collections = () => {
         </Box>
       ),
       formatter(v) {
-        return (
-          <Typography variant="body1" component="div">
-            <Aliases aliases={v.aliases} collection={v} />
-          </Typography>
-        );
+        return <Aliases aliases={v.aliases} collection={v} />;
       },
       getStyle: () => {
         return { minWidth: '100px' };

client/src/pages/databases/collections/partitions/Partitions.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import { useContext, useEffect, useState } from 'react';
 import { useSearchParams, useParams } from 'react-router-dom';
 import Highlighter from 'react-highlight-words';
@@ -181,9 +181,6 @@ const Partitions = () => {
       needCopy: true,
       disablePadding: false,
       label: t('id'),
-      formatter(data) {
-        return <Typography variant="body1">{data.id}</Typography>;
-      },
       getStyle: () => {
         return {
           width: 120,
@@ -199,16 +196,14 @@ const Partitions = () => {
       formatter({ name }) {
         const newName = name === '_default' ? 'Default partition' : name;
         return (
-          <Typography variant="body1">
-            <Highlighter
-              textToHighlight={newName}
-              searchWords={[search]}
-              highlightStyle={{
-                color: '#1976d2',
-                backgroundColor: 'transparent',
-              }}
-            />
-          </Typography>
+          <Highlighter
+            textToHighlight={newName}
+            searchWords={[search]}
+            highlightStyle={{
+              color: '#1976d2',
+              backgroundColor: 'transparent',
+            }}
+          />
         );
       },
       label: t('name'),
@@ -230,7 +225,7 @@ const Partitions = () => {
         </Box>
       ),
       formatter(data) {
-        return <Typography variant="body1">{formatNumber(Number(data.rowCount))}</Typography>;
+        return formatNumber(Number(data.rowCount));
       },
     },
     {
@@ -238,7 +233,7 @@ const Partitions = () => {
       align: 'left',
       disablePadding: false,
       formatter(data) {
-        return <Typography variant="body1">{new Date(Number(data.createdTime)).toLocaleString()}</Typography>;
+        return new Date(Number(data.createdTime)).toLocaleString();
       },
       label: t('createdTime'),
     },

client/src/pages/databases/collections/schema/Schema.tsx

@@ -76,7 +76,7 @@ const Overview = () => {
         return (
           <NameWrapper>
             <Typography
-              variant="body1"
+              variant="body2"
               sx={{
                 color: f.name === '$meta' ? 'secondary.dark' : 'inherit',
                 fontStyle: f.name === '$meta' ? 'italic' : 'inherit',
@@ -181,11 +181,7 @@ const Overview = () => {
       align: 'left',
       disablePadding: false,
       formatter(f) {
-        return (
-          <Typography variant="body1" component="div">
-            <DataTypeChip size="small" label={formatFieldType(f)} />
-          </Typography>
-        );
+        return <DataTypeChip size="small" label={formatFieldType(f)} />;
       },
       label: collectionTrans('fieldType'),
     },
@@ -195,14 +191,10 @@ const Overview = () => {
       disablePadding: false,
       label: collectionTrans('nullable'),
       formatter(f) {
-        return (
-          <Typography variant="body1">
-            {f.nullable ? (
-              <Icons.check sx={{ fontSize: '11px', ml: 0.5 }} />
-            ) : (
-              <Icons.cross2 sx={{ fontSize: '11px', ml: 0.5 }} />
-            )}
-          </Typography>
+        return f.nullable ? (
+          <Icons.check sx={{ fontSize: '11px', ml: 0.5 }} />
+        ) : (
+          <Icons.cross2 sx={{ fontSize: '11px', ml: 0.5 }} />
         );
       },
     },
@@ -212,18 +204,16 @@ const Overview = () => {
       disablePadding: false,
       label: collectionTrans('defaultValue'),
       formatter(f) {
-        return (
-          <Typography variant="body1">{f.default_value || '--'}</Typography>
-        );
+        return f.default_value || '--';
       },
     },
     {
-      id: 'name',
+      id: 'index_name',
       align: 'left',
       disablePadding: true,
       label: indexTrans('indexName'),
       formatter(f) {
-        return <Typography variant="body1">{f.index?.index_name}</Typography>;
+        return f.index?.index_name;
       },
     },
     {
@@ -234,15 +224,13 @@ const Overview = () => {
       notSort: true,
       formatter(f) {
         return (
-          <Typography variant="body1" component="div">
-            <IndexTypeElement
-              field={f}
-              collectionName={collectionName}
-              cb={async () => {
-                await fetchCollection(collectionName);
-              }}
-            />
-          </Typography>
+          <IndexTypeElement
+            field={f}
+            collectionName={collectionName}
+            cb={async () => {
+              await fetchCollection(collectionName);
+            }}
+          />
         );
       },
     },
@@ -253,35 +241,27 @@ const Overview = () => {
       label: indexTrans('param'),
       notSort: true,
       formatter(f) {
-        return (
-          <Typography variant="body1" component="div">
-            {f.index ? (
-              <ParamWrapper>
-                {f.index.indexParameterPairs.length > 0 ? (
-                  f.index.indexParameterPairs.map((p: any) =>
-                    p.value ? (
-                      <div key={p.key + p.value}>
-                        <span className="param">
-                          <Typography variant="body1" className="key">
-                            {`${p.key}:`}
-                          </Typography>
-                          <Typography variant="body1" className="value">
-                            {p.value}
-                          </Typography>
-                        </span>
-                      </div>
-                    ) : (
-                      ''
-                    )
-                  )
+        return f.index ? (
+          <ParamWrapper>
+            {f.index.indexParameterPairs.length > 0 ? (
+              f.index.indexParameterPairs.map((p: any) =>
+                p.value ? (
+                  <div key={p.key + p.value}>
+                    <span className="param">
+                      {`${p.key}:`}
+                      {p.value}
+                    </span>
+                  </div>
                 ) : (
-                  <>--</>
-                )}
-              </ParamWrapper>
+                  ''
+                )
+              )
             ) : (
               <>--</>
             )}
-          </Typography>
+          </ParamWrapper>
+        ) : (
+          <>--</>
         );
       },
     },
@@ -291,7 +271,7 @@ const Overview = () => {
       disablePadding: false,
       label: indexTrans('desc'),
       formatter(f) {
-        return <Typography variant="body1">{f.description || '--'}</Typography>;
+        return f.description || '--';
       },
     },
   ];

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

@@ -156,7 +156,7 @@ const Segments = () => {
       label: collectionTrans('num_rows'),
       getStyle: () => {
         return {
-          minWidth: 74,
+          minWidth: 70,
         };
       },
     },
@@ -170,7 +170,7 @@ const Segments = () => {
       },
       getStyle: () => {
         return {
-          minWidth: 40,
+          minWidth: 35,
         };
       },
     },
@@ -181,7 +181,7 @@ const Segments = () => {
       label: collectionTrans('q_state'),
       getStyle: () => {
         return {
-          minWidth: 80,
+          minWidth: 70,
         };
       },
     },
@@ -233,8 +233,6 @@ const Segments = () => {
         showPagination={true}
         openCheckBox={false}
         page={currentPage}
-        tableHeaderHeight={46}
-        rowHeight={40}
         onPageChange={handlePageChange}
         rowsPerPage={pageSize}
         setRowsPerPage={handlePageSize}

client/src/pages/user/User.tsx

@@ -229,11 +229,7 @@ const Users = () => {
       disablePadding: true,
       label: userTrans('role'),
       formatter(rowData, cellData) {
-        return (
-          <Typography variant="body1">
-            {rowData.username === 'root' ? 'admin' : cellData.join(', ')}
-          </Typography>
-        );
+        return rowData.username === 'root' ? 'admin' : cellData.join(', ');
       },
       getStyle: () => {
         return { width: '80%', maxWidth: '80%' };

client/src/styles/theme.ts

@@ -183,8 +183,8 @@ const typography = {
     lineHeight: 1.5,
   },
   body2: {
-    fontSize: '12px',
-    lineHeight: '16px',
+    fontSize: '13px',
+    lineHeight: 1.5,
   },
   caption: {
     fontSize: '10px',