chore: Remove makeStyles and use sx prop for styling in dialogs (#882)

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

client/src/pages/dialogs/CompactDialog.tsx

@@ -1,25 +1,14 @@
 import { FC, useContext } from 'react';
-import { Typography, Theme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import { SegmentService } from '@/http';
-import { makeStyles } from '@mui/styles';
 import type { CompactDialogProps } from './Types';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    margin: '8px 0 16px 0',
-    maxWidth: '500px',
-  },
-  dialog: {},
-}));
-
 const CompactDialog: FC<CompactDialogProps> = props => {
   const { cb, collectionName } = props;
 
-  const classes = useStyles();
-
   const { handleCloseDialog } = useContext(rootContext);
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: collectionTrans } = useTranslation('collection');
@@ -36,7 +25,6 @@ const CompactDialog: FC<CompactDialogProps> = props => {
 
   return (
     <DialogTemplate
-      dialogClass={classes.dialog}
       title={dialogTrans('compact', {
         type: collectionName,
       })}
@@ -46,7 +34,7 @@ const CompactDialog: FC<CompactDialogProps> = props => {
           <Typography
             variant="body1"
             component="p"
-            className={classes.desc}
+            sx={{ margin: '8px 0 16px 0', maxWidth: '500px' }}
             dangerouslySetInnerHTML={{
               __html: collectionTrans('compactDialogInfo'),
             }}

client/src/pages/dialogs/CreateAliasDialog.tsx

@@ -1,22 +1,15 @@
 import { FC, useContext, useMemo, useState } from 'react';
-import { Typography, Theme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import CustomInput from '@/components/customInput/CustomInput';
 import { formatForm } from '@/utils';
 import { useFormValidation } from '@/hooks';
-import { makeStyles } from '@mui/styles';
 import type { ITextfieldConfig } from '@/components/customInput/Types';
 import type { CollectionObject } from '@server/types';
 import { CollectionService } from '@/http';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    margin: '8px 0 16px 0',
-  },
-}));
-
 export interface CreateAliasProps {
   collection: CollectionObject;
   cb?: (collection: CollectionObject) => void;
@@ -31,8 +24,6 @@ const CreateAliasDialog: FC<CreateAliasProps> = props => {
     alias: '',
   });
 
