correcting bugs in obj info pages

.babelrc

@@ -6,6 +6,6 @@
   "plugins": [
     "@babel/plugin-transform-runtime",
     "@babel/plugin-transform-async-to-generator",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-transform-class-properties"
   ]
 }

package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "@axa-fr/react-oidc-context": "^3.1.6",
     "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-transform-async-to-generator": "^7.12.1",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.12.5",

src/index.js

@@ -1,4 +1,3 @@
-import 'typeface-roboto';
 import "./index.css";
 import './i18n.js';
 import App from "./js/components/App.jsx";

src/js/components/Actions.jsx

@@ -87,14 +87,11 @@ function ConfirmationDialog(props) {
 		props.handleClose()
 		setData({...data, acks: [], confirmations: [], action: null})
 	}
-	function handleEntering(e) {
-	}
 
 	return (
 		<Dialog
 			disableBackdropClick
 			maxWidth="xs"
-			onEntering={handleEntering}
 			onClose={handleCancel}
 			aria-labelledby="confirmation-dialog-title"
 			open={props.open}

src/js/components/App.jsx

@@ -1,6 +1,6 @@
 'use strict';
 import React from "react";
-import ReactDOM from "react-dom";
+import {createRoot} from "react-dom/client";
 import { useReactOidc } from "@axa-fr/react-oidc-context"
 import { useTranslation } from "react-i18next"
 import { useStateValue } from '../state.js'
@@ -241,7 +241,7 @@ function AuthProvider(props) {
 		return null
 	}
 	if ((authChoice == "basic") && (!basicLogin.username || !basicLogin.password)) {
-                return <Login />
+		return <Login />
 	}
 	if (!authChoice && !oidcUser && location.pathname != "/authentication/callback") {
 		return <AuthChoice />
@@ -346,7 +346,6 @@ function AppError(props) {
 	)
 }
 
-
 const domContainer = document.querySelector('#app');
-ReactDOM.render(<App />, domContainer);
-
+const root = createRoot(domContainer)
+root.render(<App />)

src/js/components/CatalogSelector.jsx

@@ -10,7 +10,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import useClasses from "../hooks/useClasses.jsx";
 
-const useStyles = theme => ({
+const styles = theme => ({
 	selected: {
 		cursor: "pointer",
 	},
@@ -26,7 +26,7 @@ const useStyles = theme => ({
 });
 
 function CatalogSelectorDialog(props) {
-	const classes = useStyles(useStyles)
+	const classes = useClasses(styles)
 	if (!props.options) {
 		return null
 	}
@@ -76,7 +76,7 @@ function CatalogSelector(props) {
 	if (props.options === undefined) {
 		return null
 	}
-	const classes = useClasses(useStyles)
+	const classes = useClasses(styles)
 	const [open, setOpen] = React.useState(false)
 
 	function handleClickOpen(e) {

src/js/components/DeployButton.jsx

@@ -12,6 +12,7 @@ import DialogTitle from "@mui/material/DialogTitle"
 import Button from "@mui/material/Button"
 import IconButton from "@mui/material/IconButton"
 import Tooltip from "@mui/material/Tooltip"
+import {useCatalogs} from "../hooks/Catalogs.jsx";
 
 function DeployButton(props) {
 	const { auth } = useUser()

src/js/components/ObjDetails.jsx

@@ -66,7 +66,7 @@ function ObjMain(props) {
 }
 
 function CfgMain(props) {
-	const classes = styles()
+	const classes = useClasses(styles)
 	const sp = splitPath(props.path)
 	return (
 		<Grid item xs={12} className={classes.section}>
@@ -76,7 +76,7 @@ function CfgMain(props) {
 }
 
 function UsrMain(props) {
-	const classes = styles()
+	const classes = useClasses(styles)
 	const sp = splitPath(props.path)
 	return (
 		<Grid item xs={12} className={classes.section}>
@@ -88,7 +88,7 @@ function UsrMain(props) {
 function SvcMain(props) {
 	const sp = splitPath(props.path)
 	const [{ cstat }, dispatch] = useStateValue();
-	const classes = styles()
+	const classes = useClasses(styles)
 
 	if (cstat.monitor === undefined) {
 		return null

src/js/components/ObjInstanceCounts.jsx

@@ -77,6 +77,6 @@ function ObjInstanceCounts(props) {
 	)
 }
 
-export {
+export default {
 	ObjInstanceCounts
 }

src/js/components/ObjInstances.jsx

@@ -17,6 +17,7 @@ import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import Checkbox from '@mui/material/Checkbox';
 import useClasses from "../hooks/useClasses.jsx";
+import ObjInstanceCounts from "./ObjInstanceCounts.jsx"
 
 const styles = theme => ({
 	tableWrapper: {
@@ -114,12 +115,12 @@ function ObjInstances(props) {
 		<Card className={classes.card}>
 			<CardHeader
 				title={t("Instances")}
-				subheader=<ObjInstanceCounts path={props.path} />
-				action={
-					<TableToolbar selected={selected}>
-						{(selected.length > 0) && <ObjInstanceActions selected={selected} title="" />}
-					</TableToolbar>
-				}
+				subheaderTypographyProps=<ObjInstanceCounts path={props.path} />
+			action={
+			<TableToolbar selected={selected}>
+				{(selected.length > 0) && <ObjInstanceActions selected={selected} title="" />}
+			</TableToolbar>
+		}
 			/>
 			<CardContent className={classes.content}>
 				<div className={classes.tableWrapper}>

src/js/components/ObjKeyActions.jsx

@@ -48,7 +48,7 @@ function ObjKeyActions(props) {
 		<Actions path={path} title={title} submit={submit} fab={fab}>
 			<ActionsSection name="dangerous" color="danger" confirms={6}>
 				<ActionsItem value="delete" text="Delete" requires={{role: "admin", namespace: sp.namespace}}
-					icon=<DeleteIcon />
+							 icon=<DeleteIcon />
 				/>
 			</ActionsSection>
 		</Actions>

src/js/components/ObjKeys.jsx

@@ -53,15 +53,15 @@ function ObjKeys(props) {
                 setSelected([]);
         }
 	return (
-                <Card>
-                        <CardHeader
-                                title={t("Keys")}
-                                subheader={props.path}
+		<Card>
+			<CardHeader
+				title={t("Keys")}
+				subheader={props.path}
 				action={
 					<ObjKeyAdd path={props.path} />
 				}
-                        />
-                        <CardContent>
+			/>
+			<CardContent>
 				<div className={classes.wrapper}>
 					<TableToolbar selected={selected}>
 						{selected.length > 0 ? (

src/js/components/ObjKindSelector.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useStateValue } from '../state.js';
-import ToggleButton from '@mui/lab/ToggleButton';
-import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import LockOpenIcon from '@mui/icons-material/LockOpen';