Merge pull request #616 from zilliztech/attu-614

feat: upgrade UI component to MUI v5
zilliztech · Aug 15, 2024 · 1652a9d · 1652a9d
2 parents 7f66f0d + d0eb5c1
commit 1652a9d
Show file tree

Hide file tree

Showing 154 changed files with 1,497 additions and 2,770 deletions.
diff --git a/client/package.json b/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",

diff --git a/client/src/App.tsx b/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>
   );
 }
 

diff --git a/client/src/components/__test__/cards/EmptyCard.spec.tsx b/client/src/components/__test__/cards/EmptyCard.spec.tsx
diff --git a/client/src/components/__test__/customButton/CustomButton.spec.tsx b/client/src/components/__test__/customButton/CustomButton.spec.tsx
diff --git a/client/src/components/__test__/customButton/CustomIconButton.spec.tsx b/client/src/components/__test__/customButton/CustomIconButton.spec.tsx
diff --git a/client/src/components/__test__/customDialog/CustomDialog.spec.tsx b/client/src/components/__test__/customDialog/CustomDialog.spec.tsx
diff --git a/client/src/components/__test__/customDialog/CustomDialogTitle.spec.tsx b/client/src/components/__test__/customDialog/CustomDialogTitle.spec.tsx
diff --git a/client/src/components/__test__/customDialog/DeleteDialogTemplate.spec.tsx b/client/src/components/__test__/customDialog/DeleteDialogTemplate.spec.tsx
diff --git a/client/src/components/__test__/customDialog/DialogTemplate.spec.tsx b/client/src/components/__test__/customDialog/DialogTemplate.spec.tsx