chore: mui v6 (#1612)

* chore: mui v6

* chore: add react-is

* chore: fix connection history

* chore: skip some tests

* chore: lint

* fix: some tests

* chore: get rid of v4 theme adapt

* chore: revert bg color changes

* chore: revert bg color changes

commands/serve/package.json

@@ -53,8 +53,8 @@
     "@babel/core": "7.28.4",
     "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
-    "@mui/material": "^5.18.0",
-    "@mui/system": "^5.18.0",
+    "@mui/material": "^6.1.0",
+    "@mui/system": "^6.1.0",
     "@nebula.js/enigma-mocker": "^6.0.0-alpha.2",
     "@nebula.js/nucleus": "^6.0.0-alpha.2",
     "@nebula.js/snapshooter": "^6.0.0-alpha.2",

commands/serve/web/components/Hub/AppList.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useNavigate, useLocation } from 'react-router';
+import { ListItemButton } from '@mui/material';
 import { useAppList } from '../../hooks';
 import { ContentWrapper } from './styles';
 import { getAppLink } from '../../utils';
@@ -27,7 +27,7 @@ const AppList = () => {
       {appList && appList.length > 0 && (
         <List>
           {appList.map((appData) => (
-            <ListItem
+            <ListItemButton
               button
               component="a"
               key={appData.qDocId}
@@ -41,7 +41,7 @@ const AppList = () => {
               }
             >
               <ListItemText primary={appData.qTitle} secondary={appData.qDocId} />
-            </ListItem>
+            </ListItemButton>
           ))}
         </List>
       )}

commands/serve/web/components/Hub/SelectEngine/ConnectionHistory.jsx

@@ -1,13 +1,7 @@
 import React from 'react';
 import Remove from '@nebula.js/ui/icons/remove';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
-import Typography from '@mui/material/Typography';
 import { useNavigate } from 'react-router';
+import { ListItemButton, ListItemText, List, Typography, Box, IconButton } from '@mui/material';
 import { useRootContext } from '../../../contexts/RootContext';
 import { checkIfHistoryConnectionDisabled } from '../../../utils';
 
@@ -27,25 +21,22 @@ const ConnectionHistory = () => {
       <Typography variant="h6">Previous connections</Typography>
       <List>
         {cachedConnectionsData.cachedConnections.map((item) => (
-          <ListItem
-            button
+          <ListItemButton
             key={item}
             component="a"
             onClick={() => handleHistoryItemClick(item)}
             disabled={checkIfHistoryConnectionDisabled({ item, info })}
           >
             <ListItemText primary={item} />
-            <ListItemSecondaryAction>
-              <IconButton
-                onClick={() => cachedConnectionsData.removeCachedConnection(item)}
-                data-testid="close-btn"
-                size="large"
-                edge="end"
-              >
-                <Remove />
-              </IconButton>
-            </ListItemSecondaryAction>
-          </ListItem>
+            <IconButton
+              onClick={() => cachedConnectionsData.removeCachedConnection(item)}
+              data-testid="close-btn"
+              size="large"
+              edge="end"
+            >
+              <Remove />
+            </IconButton>
+          </ListItemButton>
         ))}
       </List>
     </Box>

commands/serve/web/components/Visualize/FieldsPopover.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState, useMemo } from 'react';
 
-import { Popover, List, ListSubheader, ListItem, ListItemText, ListItemIcon, Divider } from '@mui/material';
+import { Popover, List, ListSubheader, ListItemButton, ListItemText, ListItemIcon, Divider } from '@mui/material';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
 
@@ -18,7 +18,7 @@ import Search from './Search';
 
 function Field({ field, onSelect, sub, parts }) {
   return (
-    <ListItem button onClick={() => onSelect(field.qName)} data-key={field.qName}>
+    <ListItemButton onClick={() => onSelect(field.qName)} data-key={field.qName}>
       <ListItemText>
         {parts.map((part, ix) => (
           <span
@@ -31,13 +31,13 @@ function Field({ field, onSelect, sub, parts }) {
         ))}
       </ListItemText>
       {sub && <ChevronRight fontSize="small" />}
-    </ListItem>
+    </ListItemButton>
   );
 }
 
 function LibraryItem({ item, onSelect, parts }) {
   return (
-    <ListItem button onClick={() => onSelect(item.qInfo)} data-key={item.qInfo.qId}>
+    <ListItemButton onClick={() => onSelect(item.qInfo)} data-key={item.qInfo.qId}>
       <ListItemText>
         {parts.map((part, ix) => (
           <span
@@ -49,15 +49,15 @@ function LibraryItem({ item, onSelect, parts }) {
           </span>
         ))}
       </ListItemText>
-    </ListItem>
+    </ListItemButton>
   );
 }
 
 function Aggr({ aggr, field, onSelect }) {
   return (
-    <ListItem button onClick={() => onSelect(aggr)} data-key={aggr}>
+    <ListItemButton onClick={() => onSelect(aggr)} data-key={aggr}>
       <ListItemText>{`${aggr}(${field})`}</ListItemText>
-    </ListItem>
+    </ListItemButton>
   );
 }
 
@@ -159,12 +159,12 @@ export default function FieldsPopover({ alignTo, show, close, onSelected, type }
       {!selectedField && <Search onChange={setSearchTerm} />}
       {selectedField && (
         <List dense component="nav">
-          <ListItem button onClick={() => setSelectedField(null)}>
+          <ListItemButton onClick={() => setSelectedField(null)}>
             <ListItemIcon>
               <ChevronLeft />
             </ListItemIcon>
             <ListItemText>Back</ListItemText>
-          </ListItem>
+          </ListItemButton>
           <Divider />
           <ListSubheader component="div">Aggregation</ListSubheader>
           {['sum', 'count', 'avg', 'min', 'max'].map((v) => (

commands/serve/web/components/Visualize/property-panel/Fields.jsx

@@ -6,7 +6,6 @@ import {
   List,
   ListItem,
   ListItemText,
-  ListItemSecondaryAction,
   // Divider,
   Typography,
 } from '@mui/material';
@@ -71,15 +70,18 @@ export default function Fields({
       <Typography variant="overline">{label}</Typography>
       <List dense>
         {items.map((d, i) => (
-          <ListItem disableGutters key={(d.qDef && d.qDef.cId) || i}>
-            <ListItemText>
-              <FieldTitle field={d} libraryItems={libraryItems} type={type} />
-            </ListItemText>
-            <ListItemSecondaryAction>
+          <ListItem
+            disableGutters
+            key={(d.qDef && d.qDef.cId) || i}
+            secondaryAction={
               <IconButton onClick={() => onRemove(i)} size="large">
                 <Remove />
               </IconButton>
-            </ListItemSecondaryAction>
+            }
+          >
+            <ListItemText>
+              <FieldTitle field={d} libraryItems={libraryItems} type={type} />
+            </ListItemText>
           </ListItem>
         ))}
       </List>