UI update

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

client/src/i18n/cn/button.ts

@@ -26,7 +26,9 @@ const btnTrans = {
   rename: '重命名',
   duplicate: '复制',
   export: '导出',
-  empty: '清空数据'
+  empty: '清空数据',
+  flush: '落盘(Flush)',
+  compact: '压缩(Compact)',
 };
 
 export default btnTrans;

client/src/i18n/en/button.ts

@@ -26,7 +26,9 @@ const btnTrans = {
   rename: 'Rename',
   duplicate: 'Duplicate',
   export: 'Export',
-  empty: 'Empty'
+  empty: 'Empty',
+  flush: 'Flush',
+  compact: 'Compact',
 };
 
 export default btnTrans;

client/src/pages/database/Database.tsx

@@ -80,7 +80,9 @@ const DatabasePage = () => {
     },
 
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
       onClick: () => {
         setDialog({
           open: true,
@@ -99,7 +101,7 @@ const DatabasePage = () => {
           },
         });
       },
-      label: '',
+      label: btnTrans('drop'),
       disabled: () =>
         selectedDatabase.length === 0 ||
         selectedDatabase.findIndex(v => v.name === 'default') > -1,

client/src/pages/partitions/Partitions.tsx

@@ -173,6 +173,9 @@ const Partitions: FC<{
       icon: 'add',
     },
     {
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
       label: btnTrans('insert'),
       onClick: async () => {
         const collection = await fetchCollectionDetail(collectionName);
@@ -198,10 +201,12 @@ const Partitions: FC<{
        * 2. selected partition quantity shouldn't over 1
        */
       disabled: () => partitions.length === 0 || selectedPartitions.length > 1,
-      btnVariant: 'outlined',
     },
     {
-      type: 'iconBtn',
+      icon: 'delete',
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
       onClick: () => {
         setDialog({
           open: true,
@@ -217,8 +222,7 @@ const Partitions: FC<{
           },
         });
       },
-      label: '',
-      icon: 'delete',
+      label: btnTrans('drop'),
       // can't delete default partition
       disabled: () =>
         selectedPartitions.length === 0 ||

client/src/pages/preview/Preview.tsx

@@ -24,6 +24,7 @@ const Preview: FC<{
   const [primaryKey, setPrimaryKey] = useState<string>('');
   const { t: collectionTrans } = useTranslation('collection');
   const { t: searchTrans } = useTranslation('search');
+  const { t: btnTrans } = useTranslation('btn');
 
   const classes = getQueryStyles();
 
@@ -136,12 +137,13 @@ const Preview: FC<{
 
   const toolbarConfigs: ToolBarConfig[] = [
     {
-      type: 'iconBtn',
+      icon: 'refresh',
+      type: 'button',
+      btnVariant: 'text',
       onClick: () => {
         loadData(collectionName);
       },
-      label: collectionTrans('refresh'),
-      icon: 'refresh',
+      label: btnTrans('refresh'),
     },
   ];
 

client/src/pages/query/Query.tsx

@@ -153,7 +153,8 @@ const Query: FC<{
 
   const toolbarConfigs: ToolBarConfig[] = [
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
       onClick: () => {
         setDialog({
           open: true,
@@ -172,18 +173,19 @@ const Query: FC<{
           },
         });
       },
-      label: collectionTrans('delete'),
+      label: btnTrans('delete'),
       icon: 'delete',
       // tooltip: collectionTrans('deleteTooltip'),
       disabledTooltip: collectionTrans('deleteTooltip'),
       disabled: () => selectedData.length === 0,
     },
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
       onClick: () => {
         saveCsvAs(queryResult, 'milvus_query_result.csv');
       },
-      label: '',
+      label: btnTrans('export'),
       icon: 'download',
       tooltip: collectionTrans('downloadTooltip'),
       disabledTooltip: collectionTrans('downloadDisabledTooltip'),

client/src/pages/search/Styles.ts

@@ -40,7 +40,7 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
     },
 
     '& .MuiSelect-root': {
-      minWidth: '116px',
+      width: '116px',
     },
   },
   s2: {

client/src/pages/segments/Segments.tsx

@@ -20,6 +20,8 @@ const Segments: FC<{
 
   const [segments, setSegments] = useState<Segment[]>([]);
   const { t: collectionTrans } = useTranslation('collection');
+  const { t: btnTrans } = useTranslation('btn');
+
   const [loading, setLoading] = useState<boolean>(true);
 
   const fetchSegments = async () => {
@@ -50,15 +52,17 @@ const Segments: FC<{
 
   const toolbarConfigs: ToolBarConfig[] = [
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
       onClick: () => {
         fetchSegments();
       },
-      label: collectionTrans('refresh'),
-      icon: 'refresh',
+      label: btnTrans('refresh'),
+      icon: 'refresh'
     },
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
       onClick: () => {
         setDialog({
           open: true,
@@ -73,11 +77,12 @@ const Segments: FC<{
           },
         });
       },
-      label: collectionTrans('compact'),
+      label: btnTrans('compact'),
       icon: 'compact',
     },
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
       onClick: () => {
         setDialog({
           open: true,
@@ -92,7 +97,7 @@ const Segments: FC<{
           },
         });
       },
-      label: collectionTrans('flush'),
+      label: btnTrans('flush'),
       icon: 'saveAs',
     },
   ];

client/src/pages/user/Roles.tsx

@@ -6,7 +6,7 @@ import { rootContext, dataContext } from '@/context';
 import { useNavigationHook } from '@/hooks';
 import AttuGrid from '@/components/grid/Grid';
 import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
-import { DeleteRoleParams, RoleData, RolesType } from './Types';
+import { DeleteRoleParams, RoleData } from './Types';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { ALL_ROUTER_TYPES } from '@/router/Types';
 import UpdateRoleDialog from './UpdateRoleDialog';
@@ -35,7 +35,7 @@ const Roles = () => {
   const { t: dialogTrans } = useTranslation('dialog');
 
   const fetchRoles = async () => {
-    const roles = (await User.getRoles()) as RolesType;
+    const roles = await User.getRoles();
     setSelectedRole([]);
 
     setRoles(
@@ -110,7 +110,9 @@ const Roles = () => {
     },
 
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
       label: userTrans('editRole'),
       onClick: async () => {
         setDialog({
@@ -137,7 +139,9 @@ const Roles = () => {
     },
 
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
       onClick: () => {
         setDialog({
           open: true,
@@ -155,7 +159,7 @@ const Roles = () => {
           },
         });
       },
-      label: '',
+      label: btnTrans('drop'),
       disabled: () =>
         selectedRole.length === 0 ||
         selectedRole.findIndex(v => v.name === 'admin') > -1 ||

client/src/pages/user/User.tsx

@@ -125,7 +125,9 @@ const Users = () => {
     },
 
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
       label: userTrans('editRole'),
       onClick: async () => {
         setDialog({
@@ -154,7 +156,9 @@ const Users = () => {
     },
 
     {
-      type: 'iconBtn',
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
       onClick: () => {
         setDialog({
           open: true,
@@ -171,7 +175,7 @@ const Users = () => {
           },
         });
       },
-      label: '',
+      label: btnTrans('drop'),
       disabled: () =>
         selectedUser.length === 0 ||
         selectedUser.findIndex(v => v.name === 'root') > -1,