upgrade to mui v5

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

client/package.json

@@ -14,11 +14,14 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.28.6",
     "@date-io/dayjs": "1.x",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@json2csv/plainjs": "^7.0.3",
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "4.0.0-alpha.61",
-    "@material-ui/pickers": "^3.3.10",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
+    "@mui/x-tree-view": "^7.12.1",
     "axios": "^1.7.2",
     "codemirror": "^6.0.1",
     "d3": "^7.8.5",

client/src/App.tsx

@@ -1,5 +1,4 @@
-import { MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material';
 import Router from './router/Router';
 import {
   RootProvider,
@@ -9,24 +8,27 @@ import {
   PrometheusProvider,
   SystemProvider,
 } from './context';
+import { theme } from './styles/theme';
 
 function App() {
   return (
-    <AuthProvider>
-      <DataProvider>
-        <RootProvider>
-          <SystemProvider>
-            <PrometheusProvider>
-              <NavProvider>
-                <MuiPickersUtilsProvider utils={DayjsUtils}>
-                  <Router></Router>
-                </MuiPickersUtilsProvider>
-              </NavProvider>
-            </PrometheusProvider>
-          </SystemProvider>
-        </RootProvider>
-      </DataProvider>
-    </AuthProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <AuthProvider>
+          <DataProvider>
+            <RootProvider>
+              <SystemProvider>
+                <PrometheusProvider>
+                  <NavProvider>
+                    <Router></Router>
+                  </NavProvider>
+                </PrometheusProvider>
+              </SystemProvider>
+            </RootProvider>
+          </DataProvider>
+        </AuthProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 }
 

client/src/components/__test__/cards/EmptyCard.spec.tsx

@@ -1,17 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import EmptyCard from '../../cards/EmptyCard';
-import provideTheme from '../utils/provideTheme';
-
-describe('test empty card component', () => {
-  it('renders default state', () => {
-    const emptyText = Math.random().toString();
-    render(
-      provideTheme(
-        <EmptyCard icon={<span className="icon">icon</span>} text={emptyText} />
-      )
-    );
-
-    expect(screen.queryByText('icon')!.className).toEqual('icon');
-    expect(screen.queryByText(emptyText)).not.toBeNull();
-  });
-});

client/src/components/__test__/customButton/CustomButton.spec.tsx

@@ -1,11 +0,0 @@
-import CustomButton from '../../customButton/CustomButton';
-import { render } from '@testing-library/react';
-
-describe('Test CustomButton', () => {
-  test('test button props', () => {
-    const result = render(
-      <CustomButton variant="contained">test</CustomButton>
-    );
-    expect(result.getByText('test').textContent).toBe('test');
-  });
-});

client/src/components/__test__/customButton/CustomIconButton.spec.tsx

@@ -1,28 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import CustomIconButton from '../../customButton/CustomIconButton';
-
-describe('test custom icon button component', () => {
-  it('renders default state', () => {
-    render(
-      <CustomIconButton>
-        <div className="icon">icon</div>
-      </CustomIconButton>
-    );
-
-    expect(screen.getByText('icon')).toHaveClass('icon');
-
-    const tooltip = screen.queryByText('tooltip');
-    expect(tooltip).toBeNull();
-  });
-
-  it('checks tooltip', async () => {
-    render(
-      <CustomIconButton tooltip="tooltip">
-        <div className="icon">icon</div>
-      </CustomIconButton>
-    );
-    // mock hover event
-    fireEvent.mouseOver(screen.getByText('icon'));
-    expect(await screen.findByText('tooltip')).toBeInTheDocument();
-  });
-});

client/src/components/__test__/customDialog/CustomDialog.spec.tsx

@@ -1,93 +0,0 @@
-import { screen, fireEvent, render } from '@testing-library/react';
-import { DialogType } from '@/context';
-import CustomDialog from '../../customDialog/CustomDialog';
-import { vi } from 'vitest';
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: any) => key,
-  }),
-}));
-
-vi.mock('@material-ui/core/Dialog', () => {
-  return {
-    default: (props: any) => {
-      return <div id="dialog-wrapper">{props.children}</div>;
-    },
-  };
-});
-
-vi.mock('@material-ui/core/DialogTitle', () => {
-  return {
-    default: (props: any) => {
-      return <div id="dialog-title">{props.children}</div>;
-    },
-  };
-});
-
-vi.mock('@material-ui/core/DialogContent', () => {
-  return {
-    default: (props: any) => {
-      return <div id="dialog-content">{props.children}</div>;
-    },
-  };
-});
-
-vi.mock('@material-ui/core/DialogActions', () => {
-  return {
-    default: (props: any) => {
-      return <div id="dialog-actions">{props.children}</div>;
-    },
-  };
-});
-
-describe('Test Custom Dialog', () => {
-  it('Test notice dialog ', () => {
-    const handleClose = vi.fn();
-    const handleConfirm = vi.fn();
-
-    const params: DialogType = {
-      open: true,
-      type: 'notice',
-      params: {
-        title: 'delete',
-        confirm: handleConfirm,
-        component: <div>123</div>,
-      },
-    };
-
-    const res = render(
-      <CustomDialog {...params} onClose={handleClose}></CustomDialog>
-    );
-
-    expect(res.getByText(params.params.title!).textContent).toEqual(
-      params.params.title
-    );
-
-    expect(res.getByText('123').textContent).toEqual('123');
-
-    fireEvent.click(screen.getByText('cancel'));
-    fireEvent.click(screen.getByText('confirm'));
-
-    expect(handleClose).toBeCalledTimes(1);
-    expect(handleConfirm).toBeCalledTimes(1);
-  });
-
-  it('Test Custom dialog ', () => {
-    const handleClose = vi.fn();
-
-    const params: DialogType = {
-      open: true,
-      type: 'custom',
-      params: {
-        component: <div>custom</div>,
-      },
-    };
-
-    const res = render(
-      <CustomDialog {...params} onClose={handleClose}></CustomDialog>
-    );
-
-    expect(res.getByText('custom').textContent).toEqual('custom');
-  });
-});

client/src/components/__test__/customDialog/CustomDialogTitle.spec.tsx

@@ -1,20 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import CustomDialogTitle from '../../customDialog/CustomDialogTitle';
-import { vi } from 'vitest';
-
-describe('test custom dialog title component', () => {
-  it('renders default state', () => {
-    const container = render(<CustomDialogTitle>title</CustomDialogTitle>);
-    expect(container.getByText('title')).toBeInTheDocument();
-    expect(container.queryByTestId('clear-icon')).toBeNull();
-  });
-
-  it('checks clear event', () => {
-    const mockClearFn = vi.fn();
-    const container = render(
-      <CustomDialogTitle onClose={mockClearFn}>title</CustomDialogTitle>
-    );
-    fireEvent.click(container.getByTestId('clear-icon'));
-    expect(mockClearFn).toBeCalledTimes(1);
-  });
-});

client/src/components/__test__/customDialog/DeleteDialogTemplate.spec.tsx

@@ -1,51 +0,0 @@
-import { screen, render, fireEvent } from '@testing-library/react';
-import DeleteTemplate from '../../customDialog/DeleteDialogTemplate';
-import provideTheme from '../utils/provideTheme';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '../../../i18n';
-import { vi } from 'vitest';
-
-describe('test delete dialog template component', () => {
-  const mockDeleteFn = vi.fn();
-  const mockCancelFn = vi.fn();
-
-  beforeEach(() => {
-    render(
-      provideTheme(
-        <I18nextProvider i18n={i18n}>
-          <DeleteTemplate
-            title="delete title"
-            text="delete text"
-            label="delete"
-            handleDelete={mockDeleteFn}
-            handleCancel={mockCancelFn}
-          />
-        </I18nextProvider>
-      )
-    );
-  });
-
-  it('renders default state', () => {
-    expect(screen.getByText('delete title')).toBeInTheDocument();
-    expect(screen.getByText('delete text')).toBeInTheDocument();
-  });
-
-  it('checks button disabled status and callback when input value change', () => {
-    // Material Textfield role should be textbox
-    const input = screen.getByRole('textbox');
-    const deleteBtn = screen.getByRole('button', { name: /delete/i });
-    fireEvent.change(input, { target: { value: 'test' } });
-    expect(deleteBtn).toBeDisabled();
-    fireEvent.change(input, { target: { value: 'delete' } });
-    expect(deleteBtn).not.toBeDisabled();
-    fireEvent.click(deleteBtn);
-    expect(mockDeleteFn).toBeCalledTimes(1);
-  });
-
-  it('checks cancel callback', () => {
-    const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-
-    fireEvent.click(cancelBtn);
-    expect(mockCancelFn).toBeCalledTimes(1);
-  });
-});

client/src/components/__test__/customDialog/DialogTemplate.spec.tsx

@@ -1,54 +0,0 @@
-import { screen, render, fireEvent } from '@testing-library/react';
-import DialogTemplate from '../../customDialog/DialogTemplate';
-import provideTheme from '../utils/provideTheme';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '../../../i18n';
-import { vi } from 'vitest';
-
-describe('test dialog template component', () => {
-  const mockCancelFn = vi.fn();
-  const mockConfirmFn = vi.fn();
-
-  it('renders default state and callbacks', () => {
-    render(
-      provideTheme(
-        <I18nextProvider i18n={i18n}>
-          <DialogTemplate
-            title="dialog template"
-            handleClose={mockCancelFn}
-            handleConfirm={mockConfirmFn}
-          >
-            dialog content
-          </DialogTemplate>
-        </I18nextProvider>
-      )
-    );
-
-    expect(screen.getByText('dialog template')).toBeInTheDocument();
-    expect(screen.getByText('dialog content')).toBeInTheDocument();
-
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-    expect(mockCancelFn).toBeCalledTimes(1);
-    fireEvent.click(screen.getByRole('button', { name: /confirm/i }));
-    expect(mockConfirmFn).toBeCalledTimes(1);
-  });
-
-  it('checks confirm button disable', () => {
-    render(
-      provideTheme(
-        <I18nextProvider i18n={i18n}>
-          <DialogTemplate
-            title="dialog template"
-            handleClose={mockCancelFn}
-            handleConfirm={mockConfirmFn}
-            confirmDisabled={true}
-          >
-            dialog content
-          </DialogTemplate>
-        </I18nextProvider>
-      )
-    );
-
-    expect(screen.getByRole('button', { name: /confirm/i })).toBeDisabled();
-  });
-});

client/src/components/__test__/customInput/CustomInput.spec.tsx

@@ -1,167 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import CustomInput from '../../customInput/CustomInput';
-import provideTheme from '../utils/provideTheme';
-import {
-  IAdornmentConfig,
-  IIconConfig,
-  ITextfieldConfig,
-} from '../../customInput/Types';
-import { vi } from 'vitest';
-
-vi.mock('@material-ui/core/FormControl', () => {
-  return (props: any) => {
-    const { children } = props;
-    return <div className="form-control">{children}</div>;
-  };
-});
-
-vi.mock('@material-ui/core/InputLabel', () => {
-  return (props: any) => {
-    return <div className="label">{props.children}</div>;
-  };
-});
-
-vi.mock('@material-ui/core/Input', () => {
-  return (props: any) => {
-    const { type, onBlur, endAdornment } = props;
-    return (
-      <>
-        <div className="type">{type}</div>
-        <input className="input" type={type} onBlur={onBlur} />
-        <div>{endAdornment}</div>
-      </>
-    );
-  };
-});
-
-vi.mock('@material-ui/core/TextField', () => {
-  return (props: any) => {
-    const { helperText, onBlur, onChange, label, className } = props;
-    return (
-      <div className="text-field">
-        <div className="text-class">{className}</div>
-        <div className="text-label">{label}</div>
-        <div className="text-error">{helperText}</div>
-        <input
-          className="text-input"
-          onBlur={onBlur}
-          onChange={onChange}
-          type="text"
-        />
-      </div>
-    );
-  };
-});
-
-vi.mock('@material-ui/core/Grid', () => {
-  return (props: any) => {
-    const { children } = props;
-    return <div className="grid">{children}</div>;
-  };
-});
-
-describe('Test CustomInput', () => {
-  test('test text type input', () => {
-    const handleBlur = vi.fn();
-
-    const mockTextConfig: ITextfieldConfig = {
-      variant: 'standard',
-      label: 'test text',
-      key: 'text',
-      className: 'classname',
-      onBlur: handleBlur,
-    };
-
-    const res = render(
-      <CustomInput
-        type="text"
-        textConfig={mockTextConfig}
-        checkValid={() => true}
-      />
-    );
-
-    expect(res.getAllByText('test text').length).toBe(1);
-    expect(res.getByText('test text').textContent).toBe('test text');
-    expect(
-      res.getByText('test text').parentElement!.classList.contains('classname')
-    ).toBeTruthy();
-
-    const input = res.getByRole('textbox');
-    input.focus();
-    input.blur();
-    expect(handleBlur).toHaveBeenCalledTimes(1);
-  });
-
-  test('test icon type input', () => {
-    const handleChange = vi.fn();
-
-    const mockIconConfig: IIconConfig = {
-      icon: <div className="icon" role="img"></div>,
-      inputType: 'icon',
-      inputConfig: {
-        label: 'icon text',
-        key: 'icon',
-        onChange: handleChange,
-        variant: 'standard',
-      },
-    };
-
-    const res = render(
-      <CustomInput
-        type="icon"
-        iconConfig={mockIconConfig}
-        checkValid={() => true}
-      />
-    );
-
-    // expect(res.getAllByText('.grid').length).toBe(3);
-    expect(res.getAllByRole('img').length).toBe(1);
-    expect(res.getByText('icon text').textContent).toBe('icon text');
-
-    const input = res.getByRole('textbox');
-    fireEvent.change(input, { target: { value: 'trigger change' } });
-    expect(handleChange).toHaveBeenCalledTimes(1);
-  });
-
-  test('test adornmentConfig type input', () => {
-    const mockBlurFunc = vi.fn();
-
-    const mockAdornmentConfig: IAdornmentConfig = {
-      label: 'adornment',
-      icon: <div className="adornment-icon"></div>,
-      isPasswordType: false,
-      key: 'adornment',
-      onInputBlur: mockBlurFunc,
-    };
-
-    const res = render(
-      provideTheme(
-        <CustomInput
-          type="adornment"
-          adornmentConfig={mockAdornmentConfig}
-          checkValid={() => true}
-        />
-      )
-    );
-
-    expect(res.getByText('adornment').textContent).toBe('adornment');
-    expect(res.getAllByRole('icon-button').length).toBe(1);
-
-    const input = res.getByRole('textbox');
-    input.focus();
-    input.blur();
-    expect(mockBlurFunc).toHaveBeenCalledTimes(1);
-  });
-
-  test('test default type input', () => {
-    const mockTextConfig: ITextfieldConfig = {
-      label: 'default',
-      key: 'default',
-      variant: 'standard',
-    };
-
-    const res = render(<CustomInput textConfig={mockTextConfig} />);
-
-    expect(res.getByText('default').textContent).toBe('default');
-  });
-});

