Migrate MUI to v5

tornjak-frontend/package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
+    "@babel/runtime": "^7.22.0",
     "@carbon/charts": "^0.41.80",
     "@carbon/charts-react": "^0.41.80",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/data-grid": "^4.0.0-alpha.33",
-    "@material-ui/icons": "^4.11.2",
-    "@mui/material": "^5.12.3",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.2",
+    "@mui/x-data-grid": "^6.5.0",
     "@react-keycloak/web": "^3.4.0",
     "@redux-devtools/extension": "^3.2.5",
     "@types/carbon__icons-react": "^10.31.2",
@@ -20,7 +19,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.3.1",
     "axios": "^0.21.4",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^5.3.0",
     "carbon-components": "^10.36.0",
     "carbon-components-react": "^7.30.0",
     "env-cmd": "^10.1.0",
@@ -39,9 +38,17 @@
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "stringify-object": "^4.0.1",
+    "tss-react": "^4.8.4",
     "url-join": "^4.0.1",
     "web-vitals": "^0.2.4"
   },
+  "overrides": {
+    "svgo": "3.0.2",
+    "jsdom": "20.0.3",
+    "magic-string": "0.30.0",
+    "workbox-cacheable-response": "6.5.4",
+    "fbjs": "3.0.4"
+  },
   "scripts": {
     "start": "PORT=$PORT_FE react-scripts start --openssl-legacy-provider",
     "build": "react-scripts build",
@@ -70,6 +77,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.6",
     "@testing-library/jest-dom": "^5.14.1",
@@ -115,7 +123,7 @@
       "!src/index.js"
     ],
     "coverageReporters": [
-      "text", 
+      "text",
       "html"
     ]
   },

tornjak-frontend/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
 import store from 'redux/store';
 import IsManager from './components/is_manager';
@@ -14,7 +13,7 @@ import EntryList from "./components/entry-list";
 import EntryCreate from "./components/entry-create";
 import ServerManagement from "./components/server-management";
 import TornjakServerInfo from "./components/tornjak-server-info";
-import TornjakDashBoard from "./components/dashboard/tornjak-dashboard";
+import TornjakDashBoardStyled from "./components/dashboard/tornjak-dashboard";
 import DashboardDetailsRender from 'components/dashboard/dashboard-details-render';
 import RenderOnAdminRole from 'components/RenderOnAdminRole'
 import './App.css';
