Update MUI from v5 to v6

web/package.json

@@ -33,7 +33,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^5.0.0",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "eslint": "^9.11.1",
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-react": "^7.34.3",
@@ -78,10 +78,10 @@
     "@date-io/date-fns": "3.x",
     "@emotion/sheet": "^1.0.1",
     "@fortawesome/fontawesome-free": "latest",
-    "@mui/icons-material": "^5.16.6",
-    "@mui/lab": "^5.0.0-alpha.165",
-    "@mui/material": "^5.15.10",
-    "@mui/x-date-pickers": "^7.7.1",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/lab": "^6.0.0-beta.16",
+    "@mui/material": "^6.1.8",
+    "@mui/x-date-pickers": "^7.22.3",
     "@projectstorm/react-diagrams": "^7.0.4",
     "@simonwep/pickr": "^1.5.1",
     "@szhsin/react-menu": "^4.2.2",

web/pgadmin/static/js/Theme/index.jsx

@@ -170,6 +170,12 @@ basicSettings = createTheme(basicSettings, {
         disableGutters: true,
       }
     },
+    MuiListItemButton: {
+      defaultProps: {
+        disableGutters: true,
+        disableTouchRipple: true,
+      }
+    },
     MuiTabs: {
       styleOverrides: {
         root: {
@@ -710,7 +716,7 @@ function getFinalTheme(baseTheme) {
           }
         }
       },
-      MuiListItem: {
+      MuiListItemButton: {
         styleOverrides: {
           root: {
             color: baseTheme.palette.text.primary,
@@ -735,6 +741,23 @@ function getFinalTheme(baseTheme) {
           }
         }
       },
+      MuiListItem: {
+        styleOverrides: {
+          root: {
+            color: baseTheme.palette.text.primary,
+            backgroundColor: baseTheme.palette.background.default,
+            flexDirection: 'column',
+            alignItems: 'initial',
+            padding: '0px 4px',
+            paddingTop: '0px',
+            paddingBottom: '0px',
+            ...mixins.panelBorder.top,
+            ...mixins.panelBorder.bottom,
+            borderTopColor: 'transparent',
+            cursor: 'pointer',
+          }
+        }
+      },
       MuiTooltip: {
         styleOverrides: {
           tooltip: {

web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx

@@ -4,7 +4,7 @@ import { PANELS, QUERY_TOOL_EVENTS, MAX_QUERY_LENGTH } from '../QueryToolConstan
 import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';
 import _ from 'lodash';
-import { Box, Grid, List, ListItem, ListSubheader } from '@mui/material';
+import { Box, Grid, List, ListItem, ListItemButton, ListSubheader } from '@mui/material';
 import url_for from 'sources/url_for';
 import { QueryToolConnectionContext, QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
 import moment from 'moment';
@@ -268,7 +268,7 @@ QuerySourceIcon.propTypes = {
 };
 
 function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick}) {
-  return <ListItem tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
+  return <ListItemButton component='li' tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
     selectedItemKey==itemKey && ele?.scrollIntoView({
       block: 'center',
       behavior: 'smooth',
@@ -281,7 +281,7 @@ function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick
     <Box fontSize="12px">
       {formatEntryDate(entry.start_time)}
     </Box>
-  </ListItem>;
+  </ListItemButton>;
 }
 
 const EntryPropType = PropTypes.shape({