client/src/components/__test__/customInput/SearchInput.spec.tsx

@@ -1,76 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import SearchInput from '../../customInput/SearchInput';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '../../../i18n';
-import { vi } from 'vitest';
-
-const mockHistoryPushFn = vi.fn();
-
-vi.mock('react-router-dom', () => ({
-  useHistory: () => ({
-    push: mockHistoryPushFn,
-    location: {
-      search: '',
-    },
-  }),
-}));
-
-// clear the influence of vi.useFakeTimers
-afterEach(() => {
-  vi.useRealTimers();
-});
-
-describe('test search input component', () => {
-  it('renders default state', () => {
-    const mockSearchFn = vi.fn();
-    const container = render(
-      <I18nextProvider i18n={i18n}>
-        <SearchInput searchText="search text" onSearch={mockSearchFn} />
-      </I18nextProvider>
-    );
-
-    // material textfield input role is textbox
-    expect(container.getByRole('textbox')).toBeInTheDocument();
-    expect(container.getByRole('textbox')).toHaveValue('search text');
-  });
-
-  it('checks input value change event', () => {
-    const mockSearchFn = vi.fn();
-    const container = render(
-      <I18nextProvider i18n={i18n}>
-        <SearchInput onSearch={mockSearchFn} />
-      </I18nextProvider>
-    );
-
-    const input = container.getByRole('textbox');
-    fireEvent.change(input, { target: { value: 'search change test' } });
-    expect(input).toHaveValue('search change test');
-    // mock Enter key press event
-    fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 });
-    expect(mockSearchFn).toBeCalledTimes(1);
-    // mock clear icon click event
-    const clearIcon = container.getByTestId('clear-icon');
-    fireEvent.click(clearIcon);
-    expect(input).toHaveValue('');
-  });
-
-  it('checks location change according to search value', () => {
-    const mockSearchFn = vi.fn();
-    // mock setTimeout
-    vi.useFakeTimers();
-
-    const container = render(
-      <I18nextProvider i18n={i18n}>
-        <SearchInput onSearch={mockSearchFn} />
-      </I18nextProvider>
-    );
-
-    const input = container.getByRole('textbox');
-    fireEvent.change(input, { target: { value: 'route' } });
-    expect(mockHistoryPushFn).not.toBeCalled();
-    // fast-forward until all timers have been executed
-    vi.runAllTimers();
-    expect(mockHistoryPushFn).toBeCalled();
-    expect(mockHistoryPushFn).toBeCalledWith({ search: 'search=route' });
-  });
-});

client/src/components/__test__/customSnackBar/CustomSnackBar.spec.tsx

@@ -1,20 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { SnackBarType } from '@/context';
-import CustomSnackBar from '../../customSnackBar/CustomSnackBar';
-import { vi } from 'vitest';
-
-describe('Test Custom Dialog', () => {
-  it('Test Custom dialog ', () => {
-    const params: SnackBarType = {
-      open: true,
-      type: 'success',
-      message: 'test',
-      vertical: 'top',
-      horizontal: 'center',
-      autoHideDuration: 2000,
-    };
-    const handleClose = vi.fn();
-    render(<CustomSnackBar {...params} onClose={handleClose} />);
-    expect(screen.queryByText('test')?.textContent).toEqual(params.message);
-  });
-});

client/src/components/__test__/customTabList/CustomTabList.spec.tsx

@@ -1,32 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import CustomTabList from '../../customTabList/CustomTabList';
-import provideTheme from '../utils/provideTheme';
-
-const mockTabs = [
-  {
-    label: 'tab-1',
-    component: <div>tab 1 content</div>,
-  },
-  {
-    label: 'tab-2',
-    component: <div>tab 2 content</div>,
-  },
-];
-
-describe('test custom tab list component', () => {
-  beforeEach(() => {
-    render(provideTheme(<CustomTabList tabs={mockTabs} />));
-  });
-
-  it('renders default state', () => {
-    expect(screen.getAllByRole('tab').length).toBe(2);
-    // default active tab should be first one
-    expect(screen.getByText('tab 1 content')).toBeInTheDocument();
-  });
-
-  it('checks click tab event', () => {
-    const tab2 = screen.getByText('tab-2');
-    fireEvent.click(tab2);
-    expect(screen.getByText('tab 2 content')).toBeInTheDocument();
-  });
-});

client/src/components/__test__/customToolTip/CustomToolTip.spec.tsx

@@ -1,51 +0,0 @@
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-import CustomToolTip from '../../customToolTip/CustomToolTip';
-import { vi } from 'vitest';
-
-let container: any = null;
-
-vi.mock('@material-ui/core/Tooltip', () => {
-  return {
-    default: (props: any) => {
-      return (
-        <div id="tooltip">
-          <div id="title">{props.title}</div>
-          <div id="placement">{props.placement}</div>
-          {props.children}
-        </div>
-      );
-    },
-  };
-});
-
-describe('Test Tool Tip', () => {
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    unmountComponentAtNode(container);
-    container.remove();
-    container = null;
-  });
-
-  it('Test props ', () => {
-    act(() => {
-      render(
-        <CustomToolTip title="test" placement="right-end">
-          <div id="children">child</div>
-        </CustomToolTip>,
-        container
-      );
-    });
-
-    expect(container.querySelector('#title').textContent).toEqual('test');
-    expect(container.querySelector('#placement').textContent).toEqual(
-      'right-end'
-    );
-
-    expect(container.querySelector('#children').textContent).toEqual('child');
-  });
-});

client/src/components/__test__/grid/Grid.spec.tsx

@@ -1,83 +0,0 @@
-import { render } from '@testing-library/react';
-import AttuGrid from '../../grid/Grid';
-import { ToolBarConfig } from '../../grid/Types';
-import { vi } from 'vitest';
-
-vi.mock('react-i18next', () => {
-  return {
-    useTranslation: () => ({
-      t: () => ({
-        grid: {},
-      }),
-    }),
-  };
-});
-
-vi.mock('react-router-dom', () => {
-  return {
-    useHistory: () => {
-      return {
-        listen: () => () => {},
-        location: {
-          name: '',
-        },
-      };
-    },
-  };
-});
-
-describe('Test Grid index', () => {
-  it('Has Table Data', () => {
-    const res = render(
-      <AttuGrid
-        primaryKey="id"
-        rows={[{}]}
-        colDefinitions={[]}
-        rowCount={10}
-        toolbarConfigs={[]}
-      />
-    );
-
-    expect(res.getAllByRole('table').length).toEqual(1);
-  });
-
-  it('Test title', () => {
-    const title = ['collections', 'vectors'];
-    const res = render(
-      <AttuGrid
-        primaryKey="id"
-        rows={[]}
-        colDefinitions={[]}
-        rowCount={0}
-        toolbarConfigs={[]}
-        title={title}
-      />
-    );
-
-    const breadCrum = res.getAllByRole('breadcrumb');
-    expect(breadCrum.length).toEqual(1);
-    expect(breadCrum[0].textContent).toEqual(`collections›vectors`);
-  });
-
-  it('Test Toolbar ', () => {
-    const ToolbarConfig: ToolBarConfig[] = [
-      {
-        label: 'collection',
-        icon: 'search',
-        onClick: () => {},
-        onSearch: () => {},
-      },
-    ];
-    const res = render(
-      <AttuGrid
-        primaryKey="id"
-        rows={[]}
-        colDefinitions={[]}
-        rowCount={0}
-        toolbarConfigs={ToolbarConfig}
-      />
-    );
-
-    expect(res.getAllByRole('toolbar').length).toEqual(1);
-  });
-});

client/src/components/__test__/grid/IconBtnCell.spec.tsx

@@ -1,55 +0,0 @@
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-import ActionBar from '../../grid/ActionBar';
-import { fireEvent } from '@testing-library/react';
-import { vi } from 'vitest';
-
-let container: any = null;
-
-describe('Test Table Head', () => {
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    unmountComponentAtNode(container);
-    container.remove();
-    container = null;
-  });
-
-  it('Test No Button', () => {
-    act(() => {
-      render(<ActionBar configs={[]} row={{ a: 1 }} />, container);
-    });
-
-    expect(container.querySelectorAll('.icon-btn').length).toEqual(0);
-  });
-
-  it('Test Delete Icon Button', () => {
-    const deleteSpy = vi.fn();
-    const showDialogSpy = vi.fn();
-
-    act(() => {
-      render(
-        <ActionBar
-          row={{ a: 1 }}
-          configs={[
-            { onClick: deleteSpy, icon: 'delete', label: 'delete' },
-            { onClick: showDialogSpy, icon: 'list', label: 'dialog' },
-          ]}
-        />,
-        container
-      );
-    });
-
-    expect(container.querySelectorAll('button').length).toEqual(2);
-    expect(deleteSpy).toBeCalledTimes(0);
-
-    fireEvent.click(container.querySelector('button[aria-label="delete"]'));
-    expect(deleteSpy).toBeCalledTimes(1);
-
-    fireEvent.click(container.querySelector('button[aria-label="dialog"]'));
-    expect(showDialogSpy).toBeCalledTimes(1);
-  });
-});

client/src/components/__test__/grid/LoadingTable.spec.tsx

@@ -1,9 +0,0 @@
-import { render } from '@testing-library/react';
-import LoadingTable from '../../grid/LoadingTable';
-
-describe('Test Table', () => {
-  it('Test Table Loading status', () => {
-    const res = render(<LoadingTable count={2} />);
-    expect(res.getAllByRole('skeleton').length).toBe(2);
-  });
-});

client/src/components/__test__/grid/Table.spec.tsx

@@ -1,85 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import Table from '../../grid/Table';
-import { ColDefinitionsType } from '../../grid/Types';
-import { vi } from 'vitest';
-
-const colDefinitions: ColDefinitionsType[] = [
-  {
-    id: 'id',
-    disablePadding: true,
-    label: 'ID',
-  },
-  {
-    id: 'name',
-    disablePadding: false,
-    label: 'Name',
-  },
-  {
-    id: 'action',
-    disablePadding: false,
-    label: 'Action',
-    showActionCell: true,
-    actionBarConfigs: [
-      {
-        onClick: () => {},
-        icon: 'delete',
-        label: 'delete',
-      },
-    ],
-  },
-];
-
-describe('Test Table', () => {
-  let data: any[] = [
-    { id: 1, name: 'foo' },
-    { id: 2, name: 'bar' },
-    { id: 3, name: 'dede' },
-  ];
-  let onSelected: any = vi.fn();
-  let isSelected: any = vi.fn();
-  let onSelectedAll: any = vi.fn();
-
-  it('Test Basic Table', () => {
-    const res = render(
-      <Table
-        editHeads={[]}
-        selected={[]}
-        onSelected={onSelected}
-        isSelected={isSelected}
-        onSelectedAll={onSelectedAll}
-        rows={data}
-        primaryKey="id"
-        colDefinitions={colDefinitions}
-      ></Table>
-    );
-    expect(res.getAllByRole('checkbox').length).toEqual(4); // check box
-    expect(res.getAllByRole('row').length).toEqual(colDefinitions.length + 1);
-    expect(res.getAllByRole('cell').length).toEqual(
-      (colDefinitions.length + 1) * (data.length + 1)
-    );
-    expect(res.getAllByRole('button').length).toEqual(3);
-    expect(res.getAllByRole('cell')[2].textContent).toEqual(
-      colDefinitions[1].label
-    );
-  });
-
-  it('Test Selected function', () => {
-    const res: any = render(
-      <Table
-        editHeads={[]}
-        selected={[1]}
-        onSelected={onSelected}
-        isSelected={isSelected}
-        onSelectedAll={onSelectedAll}
-        rows={data}
-        primaryKey="id"
-        colDefinitions={colDefinitions}
-      ></Table>
-    );
-
-    const cbx = res.getAllByRole('checkbox')[1];
-    fireEvent.click(cbx);
-    expect(cbx.checked).toBeTruthy();
-    expect(onSelected).toBeCalledTimes(1);
-  });
-});

client/src/components/__test__/grid/TableHead.spec.tsx