@@ -53,7 +52,7 @@ function App() {
                                 <Route path="/cluster/clustermanagement" exact component={ClusterManagement} />
                             </RenderOnAdminRole>
                             <Route path="/tornjak/serverinfo" exact component={TornjakServerInfo} />
-                            <Route path="/tornjak/dashboard" exact component={TornjakDashBoard} />
+                            <Route path="/tornjak/dashboard" exact component={TornjakDashBoardStyled} />
                             <Route
                                 path="/tornjak/dashboard/details/:entity"
                                 render={(props) => (<DashboardDetailsRender {...props} params={props.match.params} />)}

tornjak-frontend/src/components/dashboard/agents-dashboard-table.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core';
+import { withStyles } from 'tss-react/mui';
 import renderCellExpand from './render-cell-expand';
 import TableDashboard from './table/dashboard-table';
 import SpiffeHelper from '../spiffe-helper';
 import TornjakHelper from 'components/tornjak-helper';
 import { AgentsReducerState, EntriesReducerState } from 'redux/actions/types';
 import { RootState } from 'redux/reducers';
-import { GridCellParams, GridColDef } from '@material-ui/data-grid';
+import { GridCellParams, GridColDef } from '@mui/x-data-grid';
 
 const columns: GridColDef[] = [
   { field: "spiffeid", headerName: "Name", flex: 1, renderCell: renderCellExpand as (params: GridCellParams)=>JSX.Element },
@@ -17,12 +17,7 @@ const columns: GridColDef[] = [
   { field: "platformType", headerName: "Platform Type", width: 170 },
 ];
 
-const styles = (theme:Theme) => createStyles({
-  seeMore: {marginTop: theme.spacing(3)}
-});
-
-
-interface AgentDashboardTableProp extends WithStyles<typeof styles> {
+interface AgentDashboardTableProp {
   filterByCluster?:string,
   filterByAgentId?:string,
   globalClickedDashboardTable: string,
@@ -87,6 +82,16 @@ const mapStateToProps = (state:RootState) => ({
   globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
 })
 
-export default withStyles(styles)(
-  connect(mapStateToProps, {})(AgentDashboardTable)
-)
+
+const AgentDashboardTableStyled = withStyles(
+  AgentDashboardTable,
+  (theme: { spacing: (arg0: number) => any; }) => ({
+    root: {
+      seeMore: {
+        marginTop: theme.spacing(3),
+      },
+    }
+  })
+);
+
+export default connect(mapStateToProps, {})(AgentDashboardTableStyled);

tornjak-frontend/src/components/dashboard/clusters-dashboard-table.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Theme, WithStyles, createStyles, withStyles } from '@material-ui/core/styles';
+import { withStyles } from 'tss-react/mui';
 import TableDashboard from './table/dashboard-table';
 import SpiffeHelper from '../spiffe-helper';
 import TornjakHelper from 'components/tornjak-helper';
-import { GridColDef } from '@material-ui/data-grid';
+import { GridColDef } from '@mui/x-data-grid';
 import { AgentsReducerState, EntriesReducerState } from 'redux/actions/types';
 import { RootState } from 'redux/reducers';
 import { ClustersList } from 'components/types';
@@ -16,13 +16,7 @@ const columns: GridColDef[] = [
   { field: "numEntries", headerName: "Number of Entries", width: 200 }
 ];
 
-const styles = (theme:Theme) => createStyles({
-  seeMore: {
-    marginTop: theme.spacing(3),
-  },
-});
-
-interface ClusterDashboardTableProp extends WithStyles<typeof styles> {
+interface ClusterDashboardTableProp {
   filterByCluster?:string,
   filterByAgentId?:string,
   globalClickedDashboardTable: string,
@@ -83,6 +77,15 @@ const mapStateToProps = (state:RootState) => ({
   globalEntries: state.entries,
 })
 
-export default withStyles(styles)(
-  connect(mapStateToProps, {})(ClusterDashboardTable)
-)
+const ClusterDashboardTableStyled = withStyles(
+  ClusterDashboardTable,
+  (theme: { spacing: (arg0: number) => any; }) => ({
+    root: {
+      seeMore: {
+        marginTop: theme.spacing(3),
+      },
+    }
+  })
+); 
+
+export default connect(mapStateToProps, {})(ClusterDashboardTableStyled);

tornjak-frontend/src/components/dashboard/dashboard-details-render.js

@@ -1,8 +1,7 @@
-import React from 'react';
 import { Component } from 'react';
 import { connect } from 'react-redux';
 import IsManager from '../is_manager';
-import DashboardDetails from './dashboard-details';
+import DashboardDetailsStyled from './dashboard-details';
 import TornjakHelper from '../tornjak-helper';
 import TornjakApi from '../tornjak-api-helpers';
 import {
@@ -61,7 +60,7 @@ class DashboardDetailsRender extends Component {
     render() {
         const { params } = this.props;
         return (
-            <DashboardDetails selectedData={this.TornjakHelper.detailsDataParse(params, this.props)} />
+            <DashboardDetailsStyled selectedData={this.TornjakHelper.detailsDataParse(params, this.props)} />
         );
     }
 }
@@ -77,5 +76,16 @@ const mapStateToProps = (state) => ({
 
 export default connect(
     mapStateToProps,
-    { serverSelectedFunc, clustersListUpdateFunc, agentsListUpdateFunc, entriesListUpdateFunc, tornjakServerInfoUpdateFunc, serverInfoUpdateFunc, selectorInfoFunc, tornjakMessageFunc, workloadSelectorInfoFunc, agentworkloadSelectorInfoFunc, clusterTypeInfoFunc, clickedDashboardTableFunc }
-)(DashboardDetailsRender)
+    { serverSelectedFunc, 
+      clustersListUpdateFunc, 
+      agentsListUpdateFunc, 
+      entriesListUpdateFunc, 
+      tornjakServerInfoUpdateFunc, 
+      serverInfoUpdateFunc, 
+      selectorInfoFunc, 
+      tornjakMessageFunc, 
+      workloadSelectorInfoFunc, 
+      agentworkloadSelectorInfoFunc, 
+      clusterTypeInfoFunc, 
+      clickedDashboardTableFunc }
+)(DashboardDetailsRender);

tornjak-frontend/src/components/dashboard/dashboard-details.js

@@ -1,13 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
-import { withStyles } from "@material-ui/core/styles";
+import { withStyles } from "tss-react/mui";
 // Components
-import { Container, Grid, Paper } from "@material-ui/core";
+import { Container, Grid, Paper } from "@mui/material";
 // Tables
-import ClustersTable from "./clusters-dashboard-table";
-import AgentsTable from "./agents-dashboard-table";
-import EntriesTable from "./entries-dashboard-table";
-import DashboardDrawer from "./dashboard-drawer";
+import ClusterDashboardTableStyled from "./clusters-dashboard-table";
+import AgentDashboardTableStyled from "./agents-dashboard-table";
+import EntriesDashBoardTableStyled from "./entries-dashboard-table";
+import DashboardDrawerStyled from "./dashboard-drawer";
 
 const styles = (theme) => ({
   root: {
@@ -97,10 +97,11 @@ class DashboardDetails extends React.Component {
 
   render() {
     const { selectedDataKey } = this.state;
-    const { classes, selectedData } = this.props;
+    const classes = withStyles.getClasses(this.props);
+    const { selectedData } = this.props;
     return (
       <div className={classes.root}>
-        <DashboardDrawer />
+        <DashboardDrawerStyled />
         <main className={classes.content}>
           <div className={classes.appBarSpacer} />
           {selectedData.length !== 0 && !selectedData[0] && (
@@ -133,7 +134,7 @@ class DashboardDetails extends React.Component {
                       {/* Agents Table */}
                       <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                          <AgentsTable
+                          <AgentDashboardTableStyled
                             numRows={100}
                             filterByCluster={selectedDataKey["agentsFilter"]}
                           />
@@ -144,7 +145,7 @@ class DashboardDetails extends React.Component {
                       {/* Entries Table */}
                       <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                          <EntriesTable
+                          <EntriesDashBoardTableStyled
                             numRows={100}
                             filterByCluster={selectedDataKey["entriesFilter"]}
                           />
@@ -185,7 +186,7 @@ class DashboardDetails extends React.Component {
                       {/* Clusters Table */}
                       <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                          <ClustersTable
+                          <ClusterDashboardTableStyled
                             numRows={100}
                             filterByCluster={selectedDataKey["clustersFilter"]}
                           />
@@ -196,7 +197,7 @@ class DashboardDetails extends React.Component {
                       {/* Entries Table */}
                       <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                          <EntriesTable
+                          <EntriesDashBoardTableStyled
                             numRows={100}
                             filterByAgentId={selectedDataKey["entriesFilter"]}
                           />
@@ -247,7 +248,7 @@ class DashboardDetails extends React.Component {
                       {/* Clusters Table */}
                       <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                          <ClustersTable
+                          <ClusterDashboardTableStyled
                             numRows={100}
                             filterByCluster={selectedDataKey["clustersFilter"]}
                           />
@@ -258,7 +259,7 @@ class DashboardDetails extends React.Component {
                       {/* Agents Table */}
                       <Grid item xs={12}>
                         <Paper className={classes.paper}>
-                          <AgentsTable
+                          <AgentDashboardTableStyled
                             numRows={100}
                             filterByAgentId={selectedDataKey["agentsFilter"]}
                           />
@@ -273,7 +274,7 @@ class DashboardDetails extends React.Component {
                   {/* Clusters Table */}
                   <Grid item xs={12}>
                     <Paper className={classes.paper}>
-                      <ClustersTable 
+                      <ClusterDashboardTableStyled
                         numRows={100}
                         filterByCluster={selectedDataKey["clustersFilter"]} 
                       />
@@ -286,7 +287,7 @@ class DashboardDetails extends React.Component {
                   {/* Agents Table */}
                   <Grid item xs={12}>
                     <Paper className={classes.paper}>
-                      <AgentsTable 
+                      <AgentDashboardTableStyled 
                         numRows={100} 
                         filterByAgentId={selectedDataKey["agentsFilter"]}
                         filterByCluster={selectedDataKey["agentsFilter"]}
@@ -300,7 +301,7 @@ class DashboardDetails extends React.Component {
                   {/* Entries Table */}
                   <Grid item xs={12}>
                     <Paper className={classes.paper}>
-                      <EntriesTable 
+                      <EntriesDashBoardTableStyled 
                         numRows={100}
                         filterByAgentId={selectedDataKey["entriesFilter"]}
                         filterByCluster={selectedDataKey["entriesFilter"]}
@@ -321,6 +322,6 @@ const mapStateToProps = (state) => ({
   globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
 });
 
-export default withStyles(styles)(
-  connect(mapStateToProps, {})(DashboardDetails)
-);
+const DashboardDetailsStyled = withStyles(DashboardDetails, styles);
+export default connect(mapStateToProps, {})(DashboardDetailsStyled);
+