Merge branch 'dev' into chronos-npm

Author: sarhiri

__backend-tests__/chronosMethods.test.js

@@ -1,4 +1,4 @@
-const { EcoTwoTone } = require('@material-ui/icons');
+const { EcoTwoTone } = require('@mui/icons-material');
 const Chronos = require('../chronos_npm_package/chronos.js');
 const helpers = require('../chronos_npm_package/controllers/utilities.js');
 const hpropagate = require('hpropagate');

app/charts/RouteChart.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import React, { useContext } from 'react';
 import Graph from 'react-graph-vis';
 import { CommsContext } from '../context/CommsContext';

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,11 +1,11 @@
 
 import React, { useContext, useRef } from "react";
 import { useNavigate } from 'react-router-dom';
-import { Card,CardHeader,IconButton,CardContent,Typography } from "@material-ui/core";
+import { Card,CardHeader,IconButton,CardContent,Typography } from "@mui/material";
 import { DashboardContext } from "../../context/DashboardContext";
 import { ApplicationContext } from "../../context/ApplicationContext";
-import HighlightOffIcon from '@material-ui/icons/HighlightOff';
-import UpdateIcon from '@material-ui/icons/Update';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import UpdateIcon from '@mui/icons-material/Update';
 import './styles.scss'
 
 type ClickEvent = React.MouseEvent<HTMLElement>;
@@ -84,7 +84,7 @@ const ApplicationsCard = (props) => {
               className={classes.iconbutton}
               aria-label="Delete"
               onClick={event => confirmDelete(event, i)}
-            >
+              size="large">
               <HighlightOffIcon
                 className={classes.btnStyle}
                 id="deleteIcon"
@@ -109,7 +109,7 @@ const ApplicationsCard = (props) => {
         </div>
       </Card>
     </div>
-  )
+  );
 }
 
 export default ApplicationsCard

app/components/AwsEC2Graphs.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import AwsChart from '../charts/AwsChart';
 import { AwsContext } from '../context/AwsContext';
-import { CircularProgress } from '@material-ui/core';
-import zIndex from '@material-ui/core/styles/zIndex';
+import { CircularProgress } from '@mui/material';
+// import zIndex from '@mui/styles/zIndex';
 
 const AwsEC2Graphs: React.FC = React.memo(props => {
   const { awsData, setAwsData, isLoading, setLoadingState } = useContext(AwsContext);

app/components/ClusterTable.tsx

@@ -7,8 +7,8 @@ import {
   TableHead,
   TableRow,
   Paper,
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+} from '@mui/material';
+import { makeStyles } from '@mui/styles/';
 import { AwsContext } from '../context/AwsContext';
 
 const useStyles = makeStyles({

app/components/Copyright.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Typography, Link } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography, Link } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import '../stylesheets/Applications.scss';
 
 export interface CopyrightProps {}

app/components/DashboardIcons/DashboardIcons.tsx

@@ -1,10 +1,10 @@
 import { CommsContext } from "../../context/CommsContext"
 import { DashboardContext } from "../../context/DashboardContext"
-import DashboardIcon from '@material-ui/icons/Dashboard';
-import NotificationsIcon from '@material-ui/icons/Notifications';
-import Badge from '@material-ui/core/Badge';
-import PersonIcon from '@material-ui/icons/Person';
-import { Button } from '@material-ui/core';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import Badge from '@mui/material/Badge';
+import PersonIcon from '@mui/icons-material/Person';
+import { Button } from '@mui/material';
 import React, { useContext,useState } from "react"
 import './styles.scss'
 

app/components/Occupied/Occupied.tsx

@@ -7,10 +7,10 @@
 import React, { useContext, useEffect, useState } from 'react';
 
 // MATERIAL UI METHODS
-import { Modal, Button } from '@material-ui/core';
+import { Modal, Button } from '@mui/material';
 
 // MATERIAL UI ICONS
-import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
+import AddCircleOutlineTwoToneIcon from '@mui/icons-material/AddCircleOutlineTwoTone';
 
 // // MODALS
 // import AddModal from '../modals/AddModal';

app/components/Occupied/helpers/muiHelper.ts

@@ -1,11 +1,11 @@
 
-import { makeStyles } from '@material-ui/core/styles';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@mui/styles';
+// import { BaseCSSProperties } from '@mui/system';
 
  // Conditional Rendering of UI Modals for Light and Dark Mode
 // Theme, StyleProps
 
-export const useStylesDark = makeStyles<BaseCSSProperties>(theme => ({
+export const useStylesDark = makeStyles(theme => ({
   // ALL CARDS
   paper: {
     display: 'flex',
@@ -59,7 +59,7 @@ export const useStylesDark = makeStyles<BaseCSSProperties>(theme => ({
   },
 }));
 
-export const useStylesLight = makeStyles<BaseCSSProperties>(theme => ({
+export const useStylesLight = makeStyles(theme => ({
   // ALL CARDS
   paper: {
     display: 'flex',

app/components/TransferColumns.tsx

@@ -6,7 +6,9 @@ import { EventContext } from '../context/EventContext';
 import { DataGrid } from '@material-ui/data-grid';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from './Styling';
-import { Button, TextField } from '@material-ui/core';
+
+import { Button, TextField } from '@mui/material';
+import SearchBar from './SearchBar/SearchBar';
 
 interface Params {
   service: string;