@@ -1,88 +0,0 @@
-import TableHead from '../../grid/TableHead';
-import { fireEvent, render } from '@testing-library/react';
-import { vi } from 'vitest';
-
-describe('Test Table Head', () => {
-  // it('Test no checkbox', () => {
-  //   const res = render(
-  //     <TableHead
-  //       colDefinitions={[]}
-  //       numSelected={0}
-  //       order={'desc'}
-  //       orderBy={'id'}
-  //       onSelectAllClick={() => {}}
-  //       handleSort={() => {}}
-  //       rowCount={0}
-  //       openCheckBox={false}
-  //     />
-  //   );
-  //   expect(res.getAllByText('.table-cell').length).toEqual(0);
-  // });
-
-  it('Test checkbox open', () => {
-    const selectAllSpy = vi.fn();
-    const res = render(
-      <div>
-        <TableHead
-          colDefinitions={[]}
-          numSelected={10}
-          order={'desc'}
-          orderBy={'id'}
-          onSelectAllClick={selectAllSpy}
-          handleSort={() => {}}
-          rowCount={10}
-          openCheckBox={true}
-        />
-      </div>
-    );
-    // screen.debug();
-    const checkboxes: any = res.getAllByRole('checkbox');
-    expect(checkboxes.length).toEqual(1);
-    fireEvent.click(checkboxes[0]);
-    expect(selectAllSpy).toBeCalledTimes(1);
-    expect(checkboxes[0].checked).toBe(true);
-  });
-
-  it('Test header cells', () => {
-    const onRequestSortSpy = vi.fn();
-    const colDefinitions = [
-      {
-        id: 'id',
-        numeric: false,
-        disablePadding: true,
-        label: 'id',
-      },
-      {
-        id: 'name',
-        numeric: false,
-        disablePadding: true,
-        label: 'name',
-      },
-    ];
-    const res = render(
-      <TableHead
-        colDefinitions={colDefinitions}
-        numSelected={10}
-        order={'desc'}
-        orderBy={'id'}
-        onSelectAllClick={() => {}}
-        handleSort={onRequestSortSpy}
-        rowCount={10}
-        openCheckBox={false}
-      />
-    );
-
-    const headerCells = res.getAllByRole('cell');
-    expect(headerCells.length).toEqual(colDefinitions.length);
-
-    expect(headerCells[0].textContent).toContain('id');
-    expect(headerCells[0].textContent).toContain('sorted descending');
-
-    const sortButton = res.getAllByRole('button');
-    fireEvent.click(sortButton[0]);
-    expect(onRequestSortSpy).toBeCalledTimes(1);
-
-    fireEvent.click(sortButton[0]);
-    expect(onRequestSortSpy).toBeCalledTimes(2);
-  });
-});

client/src/components/__test__/grid/Toolbar.spec.tsx

@@ -1,48 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import Toolbar from '../../grid/ToolBar';
-import { ToolBarConfig } from '../../grid/Types';
-import { vi } from 'vitest';
-
-const cb = vi.fn().mockImplementation(resolve => resolve('a'));
-
-let toolbarConfig: ToolBarConfig[] = [
-  {
-    label: 'collection',
-    icon: 'delete',
-    onClick: cb,
-    disabled: selected => selected.length > 1,
-  },
-];
-
-describe('Test ToolBar', () => {
-  it('Test only one config', () => {
-    const res = render(
-      <Toolbar
-        selected={[]}
-        setSelected={() => {}}
-        toolbarConfigs={toolbarConfig}
-      />
-    );
-
-    const button = res.getByRole('button');
-    expect(res.getAllByRole('button').length).toBe(1);
-    expect(button.className.includes('disabled')).toBeFalsy();
-  });
-
-  it('Test Search Config', () => {
-    toolbarConfig.push({
-      label: 'collection',
-      icon: 'search',
-      onClick: cb,
-      onSearch: cb,
-    });
-    const res = render(
-      <Toolbar
-        selected={[]}
-        setSelected={() => {}}
-        toolbarConfigs={toolbarConfig}
-      ></Toolbar>
-    );
-    expect(res.getAllByPlaceholderText('search').length).toBe(1);
-  });
-});

client/src/components/__test__/grid/Utils.spec.ts

@@ -1,51 +0,0 @@
-import {
-  descendingComparator,
-  getComparator,
-  stableSort,
-} from '../../../utils/Sort';
-
-describe('Test Gird Utils', () => {
-  it('Test descendingComparator', () => {
-    const a = {
-      order: 2,
-    };
-
-    const b = {
-      order: 11,
-    };
-    expect(descendingComparator(a, b, 'order')).toEqual(1);
-  });
-
-  it('Test getComparator', () => {
-    const a = {
-      order: 2,
-    };
-
-    const b = {
-      order: 11,
-    };
-    expect(getComparator('desc', 'order')(a, b)).toEqual(1);
-    expect(getComparator('asc', 'order')(a, b)).toEqual(-1);
-  });
-
-  it('Test stableSort', () => {
-    const arr = [
-      {
-        order: 2,
-      },
-      {
-        order: 11,
-      },
-    ];
-
-    const comparator = getComparator('desc', 'order');
-    expect(stableSort(JSON.parse(JSON.stringify(arr)), comparator)).toEqual(
-      JSON.parse(JSON.stringify(arr)).reverse()
-    );
-
-    const ascComparator = getComparator('asc', 'order');
-    expect(stableSort(JSON.parse(JSON.stringify(arr)), ascComparator)).toEqual(
-      arr
-    );
-  });
-});

client/src/components/__test__/layout/GlobalEffect.spec.tsx

@@ -1,38 +0,0 @@
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-import GlobalEffect from '../../layout/GlobalEffect';
-import { vi } from 'vitest';
-
-let container: any = null;
-
-vi.mock('react-router-dom', () => {
-  return {
-    useHistory: () => ({ location: { pathname: '' } }),
-  };
-});
-
-describe('Test GlobalEffect', () => {
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    unmountComponentAtNode(container);
-    container.remove();
-    container = null;
-  });
-
-  it('Test Render', () => {
-    act(() => {
-      render(
-        <GlobalEffect>
-          <div id="children"></div>
-        </GlobalEffect>,
-        container
-      );
-    });
-
-    expect(container.querySelectorAll('#children').length).toEqual(1);
-  });
-});

client/src/components/__test__/layout/Layout.spec.tsx

@@ -1,46 +0,0 @@
-import { render } from '@testing-library/react';
-import Layout from '../../layout/Layout';
-import { MuiThemeProvider } from '@material-ui/core/styles';
-import { theme } from '../../../styles/theme';
-import { vi } from 'vitest';
-
-vi.mock('react-i18next', () => {
-  return {
-    useTranslation: () => ({
-      t: (key: any) => key,
-    }),
-  };
-});
-
-vi.mock('react-router-dom', () => {
-  return {
-    useHistory: () => ({
-      push: vi.fn(),
-    }),
-    useLocation: () => ({
-      hash: '',
-      pathname: '/use-location-mock',
-      search: '',
-      state: undefined,
-    }),
-  };
-});
-
-vi.mock('../../layout/GlobalEffect', () => {
-  return {
-    default: () => {
-      return <div role="global">{}</div>;
-    },
-  };
-});
-
-describe('Test Layout', () => {
-  it('Test Render', () => {
-    const res = render(
-      <MuiThemeProvider theme={theme}>
-        <Layout />
-      </MuiThemeProvider>
-    );
-    expect(res.getAllByRole('global').length).toEqual(1);
-  });
-});

client/src/components/__test__/menu/SimpleMenu.spec.tsx

@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import SimpleMenu from '../../menu/SimpleMenu';
-
-describe('Test Simple Menu', () => {
-  it('Test props ', () => {
-    const items = [
-      {
-        label: 'a',
-        callback: () => {},
-      },
-      {
-        label: 'Logout',
-        callback: () => {
-          console.log('logout');
-        },
-      },
-    ];
-    const res = render(<SimpleMenu label="test" menuItems={items} />);
-
-    expect(res.getByRole('button').textContent).toEqual('test');
-  });
-});

client/src/components/__test__/status/Status.spec.tsx

@@ -1,33 +0,0 @@
-import Status from '../../status/Status';
-import { LOADING_STATE } from '@/consts';
-import { render, screen } from '@testing-library/react';
-import { vi } from 'vitest';
-
-vi.mock('@material-ui/core/styles/makeStyles', () => {
-  return () => () => ({});
-});
-
-vi.mock('react-i18next', () => {
-  return {
-    useTranslation: () => {
-      return {
-        t: () => {
-          return {
-            loaded: 'loaded',
-            unloaded: 'unloaded',
-            error: 'error',
-          };
-        },
-      };
-    },
-  };
-});
-
-describe('Test Status', () => {
-  it('Test props status', () => {
-    render(<Status status={LOADING_STATE.LOADED} />);
-    expect(screen.queryByText('loaded')?.textContent).toEqual('loaded');
-    render(<Status status={LOADING_STATE.UNLOADED} />);
-    expect(screen.queryByText('unloaded')?.textContent).toEqual('unloaded');
-  });
-});

client/src/components/__test__/utils/provideTheme.tsx

@@ -1,6 +0,0 @@
-import { ReactElement } from 'react';
-import { MuiThemeProvider } from '@material-ui/core/styles';
-import { theme } from '../../../styles/theme';
-export default (ui: ReactElement): ReactElement => {
-  return <MuiThemeProvider theme={theme}>{ui}</MuiThemeProvider>;
-};

client/src/components/advancedSearch/Condition.tsx

@@ -1,12 +1,7 @@
 import React, { useState, useEffect, FC, useMemo } from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  IconButton,
-  TextField,
-} from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import { Theme, IconButton, TextField, SelectChangeEvent } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import CloseIcon from '@mui/icons-material/Close';
 import { ConditionProps } from './Types';
 import CustomSelector from '../customSelector/CustomSelector';
 import { LOGICAL_OPERATORS, DataTypeStringEnum } from '@/consts';
@@ -89,13 +84,11 @@ const Condition: FC<ConditionProps> = props => {
   }, [conditionField]);
 
   // Logic operator input change.
-  const handleOpChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+  const handleOpChange = (event: SelectChangeEvent<unknown>) => {
     setOperator(event.target.value);
   };
   // Field Name input change.
-  const handleFieldNameChange = (
-    event: React.ChangeEvent<{ value: unknown }>
-  ) => {
+  const handleFieldNameChange = (event: SelectChangeEvent<unknown>) => {
     const value = event.target.value;
     const target = fields.find(field => field.name === value);
     target && setConditionField(target);
@@ -163,27 +156,25 @@ const Condition: FC<ConditionProps> = props => {
 
 Condition.displayName = 'Condition';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {},
-    wrapper: {
-      minWidth: '466px',
-      minHeight: '62px',
-      background: '#FFFFFF',
-      padding: theme.spacing(1.5, 2),
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    closeButton: {},
-    fieldName: {
-      minHeight: '38px',
-      minWidth: '130px',
-    },
-    logic: { minHeight: '38px', minWidth: '100px', margin: '0 24px' },
-    key: { minHeight: '38px', width: '150px', margin: '0 0' },
-    value: { minHeight: '38px', minWidth: '130px' },
-  })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {},
+  wrapper: {
+    minWidth: '466px',
+    minHeight: '62px',
+    background: '#FFFFFF',
+    padding: theme.spacing(1.5, 2),
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  closeButton: {},
+  fieldName: {
+    minHeight: '38px',
+    minWidth: '130px',
+  },
+  logic: { minHeight: '38px', minWidth: '100px', margin: '0 24px' },
+  key: { minHeight: '38px', width: '150px', margin: '0 0' },
+  value: { minHeight: '38px', minWidth: '130px' },
+}));
 
 export default Condition;

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -1,7 +1,8 @@
 import React, { useState, FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { makeStyles, Theme, createStyles, Button } from '@material-ui/core';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import { ToggleButton, ToggleButtonGroup } from '@mui/lab';
 import ConditionItem from './Condition';
 import icons from '../icons/Icons';
 import CustomButton from '../customButton/CustomButton';
@@ -188,46 +189,44 @@ const ConditionGroup = (props: ConditionGroupProps) => {
 
 ConditionGroup.displayName = 'ConditionGroup';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {},
-    wrapper: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {},
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
 
-      '& .op-or': {
-        backgroundColor: 'unset',
-        margin: '16px 0',
-      },
+    '& .op-or': {
+      backgroundColor: 'unset',
+      margin: '16px 0',
     },
-    addBtn: {},
-    binaryLogicOp: {
+  },
+  addBtn: {},
+  binaryLogicOp: {
+    width: '100%',
+    backgroundColor: '#FFFFFF',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& .op-split': {
+      height: '1px',
+      backgroundColor: '#E9E9ED',
       width: '100%',
-      backgroundColor: '#FFFFFF',
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      '& .op-split': {
-        height: '1px',
-        backgroundColor: '#E9E9ED',
-        width: '100%',
-      },
-      '& button': {
-        width: '42px',
-        height: '32px',
-        color: theme.palette.attuDark.main,
-      },
-      '& button.Mui-selected': {
-        backgroundColor: theme.palette.primary.main,
-        color: '#FFFFFF',
-      },
-      '& button.Mui-selected:hover': {
-        backgroundColor: theme.palette.primary.main,
-        color: '#FFFFFF',
-      },
     },
-  })
-);
+    '& button': {
+      width: '42px',
+      height: '32px',
+      color: theme.palette.attuDark.main,
+    },
+    '& button.Mui-selected': {
+      backgroundColor: theme.palette.primary.main,
+      color: '#FFFFFF',
+    },
+    '& button.Mui-selected:hover': {
+      backgroundColor: theme.palette.primary.main,
+      color: '#FFFFFF',
+    },
+  },
+}));
 
 export default ConditionGroup;

client/src/components/advancedSearch/CopyButton.tsx

@@ -1,5 +1,6 @@
 import React, { useState, FC } from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import { CopyButtonProps } from './Types';
 import icons from '../icons/Icons';
 import CustomIconButton from '../customButton/CustomIconButton';
@@ -34,7 +35,7 @@ const CopyButton: FC<CopyButtonProps> = props => {
   const handleClick = (event: React.MouseEvent<HTMLElement>, v: string) => {
     event.stopPropagation();
 
-    if (typeof v === 'object' ) {
+    if (typeof v === 'object') {
       v = JSON.stringify(v);
     }
 
@@ -60,12 +61,9 @@ const CopyButton: FC<CopyButtonProps> = props => {
 
 CopyButton.displayName = 'CopyButton';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {},
-    button: {},
-    tooltip: {},
-  })
-);
-
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {},
+  button: {},
+  tooltip: {},
+}));
 export default CopyButton;