-  const classes = useStyles();
-
   const checkedForm = useMemo(() => {
     const { alias } = form;
     return formatForm({ alias });
@@ -85,7 +76,11 @@ const CreateAliasDialog: FC<CreateAliasProps> = props => {
       handleClose={handleCloseDialog}
       children={
         <>
-          <Typography variant="body1" component="p" className={classes.desc}>
+          <Typography
+            variant="body1"
+            component="p"
+            sx={{ margin: '8px 0 16px 0' }}
+          >
             {collectionTrans('aliasInfo')}
           </Typography>
           <CustomInput

client/src/pages/dialogs/CreateDatabaseDialog.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import { FC, useMemo, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
@@ -8,15 +7,8 @@ import { useFormValidation } from '@/hooks';
 import { formatForm } from '@/utils';
 import { CreateDatabaseParams } from '@/http';
 import { dataContext, rootContext } from '@/context';
-import { makeStyles } from '@mui/styles';
 import { DatabaseService } from '@/http';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  input: {
-    margin: theme.spacing(3, 0, 0.5),
-  },
-}));
-
 export interface CreateDatabaseProps {
   onCreate?: () => void;
 }
@@ -45,8 +37,6 @@ const CreateDatabaseDialog: FC<CreateDatabaseProps> = ({ onCreate }) => {
   }, [form]);
   const { validation, checkIsValid, disabled } = useFormValidation(checkedForm);
 
-  const classes = useStyles();
-
   const handleInputChange = (key: 'db_name', value: string) => {
     setForm(v => ({ ...v, [key]: value }));
   };
@@ -57,7 +47,7 @@ const CreateDatabaseDialog: FC<CreateDatabaseProps> = ({ onCreate }) => {
       key: 'db_name',
       onChange: (value: string) => handleInputChange('db_name', value),
       variant: 'filled',
-      className: classes.input,
+      sx: { margin: theme => theme.spacing(3, 0, 0.5) },
       placeholder: databaseTrans('database'),
       fullWidth: true,
       validations: [

client/src/pages/dialogs/CreatePartitionDialog.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import { FC, useMemo, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
@@ -11,20 +10,11 @@ import { PartitionService } from '@/http';
 import { PartitionCreateProps } from './Types';
 import { PartitionManageParam } from '../databases/collections/partitions/Types';
 import { ManageRequestMethods } from '@/consts';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  input: {
-    margin: theme.spacing(3, 0, 0.5),
-  },
-}));
 
 const CreatePartition: FC<PartitionCreateProps> = ({
   onCreate,
   collectionName,
 }) => {
-  const classes = useStyles();
-
   const { handleCloseDialog } = useContext(rootContext);
   const { t: partitionTrans } = useTranslation('partition');
   const { t: btnTrans } = useTranslation('btn');
@@ -48,7 +38,7 @@ const CreatePartition: FC<PartitionCreateProps> = ({
     key: 'name',
     fullWidth: true,
     onChange: handleInputChange,
-    className: classes.input,
+    sx: { margin: theme => theme.spacing(3, 0, 0.5) },
     validations: [
       {
         rule: 'require',

client/src/pages/dialogs/DuplicateCollectionDialog.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useMemo, useState } from 'react';
-import { Typography, Theme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
@@ -7,20 +7,9 @@ import CustomInput from '@/components/customInput/CustomInput';
 import { formatForm } from '@/utils';
 import { useFormValidation } from '@/hooks';
 import { ITextfieldConfig } from '@/components/customInput/Types';
-import { makeStyles } from '@mui/styles';
 import type { CollectionObject } from '@server/types';
 import { CollectionService } from '@/http';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    width: theme.spacing(48),
-  },
-  desc: {
-    margin: '8px 0 16px 0',
-    color: theme.palette.text.secondary,
-  },
-}));
-
 export interface DuplicateCollectionDialogProps {
   collection: CollectionObject;
   collections: CollectionObject[];
@@ -35,8 +24,6 @@ const DuplicateCollectionDialog: FC<DuplicateCollectionDialogProps> = props => {
     duplicate: `${collection.collection_name}_duplicate`,
   });
 
-  const classes = useStyles();
-
   const checkedForm = useMemo(() => {
     const { duplicate } = form;
     return formatForm({ duplicate });
@@ -109,14 +96,21 @@ const DuplicateCollectionDialog: FC<DuplicateCollectionDialogProps> = props => {
 
   return (
     <DialogTemplate
-      dialogClass={classes.wrapper}
+      sx={{ width: theme => theme.spacing(48) }}
       title={dialogTrans('duplicateTitle', {
         type: collection.collection_name,
       })}
       handleClose={handleCloseDialog}
       children={
         <>
-          <Typography variant="body1" component="p" className={classes.desc}>
+          <Typography
+            variant="body1"
+            component="p"
+            sx={{
+              margin: '8px 0 16px 0',
+              color: theme => theme.palette.text.secondary,
+            }}
+          >
             {dialogTrans('duplicateCollectionInfo')}
           </Typography>
           <CustomInput

client/src/pages/dialogs/EditMmapDialog.tsx

@@ -1,7 +1,6 @@
 import { FC, useContext, useState } from 'react';
 import {
   Typography,
-  Theme,
   Table,
   TableBody,
   TableCell,
@@ -15,40 +14,9 @@ import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import { CollectionService } from '@/http';
-import { makeStyles } from '@mui/styles';
 import { CollectionObject, MmapChanges } from '@server/types';
 import { findKeyValue } from '@/utils';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    margin: '8px 0 16px 0',
-    fontSize: '14px',
-  },
-  collection: {
-    margin: '8px 0 0 0',
-    fontSize: '13px',
-    fontWeight: 800,
-  },
-  dialog: {
-    minWidth: '600px',
-    maxWidth: '800px',
-  },
-  table: {
-    marginTop: theme.spacing(0),
-    '& th': {
-      fontWeight: 'bold',
-    },
-  },
-  fieldName: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  fieldType: {
-    color: theme.palette.text.secondary,
-    fontSize: '0.8rem',
-  },
-}));
-
 interface EditMmapProps {
   collection: CollectionObject;
   cb?: () => void;
@@ -67,8 +35,6 @@ interface FieldMmapState {
 const EditMmapDialog: FC<EditMmapProps> = props => {
   const { collection, cb } = props;
 
-  const classes = useStyles();
-
   const { handleCloseDialog, openSnackBar } = useContext(rootContext);
   const { fetchCollection } = useContext(dataContext);
 
@@ -191,18 +157,30 @@ const EditMmapDialog: FC<EditMmapProps> = props => {
 
   return (
     <DialogTemplate
-      dialogClass={classes.dialog}
+      sx={{
+        minWidth: '600px',
+        maxWidth: '800px',
+      }}
       title={dialogTrans('manageMmapTitle', {
         type: collection.collection_name,
       })}
       handleClose={handleCloseDialog}
       children={
         <Box>
-          <p
-            className={classes.desc}
+          <Typography
+            variant="body2"
+            sx={{ margin: '8px 0 16px 0', fontSize: '14px' }}
             dangerouslySetInnerHTML={{ __html: dialogTrans('editMmapInfo') }}
-          ></p>
-          <div className={classes.collection}>
+          />
+          <Box
+            sx={{
+              margin: '8px 0 0 0',
+              fontSize: '13px',
+              fontWeight: 800,
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
             {collectionTrans('collectionMMapSettingsLabel')}
             <Switch
               checked={pendingCollectionMmap}
@@ -210,10 +188,16 @@ const EditMmapDialog: FC<EditMmapProps> = props => {
                 setPendingCollectionMmap(e.target.checked);
               }}
               color="primary"
+              sx={{ ml: 1 }}
             />
-          </div>
+          </Box>
           <br />
-          <Table className={classes.table}>
+          <Table
+            sx={{
+              marginTop: 0,
+              '& th': { fontWeight: 'bold' },
+            }}
+          >
             <TableHead>
               <TableRow>
                 <TableCell>{collectionTrans('fieldName')}</TableCell>
@@ -225,9 +209,14 @@ const EditMmapDialog: FC<EditMmapProps> = props => {
               {fieldsState.map(field => (
                 <TableRow key={field.id}>
                   <TableCell>
-                    <Box className={classes.fieldName}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                       <span>{field.name}</span>
-                      <span className={classes.fieldType}>
+                      <span
+                        style={{
+                          color: 'rgba(0,0,0,0.6)',
+                          fontSize: '0.8rem',
+                        }}
+                      >
                         {field.dataType}
                       </span>
                     </Box>

client/src/pages/dialogs/EditPropertyDialog.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useMemo, useState } from 'react';
-import { Typography, Theme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
@@ -8,17 +8,10 @@ import { formatForm } from '@/utils';
 import { IForm, useFormValidation } from '@/hooks';
 import { ITextfieldConfig } from '@/components/customInput/Types';
 import { Property } from '@/consts';
-import { makeStyles } from '@mui/styles';
 import { DatabaseService } from '@/http';
 import type { CollectionObject } from '@server/types';
 import { CollectionService } from '@/http';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    margin: '8px 0 16px 0',
-  },
-}));
-
 export interface EditPropertyProps {
   target: CollectionObject | string;
   type: 'collection' | 'database';
@@ -36,8 +29,6 @@ const EditPropertyDialog: FC<EditPropertyProps> = props => {
     value: property.value,
   });
 
-  const classes = useStyles();
-
   const checkedForm = useMemo(() => {
     return formatForm(form);
   }, [form]);
@@ -113,7 +104,11 @@ const EditPropertyDialog: FC<EditPropertyProps> = props => {
       handleClose={handleCloseDialog}
       children={
         <>
-          <Typography variant="body1" component="p" className={classes.desc}>
+          <Typography
+            variant="body1"
+            component="p"
+            sx={{ margin: '8px 0 16px 0' }} // 用 sx 替代 className
+          >
             <code>
               <b>{property.key}</b>
             </code>

client/src/pages/dialogs/FlushDialog.tsx

@@ -1,25 +1,14 @@
 import { FC, useContext } from 'react';
-import { Typography, Theme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import { DataService } from '@/http';
-import { makeStyles } from '@mui/styles';
 import type { FlushDialogProps } from './Types';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    margin: '8px 0 16px 0',
-    maxWidth: '500px',
-  },
-  dialog: {},
-}));
-
 const FlushDialog: FC<FlushDialogProps> = props => {
   const { cb, collectionName } = props;
 
-  const classes = useStyles();
-
   const { handleCloseDialog } = useContext(rootContext);
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: btnTrans } = useTranslation('btn');
@@ -35,7 +24,6 @@ const FlushDialog: FC<FlushDialogProps> = props => {
 
   return (
     <DialogTemplate
-      dialogClass={classes.dialog}
       title={dialogTrans('flush', {
         type: collectionName,
       })}
@@ -45,7 +33,7 @@ const FlushDialog: FC<FlushDialogProps> = props => {
           <Typography
             variant="body1"
             component="p"
-            className={classes.desc}
+            sx={{ margin: '8px 0 16px 0', maxWidth: '500px' }}
             dangerouslySetInnerHTML={{
               __html: dialogTrans('flushDialogInfo'),
             }}

client/src/pages/dialogs/LoadCollectionDialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useContext, useMemo } from 'react';
-import { Typography, Theme, Switch, FormControlLabel } from '@mui/material';
+import { Typography, Switch, FormControlLabel } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authContext, rootContext, dataContext } from '@/context';
 import { MilvusService } from '@/http';
@@ -12,34 +12,14 @@ import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import icons from '@/components/icons/Icons';
 import type { CollectionObject } from '@server/types';
-import { makeStyles } from '@mui/styles';
 import { CollectionService } from '@/http';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    marginBottom: theme.spacing(2),
-    maxWidth: 480,
-  },
-  replicaDesc: {
-    marginBottom: theme.spacing(2),
-    maxWidth: 480,
-  },
-  toggle: {
-    marginBottom: theme.spacing(2),
-  },
-  icon: {
-    fontSize: '14px',
-    marginLeft: theme.spacing(0.5),
-  },
-}));
-
 const LoadCollectionDialog = (props: {
   collection: CollectionObject;
   onLoad?: (collection: CollectionObject) => void;
   isModifyReplica?: boolean;
 }) => {
   const { fetchCollection } = useContext(dataContext);
-  const classes = useStyles();
   const { collection, onLoad, isModifyReplica } = props;
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: collectionTrans } = useTranslation('collection');
@@ -195,7 +175,11 @@ const LoadCollectionDialog = (props: {
       handleClose={handleCloseDialog}
       children={
         <>
-          <Typography variant="body1" component="p" className={classes.desc}>
+          <Typography
+            variant="body1"
+            component="p"
+            sx={{ marginBottom: 2, maxWidth: 480 }}
+          >
             {collectionTrans(isModifyReplica ? 'replicaDes' : 'loadContent')}
           </Typography>
           {enableRelica ? (
@@ -208,11 +192,11 @@ const LoadCollectionDialog = (props: {
                   <CustomToolTip title={collectionTrans('replicaDes')}>
                     <>
                       {collectionTrans('enableRepica')}
-                      <QuestionIcon classes={{ root: classes.icon }} />
+                      <QuestionIcon sx={{ fontSize: 14, ml: 0.5 }} />
                     </>
                   </CustomToolTip>
                 }
-                className={classes.toggle}
+                sx={{ marginBottom: 2 }}
               />
             </>
           ) : null}

client/src/pages/dialogs/ReleaseCollectionDialog.tsx

@@ -1,28 +1,17 @@
 import { useContext, useState } from 'react';
-import { Typography, Theme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import { rootContext, dataContext } from '@/context';
-import { makeStyles } from '@mui/styles';
 import type { CollectionObject } from '@server/types';
 import { CollectionService } from '@/http';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    margin: '8px 0 16px 0',
-    maxWidth: 480,
-    color: theme.palette.text.secondary,
-  },
-}));
-
 const ReleaseCollectionDialog = (props: {
   collection: CollectionObject;
   onRelease?: (collection: CollectionObject) => void;
 }) => {
   const { fetchCollection } = useContext(dataContext);
 
-  const classes = useStyles();
-
   const { collection, onRelease } = props;
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: btnTrans } = useTranslation('btn');
@@ -69,7 +58,15 @@ const ReleaseCollectionDialog = (props: {
       handleClose={handleCloseDialog}
       children={
         <>
-          <Typography variant="body1" component="p" className={classes.desc}>
+          <Typography
+            variant="body1"
+            component="p"
+            sx={{
+              margin: '8px 0 16px 0',
+              maxWidth: 480,
+              color: (theme) => theme.palette.text.secondary,
+            }}
+          >
             {dialogTrans('releaseContent', {
               type: collection.collection_name,
             })}

client/src/pages/dialogs/RenameCollectionDialog.tsx

@@ -1,23 +1,15 @@
 import { FC, useContext, useMemo, useState } from 'react';
-import { Typography, Theme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import { formatForm } from '@/utils';
 import { useFormValidation } from '@/hooks';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import CustomInput from '@/components/customInput/CustomInput';
-import { makeStyles } from '@mui/styles';
 import type { ITextfieldConfig } from '@/components/customInput/Types';
 import type { CollectionObject } from '@server/types';
 import { CollectionService } from '@/http';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  desc: {
-    margin: '8px 0 16px 0',
-    color: theme.palette.text.secondary,
-  },
-}));
-
 export interface RenameCollectionProps {
   collection: CollectionObject;
   cb?: (collectionName: string) => void;
@@ -29,8 +21,6 @@ const RenameCollectionDialog: FC<RenameCollectionProps> = props => {
     new_collection_name: '',
   });
 
-  const classes = useStyles();
-
   const checkedForm = useMemo(() => {
     const { new_collection_name } = form;
     return formatForm({ new_collection_name });
@@ -92,7 +82,14 @@ const RenameCollectionDialog: FC<RenameCollectionProps> = props => {
       handleClose={handleCloseDialog}
       children={
         <>
-          <Typography variant="body1" component="p" className={classes.desc}>
+          <Typography
+            variant="body1"
+            component="p"
+            sx={{
+              margin: '8px 0 16px 0',
+              color: theme => theme.palette.text.secondary,
+            }}
+          >
             {collectionTrans('newNameInfo')}
           </Typography>
           <CustomInput