- Update MUI v4 to v5

- Remove the SCSS dependency completely and use MUI for theming.
- Update - date-fns, @date-io, notistack. Remove - popper.js, sass-loader.
- Cleanup webpack config.
- Port PSQL tool to use MUI themes instead of SCSS theme.
- Theme change will reflect realtime without refreshing pgAdmin.

web/package.json

@@ -17,7 +17,7 @@
     "@babel/preset-typescript": "^7.22.5",
     "@emotion/core": "^10.0.14",
     "@emotion/memoize": "^0.7.5",
-    "@emotion/react": "^11.1.5",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@emotion/utils": "^1.0.0",
     "@svgr/webpack": "^8.1.0",
@@ -56,16 +56,13 @@
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.24.4",
-    "sass-loader": "^11.0.0",
-    "sass-resources-loader": "^2.2.1",
     "shim-loader": "^1.0.1",
     "style-loader": "^3.3.2",
     "stylis": "^4.0.7",
     "svgo": "^2.7.0",
     "svgo-loader": "^2.2.0",
     "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^3.2.2",
+    "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
     "webfonts-loader": "^8.0.1",
     "webpack": "^5.88.2",
@@ -77,20 +74,21 @@
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-react": "^7.12.13",
     "@codemirror/lang-sql": "^6.6.3",
-    "@date-io/core": "^1.3.6",
-    "@date-io/date-fns": "1.x",
+    "@date-io/core": "^3.0.0",
+    "@date-io/date-fns": "3.x",
     "@emotion/sheet": "^1.0.1",
     "@fortawesome/fontawesome-free": "latest",
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.61",
-    "@material-ui/pickers": "3.3.10",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/lab": "^5.0.0-alpha.165",
+    "@mui/material": "^5.15.10",
+    "@mui/styles": "^5.15.10",
+    "@mui/x-date-pickers": "^6.19.7",
     "@projectstorm/react-diagrams": "^6.6.1",
     "@simonwep/pickr": "^1.5.1",
     "@szhsin/react-menu": "^2.2.0",
     "@types/classnames": "^2.2.6",
-    "@types/react": "^16.7.18",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.25",
     "ajv": "^8.8.2",
     "anti-trojan-source": "^1.4.0",
     "aspen-decorations": "^1.0.2",
@@ -107,7 +105,7 @@
     "convert-units": "^2.3.4",
     "cssnano": "^5.0.2",
     "dagre": "^0.8.4",
-    "date-fns": "^2.24.0",
+    "date-fns": "^3.6.0",
     "diff-arrays-of-objects": "^1.1.8",
     "hotkeys-js": "^3.13.3",
     "html-to-image": "^1.11.11",
@@ -122,11 +120,10 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.34",
     "notificar": "^1.0.1",
-    "notistack": "^1.0.10",
+    "notistack": "^2.0.8",
     "path-fx": "^2.0.0",
     "pathfinding": "^0.4.18",
     "paths-js": "^0.4.9",
-    "popper.js": "^1.16.1",
     "postcss": "^8.4.31",
     "raf": "^3.4.1",
     "rc-dock": "^3.2.9",
@@ -172,7 +169,7 @@
     "bundle:watch": "yarn run linter && yarn run webpacker:watch",
     "bundle:dev": "yarn run linter && yarn run webpacker",
     "bundle:analyze": "cross-env NODE_ENV=production ANALYZE=true yarn run bundle:dev",
-    "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=2048 yarn run bundle:dev",
+    "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=3072 yarn run bundle:dev",
     "test:js-once": "yarn run linter && yarn run jest --maxWorkers=50%",
     "test:js": "yarn run test:js-once --watch",
     "test:js-file": "yarn run test:js-once -t",