client/src/components/advancedSearch/Dialog.tsx

@@ -1,16 +1,15 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  makeStyles,
   Theme,
-  createStyles,
   Typography,
   IconButton,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-} from '@material-ui/core';
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import CustomButton from '../customButton/CustomButton';
 import ConditionGroup from './ConditionGroup';
 import icons from '../icons/Icons';
@@ -60,8 +59,8 @@ const AdvancedDialog = (props: DialogProps) => {
         className={classes.wrapper}
         {...others}
       >
-        <DialogTitle className={classes.dialogTitle} disableTypography>
-          <Typography variant="h5" component="h2">
+        <DialogTitle className={classes.dialogTitle}>
+          <Typography variant="h5" component="div">
             {title}
           </Typography>
           <IconButton
@@ -125,99 +124,97 @@ const AdvancedDialog = (props: DialogProps) => {
         </DialogActions>
       </Dialog>
       {/* <DialogTemplate
-        title={title}
-        handleClose={onClose}
-        showCloseIcon
-        handleConfirm={onSubmit}
-        confirmLabel="Apply Filters"
-        confirmDisabled={!isLegal}
-        handleCancel={onCancel}
-        cancelLabel="Cancel"
-        leftActions={
-          <Button
-            onClick={onReset}
-            color="primary"
-            className={classes.resetBtn}
-            size="small"
-          >
-            <CachedIcon />
-            Reset
-          </Button>
-        }
-      >
-        <div
-          className={`${classes.expResult} ${
-            !isLegal && 'disable-exp'
-          } testcopy`}
+      title={title}
+      handleClose={onClose}
+      showCloseIcon
+      handleConfirm={onSubmit}
+      confirmLabel="Apply Filters"
+      confirmDisabled={!isLegal}
+      handleCancel={onCancel}
+      cancelLabel="Cancel"
+      leftActions={
+        <Button
+          onClick={onReset}
+          color="primary"
+          className={classes.resetBtn}
+          size="small"
         >
-          {`${isLegal ? filterExpression : 'Filter Expression'}`}
-          {isLegal && (
-            <CopyBtn label="copy expression" value={filterExpression} />
-          )}
-        </div>
-        <div className={classes.expWrapper}>
-          <ConditionGroup
-            fields={fields}
-            handleConditions={handleConditions}
-            conditions={flatConditions}
-          />
-        </div>
-      </DialogTemplate> */}
+          <CachedIcon />
+          Reset
+        </Button>
+      }
+    >
+      <div
+        className={`${classes.expResult} ${
+          !isLegal && 'disable-exp'
+        } testcopy`}
+      >
+        {`${isLegal ? filterExpression : 'Filter Expression'}`}
+        {isLegal && (
+          <CopyBtn label="copy expression" value={filterExpression} />
+        )}
+      </div>
+      <div className={classes.expWrapper}>
+        <ConditionGroup
+          fields={fields}
+          handleConditions={handleConditions}
+          conditions={flatConditions}
+        />
+      </div>
+    </DialogTemplate> */}
     </>
   );
 };
 
 AdvancedDialog.displayName = 'AdvancedDialog';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {},
-    wrapper: {
-      '& .disable-exp': {
-        userSelect: 'none',
-        color: theme.palette.attuGrey.main,
-      },
-    },
-    closeButton: {
-      color: 'black',
-    },
-    dialogTitle: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    dialogActions: {
-      justifyContent: 'space-between',
-    },
-    resetBtn: {},
-    cancelBtn: {
-      marginRight: theme.spacing(1),
-    },
-    applyBtn: {
-      backgroundColor: theme.palette.primary.main,
-      color: 'white',
-    },
-    copyButton: {},
-    expResult: {
-      background: '#f4f4f4',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      minHeight: '40px',
-      margin: theme.spacing(1, 4),
-      padding: theme.spacing(0, 2),
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: '16px',
-      lineHeight: '24px',
-    },
-    expWrapper: {
-      background: '#f4f4f4',
-      minWidth: '480px',
-      minHeight: '104px',
-      padding: theme.spacing(1.5),
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {},
+  wrapper: {
+    '& .disable-exp': {
+      userSelect: 'none',
+      color: theme.palette.attuGrey.main,
     },
-  })
-);
+  },
+  closeButton: {
+    color: 'black',
+  },
+  dialogTitle: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  dialogActions: {
+    justifyContent: 'space-between',
+  },
+  resetBtn: {},
+  cancelBtn: {
+    marginRight: theme.spacing(1),
+  },
+  applyBtn: {
+    backgroundColor: theme.palette.primary.main,
+    color: 'white',
+  },
+  copyButton: {},
+  expResult: {
+    background: '#f4f4f4',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '40px',
+    margin: theme.spacing(1, 4),
+    padding: theme.spacing(0, 2),
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: '16px',
+    lineHeight: '24px',
+  },
+  expWrapper: {
+    background: '#f4f4f4',
+    minWidth: '480px',
+    minHeight: '104px',
+    padding: theme.spacing(1.5),
+  },
+}));
 
 export default AdvancedDialog;

client/src/components/advancedSearch/Filter.tsx

@@ -1,11 +1,6 @@
 import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  Chip,
-  Tooltip,
-} from '@material-ui/core';
+import { Theme, Chip, Tooltip } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import { useTranslation } from 'react-i18next';
 import icons from '@/components/icons/Icons';
 import { generateIdByHash } from '@/utils/Common';
@@ -308,18 +303,13 @@ const Filter = forwardRef((props: FilterProps, ref) => {
           disabled={filterDisabled}
           className={classes.afBtn}
           onClick={handleClickOpen}
-          size='small'
+          size="small"
           endIcon={<FilterIcon />}
         >
           {showTitle ? title : ''}
         </CustomButton>
         {showTooltip && initConditions.length > 0 && (
-          <Tooltip
-            arrow
-            interactive
-            title={filterExpression}
-            placement={tooltipPlacement}
-          >
+          <Tooltip arrow title={filterExpression} placement={tooltipPlacement}>
             <Chip
               label={initConditions.filter(i => i.type === 'condition').length}
               onDelete={handleDeleteAll}
@@ -350,13 +340,11 @@ const Filter = forwardRef((props: FilterProps, ref) => {
 
 Filter.displayName = 'AdvancedFilter';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {},
-    afBtn: {
-      color: theme.palette.primary.main,
-    },
-  })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+  wrapper: {},
+  afBtn: {
+    color: theme.palette.primary.main,
+  },
+}));
 
 export default Filter;

client/src/components/cards/EmptyCard.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { makeStyles, Theme, Typography, CardContent } from '@material-ui/core';
+import { Theme, Typography, CardContent } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import { EmptyCardProps } from './Types';
 

client/src/components/code/CodeBlock.tsx

@@ -1,10 +1,11 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import CopyButton from '../advancedSearch/CopyButton';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { FC } from 'react';
 import { CodeBlockProps } from './Types';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/code/CodeView.tsx

@@ -1,10 +1,11 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { Theme, Typography } from '@mui/material';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomTabList from '../customTabList/CustomTabList';
 import { ITab } from '../customTabList/Types';
 import CodeBlock from './CodeBlock';
 import { CodeViewProps } from './Types';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/customButton/CustomButton.tsx

@@ -1,6 +1,7 @@
-import { Button, ButtonProps, makeStyles, Tooltip } from '@material-ui/core';
+import { Button, ButtonProps, Tooltip, Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
-const buttonStyle = makeStyles(theme => ({
+const buttonStyle = makeStyles((theme: Theme) => ({
   button: {
     padding: theme.spacing(1, 3),
     textTransform: 'initial',

client/src/components/customButton/CustomIconButton.tsx

@@ -1,10 +1,5 @@
-import {
-  IconButtonProps,
-  Tooltip,
-  IconButton,
-  makeStyles,
-  Theme,
-} from '@material-ui/core';
+import { IconButtonProps, Tooltip, IconButton, Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -24,13 +19,21 @@ const CustomIconButton = (props: IconButtonProps & { tooltip?: string }) => {
       {tooltip ? (
         <Tooltip title={tooltip} arrow>
           <span>
-            <IconButton classes={{ root: classes.iconBtn }} {...otherProps}>
+            <IconButton
+              classes={{ root: classes.iconBtn }}
+              {...otherProps}
+              size="large"
+            >
               {props.children}
             </IconButton>
           </span>
         </Tooltip>
       ) : (
-        <IconButton classes={{ root: classes.iconBtn }} {...otherProps}>
+        <IconButton
+          classes={{ root: classes.iconBtn }}
+          {...otherProps}
+          size="large"
+        >
           {props.children}
         </IconButton>
       )}

client/src/components/customDatePicker/CustomDatePicker.tsx

@@ -1,77 +0,0 @@
-import { FC, useState } from 'react';
-import { DateTimePicker } from '@material-ui/pickers';
-import Icons from '../icons/Icons';
-import { makeStyles, Theme, Typography } from '@material-ui/core';
-import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date';
-import { DatePickerType } from './Types';
-import { useTranslation } from 'react-i18next';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: '10px',
-    cursor: 'pointer',
-  },
-  icon: {
-    color: (props: any) =>
-      props.date ? theme.palette.primary.main : theme.palette.attuGrey.dark,
-  },
-  label: {
-    marginLeft: '4px',
-    color: (props: any) =>
-      props.date ? theme.palette.primary.main : theme.palette.attuGrey.dark,
-    fontWeight: 'bold',
-  },
-  picker: {
-    width: 0,
-  },
-  clear: {
-    fontSize: '14px',
-    color: theme.palette.primary.main,
-    marginLeft: '4px',
-  },
-}));
-
-export const CustomDatePicker: FC<DatePickerType> = props => {
-  const { onChange, label, date, setDate } = props;
-  const [open, setOpen] = useState(false);
-  const classes = useStyles({ date });
-  const { t: btnTrans } = useTranslation('btn');
-
-  const DatePickerIcon = Icons.datePicker;
-  const ClearIcon = Icons.clear;
-
-  const handleChange = (value: MaterialUiPickersDate) => {
-    setDate(value);
-    onChange(value);
-  };
-
-  const handleClear = (e: any) => {
-    e.stopPropagation();
-    handleChange(null);
-  };
-  return (
-    <>
-      <div
-        className={classes.wrapper}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        <DatePickerIcon className={classes.icon} />
-        <Typography className={classes.label}>{label}</Typography>
-        {date && <ClearIcon onClick={handleClear} className={classes.clear} />}
-      </div>
-
-      <DateTimePicker
-        className={classes.picker}
-        value={date}
-        open={open}
-        onChange={handleChange}
-        onClose={() => setOpen(false)}
-        okLabel={btnTrans('confirm')}
-      ></DateTimePicker>
-    </>
-  );
-};

client/src/components/customDatePicker/Types.ts

@@ -1,8 +0,0 @@
-import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date';
-
-export type DatePickerType = {
-  label: string;
-  onChange: (value: any) => void;
-  date: MaterialUiPickersDate;
-  setDate: (value: MaterialUiPickersDate) => void;
-};

client/src/components/customDialog/CustomDialog.tsx

@@ -3,53 +3,30 @@ import {
   DialogActions,
   DialogContent,
   Dialog,
-  makeStyles,
   Theme,
-  createStyles,
   Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import { CustomDialogType } from './Types';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '../customButton/CustomButton';
 import CustomDialogTitle from './CustomDialogTitle';
+import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    paper: {
-      minWidth: 540,
-      padding: 0,
-      borderRadius: 0,
-      backgroundColor: 'transparent',
-    },
-    noticePaper: {
-      backgroundColor: '#fff',
-      maxWidth: 540,
-    },
-    paperSm: {
-      maxWidth: '80%',
-    },
-    dialogContent: {
-      marginTop: theme.spacing(2),
-    },
-    title: {
-      '& p': {
-        fontWeight: 500,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        maxWidth: 300,
-        fontSize: 20,
-      },
-    },
-    padding: {
-      padding: theme.spacing(3, 4, 4),
-    },
-    cancel: {
-      color: theme.palette.common.black,
-      opacity: 0.4,
-    },
-  })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+  paper: {},
+  noticePaper: {},
+  paperSm: {
+    maxWidth: '80%',
+  },
+  dialogContent: {
+    // marginTop: theme.spacing(2),
+  },
+  title: {},
+  cancel: {
+    // color: theme.palette.common.black,
+    // opacity: 0.4,
+  },
+}));
 
 const CustomDialog: FC<CustomDialogType> = props => {
   const { t } = useTranslation('btn');
@@ -116,11 +93,10 @@ const CustomDialog: FC<CustomDialogType> = props => {
               {component}
             </DialogContent>
           )}
-          <DialogActions classes={{ spacing: classes.padding }}>
+          <DialogActions>
             <CustomButton
               onClick={() => handleCancel()}
               className={classes.cancel}
-              color="default"
             >
               {cancelLabel}
             </CustomButton>

client/src/components/customDialog/CustomDialogTitle.tsx

@@ -1,22 +1,24 @@
-import { DialogTitleProps, makeStyles, Typography } from '@material-ui/core';
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import { DialogTitleProps, Typography } from '@mui/material';
+import MuiDialogTitle from '@mui/material/DialogTitle';
 import icons from '../icons/Icons';
 import { theme } from '../../styles/theme';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles(() => ({
   root: {
-    margin: 0,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
+    marginBottom: 8,
+    paddingTop: 32,
   },
   title: {
     fontWeight: 500,
     wordBreak: 'break-all',
-    maxWidth: 540,
+    fontSize: '20px',
   },
   icon: {
-    fontSize: '24px',
+    fontSize: '18px',
     color: theme.palette.attuDark.main,
     cursor: 'pointer',
   },
@@ -40,12 +42,8 @@ const CustomDialogTitle = (props: IProps) => {
   const ClearIcon = icons.clear;
 
   return (
-    <MuiDialogTitle
-      disableTypography
-      className={`${innerClass.root} ${classes.root}`}
-      {...other}
-    >
-      <Typography variant="h4" className={innerClass.title}>
+    <MuiDialogTitle className={`${innerClass.root} ${classes.root}`} {...other}>
+      <Typography variant="body2" className={innerClass.title}>
         {children}
       </Typography>
       {showCloseIcon && onClose ? (

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -1,19 +1,19 @@
 import {
   DialogActions,
   DialogContent,
-  makeStyles,
   TextField,
   Theme,
   Typography,
   Checkbox,
   FormControlLabel,
-} from '@material-ui/core';
+} from '@mui/material';
 import { ChangeEvent, FC, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '@/components/customButton/CustomButton';
 import CustomDialogTitle from '@/components/customDialog/CustomDialogTitle';
 import { DeleteDialogContentType } from '@/components/customDialog/Types';
 import { rootContext } from '@/context';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/customDialog/DialogTemplate.tsx

@@ -1,15 +1,11 @@
 import { FC, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  DialogContent,
-  DialogActions,
-  makeStyles,
-  Theme,
-} from '@material-ui/core';
+import { DialogContent, DialogActions, Theme } from '@mui/material';
 import { DialogContainerProps } from './Types';
 import CustomDialogTitle from './CustomDialogTitle';
 import CustomButton from '../customButton/CustomButton';
 import CodeView from '../code/CodeView';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -93,11 +89,7 @@ const DialogTemplate: FC<DialogContainerProps> = ({
               <div>{leftActions}</div>
               <div>
                 {showCancel && (
-                  <CustomButton
-                    onClick={onCancel}
-                    color="default"
-                    name="cancel"
-                  >
+                  <CustomButton onClick={onCancel} name="cancel">
                     {cancel}
                   </CustomButton>
                 )}

client/src/components/customInput/CustomInput.tsx

@@ -7,10 +7,10 @@ import {
   Input,
   InputAdornment,
   InputLabel,
-  makeStyles,
   StandardTextFieldProps,
   TextField,
-} from '@material-ui/core';
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
 import { ReactElement } from 'react';
 import {
@@ -131,7 +131,7 @@ const getAdornmentInput = (
               onClick={onIconClick || (() => {})}
               edge="end"
               role="icon-button"
-            >
+              size="large">
               {isPasswordType
                 ? showPassword
                   ? Icons.visible({ classes: { root: classes.icon } })

client/src/components/customInput/SearchInput.tsx

@@ -1,4 +1,5 @@
-import { InputAdornment, makeStyles, TextField } from '@material-ui/core';
+import { InputAdornment, TextField } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import { useRef, FC, useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icons from '../icons/Icons';

client/src/components/customInput/Types.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { InputLabelProps } from '@material-ui/core';
+import { InputLabelProps } from '@mui/material';
 import { IValidationItem } from '@/hooks';
 import { IExtraParam, ValidType } from '@/utils';
 

client/src/components/customProgress/CustomLinearProgress.tsx

@@ -1,62 +0,0 @@
-import {
-  makeStyles,
-  withStyles,
-  Theme,
-  LinearProgress,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
-import { FC } from 'react';
-import { CustomLinearProgressProps } from './Types';
-
-const getProgressStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  percent: {
-    minWidth: '35px',
-    marginLeft: theme.spacing(1),
-    color: theme.palette.attuDark.main,
-  },
-}));
-
-const BorderLinearProgress = withStyles((theme: Theme) => ({
-  root: {
-    height: 10,
-    border: '1px solid #e9e9ed',
-    minWidth: 85,
-  },
-  colorPrimary: {
-    backgroundColor: '#fff',
-  },
-  bar: {
-    backgroundColor: theme.palette.primary.main,
-  },
-}))(LinearProgress);
-
-const CustomLinearProgress: FC<CustomLinearProgressProps> = ({
-  value,
-  tooltip = '',
-  wrapperClass = '',
-}) => {
-  const classes = getProgressStyles();
-
-  return (
-    <div className={`${classes.wrapper} ${wrapperClass}`}>
-      {tooltip !== '' ? (
-        <Tooltip title={tooltip} aria-label={tooltip} arrow>
-          <BorderLinearProgress variant="determinate" value={value} />
-        </Tooltip>
-      ) : (
-        <BorderLinearProgress variant="determinate" value={value} />
-      )}
-      <Typography
-        variant="body1"
-        className={classes.percent}
-      >{`${value}%`}</Typography>
-    </div>
-  );
-};
-
-export default CustomLinearProgress;

client/src/components/customProgress/Types.ts

@@ -1,6 +0,0 @@
-export interface CustomLinearProgressProps {
-  tooltip?: string;
-  // percentage, e.g. 50 means complete 50%
-  value: number;
-  wrapperClass?: string;
-}

client/src/components/customRadio/CustomRadio.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormGroup, FormControlLabel, Switch } from '@material-ui/core';
+import { FormGroup, FormControlLabel, Switch } from '@mui/material';
 
 export const CustomRadio = (props: {
   label: string;

client/src/components/customSelector/CustomGroupedSelect.tsx

@@ -2,11 +2,11 @@ import {
   FormControl,
   InputLabel,
   ListSubheader,
-  makeStyles,
   MenuItem,
   Select,
   Theme,
-} from '@material-ui/core';
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import { FC } from 'react';
 import { GroupOption, ICustomGroupSelect } from './Types';
 
@@ -89,7 +89,6 @@ const CustomGroupedSelect: FC<ICustomGroupSelect> = props => {
               vertical: 'top',
               horizontal: 'left',
             },
-            getContentAnchorEl: null,
           }}
         >
           {options.map(option => renderSelectGroup(option))}

client/src/components/customSelector/CustomMultiSelector.tsx

@@ -5,11 +5,10 @@ import {
   MenuItem,
   Select,
   Checkbox,
-} from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
+} from '@mui/material';
+import { withStyles } from '@mui/styles';
 import { CustomMultiSelectorType } from './Types';
 import { generateId } from '../../utils/Common';
-import { render } from '@testing-library/react';
 
 const CustomMenuItem = withStyles({
   root: {

client/src/components/customSelector/CustomSelector.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import { CustomSelectorType } from './Types';
 import { generateId } from '../../utils/Common';
 

client/src/components/customSelector/Types.ts

@@ -1,5 +1,5 @@
-import { FormControlClassKey, SelectProps } from '@material-ui/core';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+import { FormControlClassKey, SelectProps } from '@mui/material';
+import { ClassNameMap } from '@mui/styles';
 
 export interface Option<T = string, U = string | number> {
   label: T;
@@ -15,7 +15,6 @@ export type CustomSelectorType = SelectProps & {
   label?: string;
   value: string | number;
   options: Option[];
-  onChange: (e: React.ChangeEvent<{ value: unknown }>) => void;
   classes?: Partial<ClassNameMap<FormControlClassKey>>;
   variant?: 'filled' | 'outlined' | 'standard';
   labelClass?: string;

client/src/components/customSnackBar/CustomSnackBar.tsx

@@ -1,36 +1,42 @@
-import { forwardRef, FC, SyntheticEvent } from 'react';
+import { forwardRef, FC } from 'react';
 import { CustomSnackBarType } from './Types';
-import MuiAlert from '@material-ui/lab/Alert';
-import { Snackbar, makeStyles, Theme, createStyles } from '@material-ui/core';
-import Slide from '@material-ui/core/Slide';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import MuiAlert from '@mui/material/Alert';
+import {
+  Snackbar,
+  Theme,
+  Slide,
+  SnackbarCloseReason,
+  AlertProps,
+} from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions/transition';
+import { makeStyles } from '@mui/styles';
 
 // if we need to use slide component
 // snackbar content must use forwardRef to wrapper it
-const Alert = forwardRef((props: { [x: string]: any }, ref) => {
-  return <MuiAlert ref={ref} elevation={6} variant="filled" {...props} />;
-});
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (props: { [x: string]: any }, ref) => {
+    return <MuiAlert ref={ref} elevation={6} variant="filled" {...props} />;
+  }
+);
 
 function SlideTransition(props: TransitionProps) {
   return <Slide {...props} direction="left" />;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      maxWidth: '50vh',
-      wordBreak: 'break-all'
-    },
-    topRight: {
-      [theme.breakpoints.up('md')]: {
-        top: '72px',
-        right: theme.spacing(4),
-      },
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    maxWidth: '50vh',
+    wordBreak: 'break-all',
+  },
+  topRight: {
+    [theme.breakpoints.up('md')]: {
       top: '72px',
       right: theme.spacing(4),
     },
-  })
-);
+    top: '72px',
+    right: theme.spacing(4),
+  },
+}));
 
 const CustomSnackBar: FC<CustomSnackBarType> = props => {
   const {
@@ -43,7 +49,10 @@ const CustomSnackBar: FC<CustomSnackBarType> = props => {
     onClose,
   } = props;
   const classes = useStyles();
-  const handleClose = (e: SyntheticEvent<any, Event>, reason: string) => {
+  const handleClose = (
+    event: React.SyntheticEvent<any> | Event,
+    reason: SnackbarCloseReason
+  ) => {
     // only click x to close or auto hide.
     if (reason === 'clickaway') {
       return;

client/src/components/customSwitch/CustomSwitch.tsx

@@ -1,7 +1,8 @@
-import { FormControlLabel, makeStyles, Switch, Theme } from '@material-ui/core';
+import { FormControlLabel, Switch, Theme } from '@mui/material';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CustomSwitchProps } from './Types';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   label: {

client/src/components/customTabList/CustomTabList.tsx

@@ -1,37 +1,7 @@
-import { Box, makeStyles, Tab, Tabs, Theme } from '@material-ui/core';
+import { Box, Tab, Tabs } from '@mui/material';
 import { FC, useState } from 'react';
 import { ITabListProps, ITabPanel } from './Types';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexBasis: 0,
-    flexGrow: 1,
-    '& .MuiTab-wrapper': {
-      textTransform: 'capitalize',
-      fontWeight: 'bold',
-      color: '#323232',
-    },
-  },
-  tab: {
-    height: theme.spacing(0.5),
-    backgroundColor: theme.palette.primary.main,
-  },
-  tabContainer: {
-    borderBottom: '1px solid #e0e0e0',
-  },
-  tabContent: {
-    minWidth: 0,
-    marginRight: theme.spacing(3),
-  },
-  tabPanel: {
-    flexBasis: 0,
-    flexGrow: 1,
-    marginTop: theme.spacing(2),
-    overflow: 'hidden',
-  },
-}));
+import { useStyles } from './style';
 
 const TabPanel = (props: ITabPanel) => {
   const { children, value, index, className = '', ...other } = props;
@@ -84,7 +54,6 @@ const CustomTabList: FC<ITabListProps> = props => {
         {tabs.map((tab, index) => (
           <Tab
             classes={{ root: classes.tabContent }}
-            textColor="primary"
             key={tab.label}
             label={tab.label}
             {...a11yProps(index)}

client/src/components/customTabList/RouteTabList.tsx

@@ -1,40 +1,8 @@
-import { Box, makeStyles, Tab, Tabs, Theme } from '@material-ui/core';
-import { FC, useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { FC } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { ITabListProps, ITabPanel } from './Types';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexBasis: 0,
-    flexGrow: 1,
-    '& .MuiTab-wrapper': {
-      textTransform: 'capitalize',
-      fontWeight: 'normal',
-      color: '#323232',
-    },
-    background: '#fff',
-    border: '1px solid #e9e9ed',
-    padding: theme.spacing(0, 1),
-  },
-  tab: {
-    backgroundColor: theme.palette.primary.main,
-  },
-  tabContainer: {
-    borderBottom: '1px solid #e0e0e0',
-  },
-  tabContent: {
-    minWidth: 0,
-    marginRight: theme.spacing(3),
-  },
-  tabPanel: {
-    flexBasis: 0,
-    flexGrow: 1,
-    marginTop: theme.spacing(1),
-    overflow: 'hidden',
-  },
-}));
+import { useStyles } from './style';
 
 const TabPanel = (props: ITabPanel) => {
   const { children, value, index, className = '', ...other } = props;
@@ -91,7 +59,6 @@ const RouteTabList: FC<ITabListProps> = props => {
         {tabs.map((tab, index) => (
           <Tab
             classes={{ root: classes.tabContent }}
-            textColor="primary"
             key={tab.label}
             label={tab.label}
             {...a11yProps(index)}

client/src/components/customTabList/style.ts

@@ -0,0 +1,33 @@
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+export const useStyles = makeStyles((theme: Theme) => ({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexBasis: 0,
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.paper,
+    padding: 0,
+    '& .MuiTab-root': {
+      textTransform: 'capitalize',
+    },
+  },
+  tab: {
+    height: theme.spacing(0.5),
+    backgroundColor: theme.palette.primary.main,
+  },
+  tabContainer: {
+    borderBottom: '1px solid #e0e0e0',
+  },
+  tabContent: {
+    minWidth: 0,
+    marginRight: theme.spacing(3),
+  },
+  tabPanel: {
+    flexBasis: 0,
+    flexGrow: 1,
+    marginTop: theme.spacing(1),
+    overflow: 'hidden',
+  },
+}));

client/src/components/customToolTip/CustomToolTip.tsx

@@ -1,13 +1,12 @@
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 import { CustomToolTipType } from './Types';
 import { FC } from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    tooltip: {},
-  })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+  tooltip: {},
+}));
 
 const CustomToolTip: FC<CustomToolTipType> = props => {
   const classes = useStyles();

client/src/components/grid/ActionBar.tsx

@@ -1,49 +1,41 @@
 import { FC } from 'react';
-import {
-  IconButton,
-  makeStyles,
-  Theme,
-  createStyles,
-  Button,
-  Typography,
-} from '@material-ui/core';
+import { IconButton, Theme, Button, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
 import { ActionBarType } from './Types';
 import CustomToolTip from '../customToolTip/CustomToolTip';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-      display: 'inline-block',
-      marginRight: theme.spacing(1),
-    },
-    tip: {
-      position: 'absolute',
-      left: 0,
-      bottom: '-10px',
-      fontSize: '10px',
-      textTransform: 'capitalize',
-      textAlign: 'center',
-      width: '100%',
-    },
-    disabled: {
-      color: theme.palette.common.black,
-      opacity: 0.15,
-    },
-    hoverType: {
-      marginRight: 0,
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    position: 'relative',
+    display: 'inline-block',
+    marginRight: theme.spacing(1),
+  },
+  tip: {
+    position: 'absolute',
+    left: 0,
+    bottom: '-10px',
+    fontSize: '10px',
+    textTransform: 'capitalize',
+    textAlign: 'center',
+    width: '100%',
+  },
+  disabled: {
+    color: theme.palette.common.black,
+    opacity: 0.15,
+  },
+  hoverType: {
+    marginRight: 0,
 
-      '& button': {
-        color: '#fff',
-      },
+    '& button': {
+      color: '#fff',
     },
-    link: {
-      textDecoration: 'underline',
-      color: theme.palette.common.black,
-    }
-  })
-);
+  },
+  link: {
+    textDecoration: 'underline',
+    color: theme.palette.common.black,
+  },
+}));
 
 const ActionBar: FC<ActionBarType> = props => {
   const classes = useStyles();
@@ -73,6 +65,7 @@ const ActionBar: FC<ActionBarType> = props => {
                   classes={{
                     disabled: classes.disabled,
                   }}
+                  size="large"
                 >
                   {v.showIconMethod === 'renderFn'
                     ? v.renderIconFn && v.renderIconFn(row)

client/src/components/grid/Grid.tsx

@@ -1,16 +1,17 @@
 import { FC, MouseEvent, useRef, useEffect, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import TablePagination from '@material-ui/core/TablePagination';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles/createTheme';
+import Grid from '@mui/material/Grid';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import TablePagination from '@mui/material/TablePagination';
+import { makeStyles } from '@mui/styles';
 import CustomToolbar from './ToolBar';
 import Table from './Table';
 import { AttuGridType } from './Types';
 import { useTranslation } from 'react-i18next';
 import TablePaginationActions from './TablePaginationActions';
 
-const userStyle = makeStyles(theme => ({
+const userStyle = makeStyles((theme: Theme) => ({
   loading: {
     height: '100%',
     display: 'flex',
@@ -36,6 +37,14 @@ const userStyle = makeStyles(theme => ({
     fontSize: '32px',
   },
   pagenation: {
+    '& .MuiTablePagination-spacer': {
+      display: 'none',
+    },
+    '& .MuiTablePagination-toolbar': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingLeft: 8,
+    },
     '& .MuiTablePagination-caption': {
       position: 'absolute',
       left: 0,
@@ -201,7 +210,7 @@ const AttuGrid: FC<AttuGridType> = props => {
 
   useEffect(() => {
     // const timer = setTimeout(() => {
-      calculateRowCountAndPageSize();
+    calculateRowCountAndPageSize();
     // }, 16);
     // Add event listener for window resize
     window.addEventListener('resize', calculateRowCountAndPageSize);

client/src/components/grid/LoadingTable.tsx

@@ -1,5 +1,6 @@
-import { makeStyles, Theme } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import { Theme } from '@mui/material';
+import { Skeleton } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -22,7 +23,7 @@ const getStyles = makeStyles((theme: Theme) => ({
 const LoadingTable = (props: { wrapperClass?: string; count: number }) => {
   const { wrapperClass = '', count } = props;
   const classes = getStyles();
-  const rows = Array(count).fill(1);
+  const rows = Array(count || 5).fill(1);
 
   return (
     <div className={`${classes.wrapper} ${wrapperClass}`}>

client/src/components/grid/Table.tsx

@@ -1,13 +1,13 @@
 import { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableRow from '@material-ui/core/TableRow';
-import Checkbox from '@material-ui/core/Checkbox';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+import Checkbox from '@mui/material/Checkbox';
+import { makeStyles } from '@mui/styles';
 import { TableType } from './Types';
-import { Box, Button, Typography } from '@material-ui/core';
+import { Box, Button, Typography, Theme } from '@mui/material';
 import EnhancedTableHead from './TableHead';
 import EditableTableHead from './TableEditableHead';
 import ActionBar from './ActionBar';
@@ -15,7 +15,7 @@ import LoadingTable from './LoadingTable';
 import CopyButton from '../advancedSearch/CopyButton';
 import { useTranslation } from 'react-i18next';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme: Theme) => ({
   root: {
     width: '100%',
     flexGrow: 1,

client/src/components/grid/TableEditableHead.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { TableEditableHeadType } from './Types';
-import { TableHead, TableRow, TableCell, makeStyles } from '@material-ui/core';
+import { TableHead, TableRow, TableCell } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(theme => ({
   tableCell: {

client/src/components/grid/TableHead.tsx

@@ -7,9 +7,9 @@ import {
   TableCell,
   Checkbox,
   TableSortLabel,
-  makeStyles,
   Typography,
-} from '@material-ui/core';
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(theme => ({
   visuallyHidden: {

client/src/components/grid/TablePaginationActions.tsx

@@ -1,32 +1,31 @@
-import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';
+import { Theme, Typography } from '@mui/material';
 import CustomButton from '../customButton/CustomButton';
 import icons from '../icons/Icons';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TablePaginationActionsProps } from './Types';
+import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      flexShrink: 0,
-    },
-    page: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '24px',
-      height: '24px',
-      backgroundColor: theme.palette.common.white,
-    },
-    btn: {
-      paddingLeft: 8,
-      paddingRight: 8,
-      minWidth: '24px',
-    },
-  })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  page: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '24px',
+    height: '24px',
+    backgroundColor: theme.palette.common.white,
+  },
+  btn: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    minWidth: '24px',
+  },
+}));
 
 const TablePaginationActions = (props: TablePaginationActionsProps) => {
   const classes = useStyles();

client/src/components/grid/TableSwitch.tsx

@@ -1,27 +1,26 @@
-import { makeStyles, Theme, createStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { FC, useState } from 'react';
 import Icons from '../icons/Icons';
 import { TableSwitchType } from './Types';
+import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-    },
-    line: {
-      display: 'inline-block',
-      margin: theme.spacing(0, 1),
-      border: '1px solid rgba(0, 0, 0, 0.15)',
-    },
-    btn: {
-      cursor: 'pointer',
-      color: 'rgba(0, 0, 0, 0.15)',
-    },
-    active: {
-      color: 'rgba(0, 0, 0, 0.6) ',
-    },
-  })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+  },
+  line: {
+    display: 'inline-block',
+    margin: theme.spacing(0, 1),
+    border: '1px solid rgba(0, 0, 0, 0.15)',
+  },
+  btn: {
+    cursor: 'pointer',
+    color: 'rgba(0, 0, 0, 0.15)',
+  },
+  active: {
+    color: 'rgba(0, 0, 0, 0.6) ',
+  },
+}));
 
 const TableSwitch: FC<TableSwitchType> = props => {
   const { defaultActive = 'list', onListClick, onAppClick } = props;

client/src/components/grid/ToolBar.tsx

@@ -1,12 +1,5 @@
 import { FC, useMemo } from 'react';
-import {
-  Grid,
-  Typography,
-  makeStyles,
-  Theme,
-  createStyles,
-  IconButton,
-} from '@material-ui/core';
+import { Grid, Typography, Theme, IconButton } from '@mui/material';
 import CustomButton from '../customButton/CustomButton';
 import Icons from '../icons/Icons';
 import { ToolBarConfig, ToolBarType } from './Types';
@@ -14,29 +7,28 @@ import SearchInput from '../customInput/SearchInput';
 import TableSwitch from './TableSwitch';
 import { throwErrorForDev } from '../../utils/Common';
 import CustomIconButton from '../customButton/CustomIconButton';
+import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    countLabel: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      color: theme.palette.common.black,
-      opacity: 0.4,
-    },
-    btn: {
-      marginRight: theme.spacing(0.5),
-    },
-    gridEnd: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      alignItems: 'center',
-    },
-    toolbar: {
-      marginBottom: theme.spacing(1),
-    },
-  })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+  countLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    color: theme.palette.common.black,
+    opacity: 0.4,
+  },
+  btn: {
+    marginRight: theme.spacing(0.5),
+  },
+  gridEnd: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  toolbar: {
+    marginBottom: theme.spacing(1),
+  },
+}));
 
 const CustomToolBar: FC<ToolBarType> = props => {
   const { toolbarConfigs, selected = [], hideOnDisable = false } = props;
@@ -162,7 +154,7 @@ const CustomToolBar: FC<ToolBarType> = props => {
                 default:
                   const Icon = c.icon ? Icons[c.icon]() : '';
                   return Icon ? (
-                    <IconButton onClick={c.onClick} key={i}>
+                    <IconButton onClick={c.onClick} key={i} size="large">
                       {Icon}
                     </IconButton>
                   ) : (

client/src/components/grid/Types.ts

@@ -1,5 +1,5 @@
 import React, { ReactElement, Ref } from 'react';
-import { LabelDisplayedRowsArgs } from '@material-ui/core';
+import { LabelDisplayedRowsArgs } from '@mui/material';
 import { IconsType } from '../icons/Types';
 import { SearchType } from '../customInput/Types';
 

client/src/components/icons/Icons.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { IconsType } from './Types';
-import { SvgIcon } from '@material-ui/core';
-import AppsIcon from '@material-ui/icons/Apps';
-import CancelIcon from '@material-ui/icons/Cancel';
+import { SvgIcon } from '@mui/material';
+import AppsIcon from '@mui/icons-material/Apps';
+import CancelIcon from '@mui/icons-material/Cancel';
 import AttuIcon from '@/assets/icons/attu.svg?react';
 import ConsoleIcon from '@/assets/icons/console.svg?react';
 import KeyIcon from '@/assets/icons/key.svg?react';
@@ -874,8 +874,8 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
       <path
         d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
         fill="currentColor"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
       ></path>
     </svg>
   ),

client/src/components/layout/Header.tsx

@@ -1,73 +1,66 @@
 import { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  Typography,
-  Tooltip,
-} from '@material-ui/core';
+import { Theme, Typography, Tooltip } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { navContext, dataContext, authContext } from '@/context';
 import { MilvusService } from '@/http';
 import CustomSelector from '@/components/customSelector/CustomSelector';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import icons from '../icons/Icons';
+import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      display: 'flex',
-      alignItems: 'center',
-      color: theme.palette.common.black,
-      paddingRight: theme.spacing(1),
-      backgroundColor: '#fff',
-      borderBottom: '1px solid #e0e0e0',
-      minHeight: 56,
-    },
-    contentWrapper: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingLeft: theme.spacing(1.5),
-      flex: 1,
-    },
-    navigation: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    icon: {
-      color: theme.palette.primary.main,
-      cursor: 'pointer',
-      marginRight: theme.spacing(1),
-      width: '20px',
-    },
-    addressWrapper: {
-      display: 'flex',
-      alignItems: 'center',
+const useStyles = makeStyles((theme: Theme) => ({
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.palette.common.black,
+    paddingRight: theme.spacing(1),
+    backgroundColor: '#fff',
+    borderBottom: '1px solid #e0e0e0',
+    minHeight: 56,
+  },
+  contentWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingLeft: theme.spacing(1.5),
+    flex: 1,
+  },
+  navigation: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  icon: {
+    color: theme.palette.primary.main,
+    cursor: 'pointer',
+    marginRight: theme.spacing(1),
+    width: '20px',
+  },
+  addressWrapper: {
+    display: 'flex',
+    alignItems: 'center',
 
-      '& .text': {
-        marginRight: theme.spacing(2),
+    '& .text': {
+      marginRight: theme.spacing(2),
 
-        '& .address': {
-          fontSize: '14px',
-          lineHeight: '20px',
-          color: '#545454',
-        },
+      '& .address': {
+        fontSize: '14px',
+        lineHeight: '20px',
+        color: '#545454',
+      },
 
-        '& .status': {
-          fontSize: '12px',
-          lineHeight: '16px',
-          color: '#1ba954',
-        },
+      '& .status': {
+        fontSize: '12px',
+        lineHeight: '16px',
+        color: '#1ba954',
       },
     },
-    database: {
-      width: theme.spacing(16),
-      marginRight: theme.spacing(2),
-    },
-  })
-);
+  },
+  database: {
+    width: theme.spacing(16),
+    marginRight: theme.spacing(2),
+  },
+}));
 
 const Header: FC = () => {
   const classes = useStyles();

client/src/components/menu/CommunityBtn.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from '@material-ui/core/Button';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import { makeStyles, Theme, Link } from '@material-ui/core';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import GitHubIcon from '@material-ui/icons/GitHub';
+import Button from '@mui/material/Button';
+import SvgIcon from '@mui/material/SvgIcon';
+import { Theme, Link } from '@mui/material';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import GitHubIcon from '@mui/icons-material/GitHub';
 import peopleIcon from '@/assets/icons/people.svg?react';
 import qrcodePath from '@/assets/imgs/wechat_qrcode.jpeg';
 import discordIcon from '@/assets/icons/discord.svg?react';
+import { makeStyles } from '@mui/styles';
 
 const GITHUB_LINK = 'https://github.com/milvus-io/milvus/discussions';
 const DISCORD_LINK = 'https://discord.com/invite/8uyFbECzPX';

client/src/components/menu/NavMenu.tsx

@@ -1,132 +1,131 @@
 import { useState, FC, useEffect } from 'react';
 import clsx from 'clsx';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Fade from '@material-ui/core/Fade';
-import Button from '@material-ui/core/Button';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
+import { Theme } from '@mui/material/styles';
+import Fade from '@mui/material/Fade';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 import { NavMenuItem, NavMenuType } from './Types';
 import icons from '../icons/Icons';
 import { useTranslation } from 'react-i18next';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 
 const timeout = 150;
 const duration = `${timeout}ms`;
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      borderRight: '1px solid #e0e0e0',
-      background: '#fff',
-      paddingTop: 0,
-      paddingBottom: theme.spacing(4),
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      transition: theme.transitions.create('width', {
-        duration,
-      }),
-    },
-    rootCollapse: {
-      width: '56px',
-    },
-    rootExpand: {
-      width: (props: any) => props.width || '100%',
-    },
-    nested: {
-      paddingLeft: '12px',
-    },
-    item: {
-      paddingLeft: '16px',
-      boxSizing: 'content-box',
-      height: theme.spacing(3),
-      width: 'initial',
-      color: theme.palette.attuGrey.dark,
-      '&:hover': {
-        backgroundColor: '#efefef',
-      },
-    },
-    itemIcon: {
-      minWidth: '24px',
-      marginRight: theme.spacing(1),
-    },
-    itemText: {
-      whiteSpace: 'nowrap',
-    },
-    active: {
-      color: '#323232',
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    borderRight: '1px solid #e0e0e0',
+    background: '#fff',
+    paddingTop: 0,
+    paddingBottom: theme.spacing(4),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    transition: theme.transitions.create('width', {
+      duration,
+    }),
+  },
+  rootCollapse: {
+    width: '56px',
+  },
+  rootExpand: {
+    width: (props: any) => props.width || '100%',
+  },
+  nested: {
+    paddingLeft: '12px',
+  },
+  item: {
+    paddingLeft: '16px',
+    boxSizing: 'content-box',
+    height: theme.spacing(3),
+    width: 'initial',
+    color: theme.palette.attuGrey.dark,
+    '&:hover': {
       backgroundColor: '#efefef',
-
-      '& .icon': {
-        color: theme.palette.primary.main,
-      },
-    },
-
-    logoWrapper: {
-      display: 'flex',
-      alignItems: 'center',
-      height: '86px',
-      marginBottom: theme.spacing(1),
-      paddingLeft: '16px',
-
-      '& .title': {
-        margin: 0,
-        paddingLeft: theme.spacing(2),
-        fontSize: '24px',
-        letterSpacing: '0.15px',
-      },
-    },
-    logo: {
-      transition: theme.transitions.create('all', {
-        duration,
-      }),
     },
-    logoExpand: {
-      marginRight: theme.spacing(1),
-      transform: 'scale(1.5)',
-    },
-    logoCollapse: {
-      transform: 'scale(1.5)',
-    },
-    actionIcon: {
-      position: 'fixed',
-      backgroundColor: 'white',
-      top: '24px',
-      transition: theme.transitions.create('all', {
-        duration,
-      }),
-      minWidth: '24px',
-      padding: 0,
+  },
+  itemIcon: {
+    minWidth: '24px',
+    marginRight: theme.spacing(1),
+  },
+  itemText: {
+    whiteSpace: 'nowrap',
+  },
+  active: {
+    color: '#323232',
+    backgroundColor: '#efefef',
+
+    '& .icon': {
+      color: theme.palette.primary.main,
+    },
+  },
+
+  logoWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '86px',
+    marginBottom: theme.spacing(1),
+    paddingLeft: '16px',
+
+    '& .title': {
+      margin: 0,
+      paddingLeft: theme.spacing(2),
+      fontSize: '24px',
+      letterSpacing: '0.15px',
+    },
+  },
+  logo: {
+    transition: theme.transitions.create('all', {
+      duration,
+    }),
+  },
+  logoExpand: {
+    marginRight: theme.spacing(1),
+    transform: 'scale(1.5)',
+  },
+  logoCollapse: {
+    transform: 'scale(1.5)',
+  },
+  actionIcon: {
+    position: 'fixed',
+    backgroundColor: 'white',
+    top: '24px',
+    transition: theme.transitions.create('all', {
+      duration,
+    }),
+    minWidth: '24px',
+    padding: 0,
+
+    '& svg path': {
+      fill: theme.palette.attuGrey.dark,
+    },
+
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
 
       '& svg path': {
-        fill: theme.palette.attuGrey.dark,
+        fill: 'white',
       },
-
-      '&:hover': {
-        backgroundColor: theme.palette.primary.main,
-
-        '& svg path': {
-          fill: 'white',
-        },
-      },
-    },
-    expandIcon: {
-      left: '160px',
-      transform: 'rotateZ(180deg)',
-    },
-    collapseIcon: {
-      left: 44,
-    },
-    version: {
-      position: 'absolute',
-      fontSize: '10px',
-      bottom: 10,
-      left: 12,
     },
-  })
-);
+  },
+  expandIcon: {
+    left: '160px',
+    transform: 'rotateZ(180deg)',
+  },
+  collapseIcon: {
+    left: 44,
+  },
+  version: {
+    position: 'absolute',
+    fontSize: '10px',
+    bottom: 10,
+    left: 12,
+  },
+}));
 
 const NavMenu: FC<NavMenuType> = props => {
   const { width, data, defaultActive = '', versionInfo } = props;

client/src/components/menu/SimpleMenu.tsx

@@ -1,11 +1,12 @@
 import { FC, useMemo } from 'react';
 import React from 'react';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import { generateId } from '../../utils/Common';
 import { SimpleMenuType } from './Types';
 import CustomButton from '../customButton/CustomButton';
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   menuPaper: {
@@ -59,7 +60,6 @@ const SimpleMenu: FC<SimpleMenuType> = props => {
         open={Boolean(anchorEl)}
         onClose={handleClose}
         classes={{ paper: classes.menuPaper }}
-        getContentAnchorEl={null}
         // anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         // transformOrigin={{ vertical: 'top', horizontal: 'center' }}
       >

client/src/components/menu/Types.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@material-ui/core/Button';
+import { ButtonProps } from '@mui/material/Button';
 import { ReactElement } from 'react';
 
 export type SimpleMenuType = {

client/src/components/status/Status.tsx

@@ -1,59 +1,52 @@
 import { FC, useMemo } from 'react';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import { useTranslation } from 'react-i18next';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  Typography,
-  useTheme,
-} from '@material-ui/core';
+import { Theme, Typography, useTheme } from '@mui/material';
 import { LOADING_STATE } from '@/consts';
+import { makeStyles } from '@mui/styles';
 
 export type StatusType = {
   status: LOADING_STATE;
   percentage?: number;
 };
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    label: {
-      color: theme.palette.attuGrey.dark,
-      textTransform: 'capitalize',
-    },
-    circle: {
-      backgroundColor: (props: any) => props.color,
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      marginRight: theme.spacing(0.5),
-    },
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  label: {
+    color: theme.palette.attuGrey.dark,
+    textTransform: 'capitalize',
+  },
+  circle: {
+    backgroundColor: (props: any) => props.color,
+    borderRadius: '50%',
+    width: '10px',
+    height: '10px',
+    marginRight: theme.spacing(0.5),
+  },
 
-    loading: {
-      marginRight: '10px',
-    },
+  loading: {
+    marginRight: '10px',
+  },
 
-    flash: {
-      animation: '$bgColorChange 1.5s infinite',
-    },
+  flash: {
+    animation: '$bgColorChange 1.5s infinite',
+  },
 
-    '@keyframes bgColorChange': {
-      '0%': {
-        backgroundColor: (props: any) => props.color,
-      },
-      '50%': {
-        backgroundColor: 'transparent',
-      },
-      '100%': {
-        backgroundColor: (props: any) => props.color,
-      },
+  '@keyframes bgColorChange': {
+    '0%': {
+      backgroundColor: (props: any) => props.color,
+    },
+    '50%': {
+      backgroundColor: 'transparent',
+    },
+    '100%': {
+      backgroundColor: (props: any) => props.color,
     },
-  })
-);
+  },
+}));
 
 const Status: FC<StatusType> = props => {
   const { status, percentage = 0 } = props;

client/src/components/status/StatusIcon.tsx

@@ -1,5 +1,6 @@
-import { CircularProgress, makeStyles, Theme } from '@material-ui/core';
+import { CircularProgress, Theme } from '@mui/material';
 import { FC, ReactElement } from 'react';
+import { makeStyles } from '@mui/styles';
 
 export enum LoadingType {
   CREATING = 'creating',

client/src/components/uploader/Uploader.tsx

@@ -1,9 +1,10 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { FC, useContext, useRef } from 'react';
 import { rootContext } from '@/context';
 import CustomButton from '../customButton/CustomButton';
 import { UploaderProps } from './Types';
 import { FILE_MIME_TYPE } from '@/consts';
+import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   btn: {},

client/src/context/Root.tsx

@@ -1,7 +1,8 @@
 import { useState, useCallback, useEffect, useContext } from 'react';
 import React from 'react';
-import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
-import { SwipeableDrawer } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import { SwipeableDrawer } from '@mui/material';
 import { authContext } from '@/context';
 import {
   RootContextType,
@@ -12,7 +13,6 @@ import {
 import CustomSnackBar from '@/components/customSnackBar/CustomSnackBar';
 import CustomDialog from '@/components/customDialog/CustomDialog';
 import { MilvusService } from '@/http';
-import { theme } from '../styles/theme';
 
 const DefaultDialogConfigs: DialogType = {
   open: false,
@@ -40,20 +40,24 @@ export const rootContext = React.createContext<RootContextType>({
 });
 
 const { Provider } = rootContext;
+
+const useStyles = makeStyles((theme: Theme) => ({
+  paper: {
+    minWidth: '300px',
+  },
+  paperAnchorRight: {
+    width: '40vw',
+  },
+}));
+
 // Dialog has two type : normal | custom;
 // notice type mean it's a notice dialog you need to set props like title, content, actions
 // custom type could have own state, you could set a complete component in dialog.
 export const RootProvider = (props: { children: React.ReactNode }) => {
   const { isAuth } = useContext(authContext);
 
-  const classes = makeStyles({
-    paper: {
-      minWidth: '300px',
-    },
-    paperAnchorRight: {
-      width: '40vw',
-    },
-  })();
+  const classes = useStyles();
+
   const [snackBar, setSnackBar] = useState<SnackBarType>({
     open: false,
     type: 'success',
@@ -146,21 +150,19 @@ export const RootProvider = (props: { children: React.ReactNode }) => {
         versionInfo,
       }}
     >
-      <ThemeProvider theme={theme}>
-        <CustomSnackBar {...snackBar} onClose={handleSnackBarClose} />
-        {props.children}
-        <CustomDialog {...dialog} onClose={handleCloseDialog} />
+      <CustomSnackBar {...snackBar} onClose={handleSnackBarClose} />
+      {props.children}
+      <CustomDialog {...dialog} onClose={handleCloseDialog} />
 
-        <SwipeableDrawer
-          anchor={drawer.anchor}
-          open={drawer.open}
-          onClose={toggleDrawer(false)}
-          onOpen={toggleDrawer(true)}
-          classes={{ paperAnchorRight: classes.paperAnchorRight }}
-        >
-          {drawer.child}
-        </SwipeableDrawer>
-      </ThemeProvider>
+      <SwipeableDrawer
+        anchor={drawer.anchor}
+        open={drawer.open}
+        onClose={toggleDrawer(false)}
+        onOpen={toggleDrawer(true)}
+        classes={{ paperAnchorRight: classes.paperAnchorRight }}
+      >
+        {drawer.child}
+      </SwipeableDrawer>
     </Provider>
   );
 };

client/src/pages/connect/AuthForm.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { Typography, Menu } from '@material-ui/core';
+import { Typography, Menu } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '@/components/customButton/CustomButton';
 import CustomInput from '@/components/customInput/CustomInput';
@@ -381,7 +381,6 @@ export const AuthForm = () => {
         }}
         open={Boolean(anchorEl)}
         onClose={handleMenuClose}
-        getContentAnchorEl={null}
       >
         {connections.map((connection, index) => (
           <li

client/src/pages/connect/ConnectContainer.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { Theme, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Icons from '@/components/icons/Icons';
 import { AuthForm } from './AuthForm';
 import CustomButton from '@/components/customButton/CustomButton';
 import { MilvusService } from '@/http';
+import { makeStyles } from '@mui/styles';
 
 const getContainerStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -76,7 +77,7 @@ const ConnectContainer = () => {
       <section className={classes.box}>
         <section className={`flex-center ${classes.attu}`}>
           <Icons.attu classes={{ root: classes.logo }} />
-          <Typography variant="h2" className="title">
+          <Typography variant="body2" className="title">
             {attuTrans.admin}
           </Typography>
           {version && (

client/src/pages/connect/style.ts

@@ -1,4 +1,5 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 export const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/databases/Databases.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { useNavigationHook } from '@/hooks';
 import { ALL_ROUTER_TYPES } from '@/router/Types';
 import RouteTabList from '@/components/customTabList/RouteTabList';
@@ -21,12 +21,14 @@ import RefreshButton from './RefreshButton';
 import CopyButton from '@/components/advancedSearch/CopyButton';
 import { SearchParams } from './types';
 import { CollectionObject, CollectionFullObject } from '@server/types';
+import { makeStyles } from '@mui/styles';
 
 const DEFAULT_TREE_WIDTH = 230;
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     flexDirection: 'row',
+    padding: theme.spacing(0),
     '&.dragging': {
       cursor: 'ew-resize',
       '& $tree': {
@@ -50,7 +52,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     overflowY: 'auto',
     overflowX: 'hidden',
     boxSizing: 'border-box',
-    padding: 0,
+    paddingRight: 8,
     position: 'relative',
   },
   dragger: {

client/src/pages/databases/RefreshButton.tsx

@@ -1,8 +1,7 @@
 import { useState, MouseEvent } from 'react';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
-
-import { IconButtonProps } from '@material-ui/core';
+import { IconButtonProps } from '@mui/material';
 import icons from '@/components/icons/Icons';
 
 const RefreshButton = (props: IconButtonProps & { tooltip?: string }) => {

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

@@ -1,11 +1,12 @@
 import { useContext } from 'react';
-import { Chip, IconButton, makeStyles, Theme } from '@material-ui/core';
+import { Chip, IconButton, Theme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import icons from '@/components/icons/Icons';
 import CreateAliasDialog from '@/pages/dialogs/CreateAliasDialog';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { CollectionObject } from '@server/types';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

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

@@ -2,8 +2,9 @@ import { CollectionFullObject } from '@server/types';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import { formatFieldType } from '@/utils';
 import Icons from '@/components/icons/Icons';
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { ColDefinitionsType } from '@/components/grid/Types';
+import { makeStyles } from '@mui/styles';
 
 export const style = makeStyles((theme: Theme) => ({
   icon: {

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

@@ -1,6 +1,6 @@
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Highlighter from 'react-highlight-words';
 import { rootContext, authContext, dataContext } from '@/context';
@@ -26,6 +26,7 @@ import { LOADING_STATE } from '@/consts';
 import { formatNumber } from '@/utils';
 import Aliases from './Aliases';
 import { CollectionObject } from '@server/types';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

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

@@ -1,11 +1,10 @@
 import {
-  makeStyles,
   Theme,
   TextField,
   IconButton,
   Switch,
   FormControlLabel,
-} from '@material-ui/core';
+} from '@mui/material';
 import { FC, Fragment, ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomSelector from '@/components/customSelector/CustomSelector';
@@ -31,6 +30,7 @@ import {
   DEFAULT_ATTU_VARCHAR_MAX_LENGTH,
   DEFAULT_ATTU_ELEMENT_TYPE,
 } from '@/consts';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   optionalWrapper: {
@@ -580,6 +580,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
           onClick={() => handleAddNewField(index)}
           classes={{ root: classes.iconBtn }}
           aria-label="add"
+          size="large"
         >
           <AddIcon />
         </IconButton>
@@ -639,6 +640,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
           }}
           classes={{ root: classes.iconBtn }}
           aria-label="add"
+          size="large"
         >
           <AddIcon />
         </IconButton>
@@ -649,6 +651,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
           }}
           classes={{ root: classes.iconBtn }}
           aria-label="delete"
+          size="large"
         >
           <RemoveIcon />
         </IconButton>
@@ -676,6 +679,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
           }}
           classes={{ root: classes.iconBtn }}
           aria-label="add"
+          size="large"
         >
           <AddIcon />
         </IconButton>
@@ -686,6 +690,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
           }}
           classes={{ root: classes.iconBtn }}
           aria-label="delete"
+          size="large"
         >
           <RemoveIcon />
         </IconButton>

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

@@ -1,14 +1,7 @@
 import { FC, useMemo, MouseEvent, useContext } from 'react';
 import { StatusActionType } from '@/components/status/Types';
 import { useTranslation } from 'react-i18next';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  Typography,
-  useTheme,
-  Chip,
-} from '@material-ui/core';
+import { Theme, Typography, useTheme, Chip } from '@mui/material';
 import { rootContext } from '@/context';
 import { LOADING_STATE } from '@/consts';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
@@ -17,64 +10,63 @@ import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import CustomButton from '@/components/customButton/CustomButton';
 import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
 import ReleaseCollectionDialog from '@/pages/dialogs/ReleaseCollectionDialog';
+import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    chip: {
-      border: 'none',
-      background: `rgba(0, 0, 0, 0.04)`,
-      marginRight: theme.spacing(0.5),
-      paddingLeft: theme.spacing(0.5),
-    },
-    circle: {
-      width: '8px',
-      height: '8px',
-      borderRadius: '50%',
-      backgroundColor: theme.palette.primary.main,
-    },
-    loaded: {
-      border: `1px solid ${theme.palette.primary.main}`,
-      backgroundColor: theme.palette.primary.main,
-    },
-    unloaded: {
-      border: `1px solid ${theme.palette.primary.main}`,
-      background: '#fff !important',
-    },
-    noIndex: {
-      border: `1px solid ${theme.palette.attuGrey.light}`,
-      backgroundColor: '#fff',
-    },
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  chip: {
+    border: 'none',
+    background: `rgba(0, 0, 0, 0.04)`,
+    marginRight: theme.spacing(0.5),
+    paddingLeft: theme.spacing(0.5),
+  },
+  circle: {
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: theme.palette.primary.main,
+  },
+  loaded: {
+    border: `1px solid ${theme.palette.primary.main}`,
+    backgroundColor: theme.palette.primary.main,
+  },
+  unloaded: {
+    border: `1px solid ${theme.palette.primary.main}`,
+    background: '#fff !important',
+  },
+  noIndex: {
+    border: `1px solid ${theme.palette.attuGrey.light}`,
+    backgroundColor: '#fff',
+  },
 
-    loading: {
-      marginRight: '10px',
-    },
-    icon: {
-      marginTop: theme.spacing(0.5),
-    },
-    flash: {
-      animation: '$bgColorChange 1.5s infinite',
+  loading: {
+    marginRight: '10px',
+  },
+  icon: {
+    marginTop: theme.spacing(0.5),
+  },
+  flash: {
+    animation: '$bgColorChange 1.5s infinite',
+  },
+  extraBtn: {
+    height: 24,
+  },
+
+  '@keyframes bgColorChange': {
+    '0%': {
+      backgroundColor: (props: any) => props.color,
     },
-    extraBtn: {
-      height: 24,
+    '50%': {
+      backgroundColor: 'transparent',
     },
-
-    '@keyframes bgColorChange': {
-      '0%': {
-        backgroundColor: (props: any) => props.color,
-      },
-      '50%': {
-        backgroundColor: 'transparent',
-      },
-      '100%': {
-        backgroundColor: (props: any) => props.color,
-      },
+    '100%': {
+      backgroundColor: (props: any) => props.color,
     },
-  })
-);
+  },
+}));
 
 const StatusAction: FC<StatusActionType> = props => {
   const theme = useTheme();

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useContext } from 'react';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import { DataService } from '@/http';

client/src/pages/databases/collections/data/Styles.ts

@@ -1,4 +1,5 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 export const getQueryStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/pages/databases/collections/overview/CreateForm.tsx

@@ -1,4 +1,4 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { Theme, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ITextfieldConfig } from '@/components/customInput/Types';
@@ -7,6 +7,7 @@ import CustomSelector from '@/components/customSelector/CustomSelector';
 import CustomGroupedSelect from '@/components/customSelector/CustomGroupedSelect';
 import { Option, GroupOption } from '@/components/customSelector/Types';
 import { FormHelperType } from '../../../../types/Common';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/databases/collections/overview/IndexTypeElement.tsx

@@ -1,7 +1,7 @@
 import { FC, useContext, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import Chip from '@material-ui/core/Chip';
-import { makeStyles, Theme, Tooltip } from '@material-ui/core';
+import Chip from '@mui/material/Chip';
+import { Theme, Tooltip } from '@mui/material';
 import { IndexCreateParam, IndexExtraParam, IndexManageParam } from './Types';
 import { rootContext, dataContext } from '@/context';
 import Icons from '@/components/icons/Icons';
@@ -16,6 +16,7 @@ import {
 import CreateIndexDialog from './CreateIndexDialog';
 import { FieldObject } from '@server/types';
 import CustomButton from '@/components/customButton/CustomButton';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/databases/collections/overview/Overview.tsx

@@ -1,10 +1,4 @@
-import {
-  makeStyles,
-  Theme,
-  Typography,
-  Chip,
-  Tooltip,
-} from '@material-ui/core';
+import { Theme, Typography, Chip, Tooltip } from '@mui/material';
 import { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import AttuGrid from '@/components/grid/Grid';
@@ -18,6 +12,7 @@ import { getLabelDisplayedRows } from '@/pages/search/Utils';
 import StatusAction from '@/pages/databases/collections/StatusAction';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import { FieldObject } from '@server/types';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -257,7 +252,6 @@ const Overview = () => {
     },
   ];
 
-
   // only show create index element when there is only one vector field
   let CreateIndexElement = null;
   if (

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

@@ -1,4 +1,4 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { useContext, useEffect, useState } from 'react';
 import { useSearchParams, useParams } from 'react-router-dom';
 import Highlighter from 'react-highlight-words';
@@ -16,6 +16,7 @@ import DropPartitionDialog from '@/pages/dialogs/DropPartitionDialog';
 import { PartitionData } from '@server/types';
 import { formatNumber } from '@/utils';
 import { getLabelDisplayedRows } from '@/pages/search/Utils';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/databases/collections/properties/Properties.tsx

@@ -1,4 +1,4 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { useContext, useState } from 'react';
 import AttuGrid from '@/components/grid/Grid';
 import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
@@ -11,6 +11,7 @@ import { rootContext } from '@/context';
 import { getLabelDisplayedRows } from '@/pages/search/Utils';
 import { CollectionFullObject } from '@server/types';
 import { formatNumber } from '@/utils';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/databases/collections/search/Search.tsx

@@ -5,7 +5,7 @@ import {
   AccordionSummary,
   AccordionDetails,
   Checkbox,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { DataService } from '@/http';
 import { rootContext } from '@/context';
@@ -20,7 +20,7 @@ import { getQueryStyles } from './Styles';
 import SearchGlobalParams from './SearchGlobalParams';
 import VectorInputBox from './VectorInputBox';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CustomInput from '@/components/customInput/CustomInput';
 import {
   formatFieldType,

client/src/pages/databases/collections/search/SearchGlobalParams.tsx

@@ -1,6 +1,6 @@
 import { useCallback, ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Slider } from '@material-ui/core';
+import { Slider } from '@mui/material';
 import CustomInput from '@/components/customInput/CustomInput';
 import CustomSelector from '@/components/customSelector/CustomSelector';
 import CustomMultiSelector from '@/components/customSelector/CustomMultiSelector';

client/src/pages/databases/collections/search/Styles.ts

@@ -1,4 +1,5 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
 export const getQueryStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/pages/databases/tree/index.tsx

@@ -1,13 +1,12 @@
 import { useTranslation } from 'react-i18next';
-import TreeView from '@material-ui/lab/TreeView';
-import TreeItem from '@material-ui/lab/TreeItem';
+import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
 import icons from '@/components/icons/Icons';
-import { makeStyles, Theme, Tooltip, Typography } from '@material-ui/core';
+import { Theme, Tooltip, Typography } from '@mui/material';
 import { useNavigate, Params } from 'react-router-dom';
 import { CollectionObject } from '@server/types';
 import clcx from 'clsx';
 import { formatNumber } from '@/utils';
-import { min } from 'd3';
+import { makeStyles } from '@mui/styles';
 
 export type TreeNodeType = 'db' | 'collection' | 'partition' | 'segment';
 
@@ -57,6 +56,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
     '& .MuiTreeItem-content': {
       width: 'auto',
+      padding: '0',
 
       '&:hover': {
         backgroundColor: 'rgba(10, 206, 130, 0.08)',
@@ -230,11 +230,13 @@ const DatabaseTree: React.FC<DatabaseToolProps> = props => {
         return (
           <TreeItem
             key={node.id}
-            nodeId={node.id}
-            icon={<CollectionIcon />}
+            itemId={node.id}
+            slots={{
+              icon: CollectionIcon,
+            }}
             label={node.name}
             className={classes.treeItem}
-            onClick={event => {
+            onClick={(event: any) => {
               event.stopPropagation();
               if (onNodeClick) {
                 onNodeClick(node);
@@ -249,11 +251,13 @@ const DatabaseTree: React.FC<DatabaseToolProps> = props => {
       return (
         <TreeItem
           key={node.id}
-          nodeId={node.id}
-          icon={<CollectionIcon />}
+          itemId={node.id}
+          slots={{
+            icon: CollectionIcon,
+          }}
           label={<CollectionNode data={node.data!} />}
           className={classes.treeItem}
-          onClick={event => {
+          onClick={(event: any) => {
             event.stopPropagation();
             if (onNodeClick) {
               onNodeClick(node);
@@ -265,11 +269,11 @@ const DatabaseTree: React.FC<DatabaseToolProps> = props => {
   };
 
   return (
-    <TreeView
-      expanded={[database]}
+    <SimpleTreeView
+      expandedItems={[database]}
       multiSelect={false}
       disableSelection={false}
-      selected={
+      selectedItems={
         params.collectionName
           ? `c_${params.collectionName}`
           : params.databaseName
@@ -279,7 +283,7 @@ const DatabaseTree: React.FC<DatabaseToolProps> = props => {
       {
         <TreeItem
           key={tree.id}
-          nodeId={tree.id}
+          itemId={tree.id}
           label={
             <Tooltip title={tree.name}>
               <Typography noWrap className={classes.dbName}>
@@ -288,8 +292,10 @@ const DatabaseTree: React.FC<DatabaseToolProps> = props => {
             </Tooltip>
           }
           className={classes.treeItem}
-          icon={<DatabaseIcon />}
-          onClick={event => {
+          slots={{
+            icon: DatabaseIcon,
+          }}
+          onClick={(event: any) => {
             event.stopPropagation();
             if (onNodeClick) {
               onNodeClick(tree);
@@ -301,7 +307,7 @@ const DatabaseTree: React.FC<DatabaseToolProps> = props => {
             : [<div key="stub" />]}
         </TreeItem>
       }
-    </TreeView>
+    </SimpleTreeView>
   );
 };
 

client/src/pages/dialogs/CodeDialog.tsx

@@ -1,10 +1,11 @@
 import { FC, useContext, useState } from 'react';
-import { makeStyles, Theme } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import CodeBlock from '@/components/code/CodeBlock';
 import CustomSelector from '@/components/customSelector/CustomSelector';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   code: {