Merge branch 'dev' into chronos-npm

__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;

app/components/WindowBar/WindowBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-// import Close from '@material-ui/icons/Close';
-// import Maximize from '@material-ui/icons/CheckBoxOutlineBlankSharp';
-// import Minimize from '@material-ui/icons/RemoveSharp';
+// import Close from '@mui/icons-material/Close';
+// import Maximize from '@mui/icons-material/CheckBoxOutlineBlankSharp';
+// import Minimize from '@mui/icons-material/RemoveSharp';
 import './styles.scss'; 
 
 // const { ipcRenderer } = window.require('electron');

app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { ApplicationContext } from '../../context/ApplicationContext';
 import { DashboardContext } from '../../context/DashboardContext';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { AwsContext } from '../../context/AwsContext';
 import './styles.scss';
 import { useLocation } from 'react-router-dom';

app/containers/DockerHealthContainer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react';
 import { HealthContext } from '../context/HealthContext';
 import { QueryContext } from '../context/QueryContext';
 import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
 

app/containers/EventContainer.tsx

@@ -4,7 +4,7 @@ import { EventContext } from '../context/EventContext';
 import { HealthContext } from '../context/HealthContext';
 import { QueryContext } from '../context/QueryContext';
 import EventChart from '../charts/EventChart';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart';
 import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
 

app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx

@@ -4,7 +4,7 @@ import { ApplicationContext } from '../../context/ApplicationContext';
 import * as DashboardContext from '../../context/DashboardContext';
 import lightAndDark from '../../components/Styling';
 import './styles.scss';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 const { ipcRenderer } = window.require('electron');
 
 const MetricsContainer: React.FC = React.memo(props => {

app/containers/SidebarContainer/SidebarContainer.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
-import ListIcon from '@material-ui/icons/List';
-import InfoIcon from '@material-ui/icons/Info';
-import ContactSupportIcon from '@material-ui/icons/ContactSupport';
-import SettingsIcon from '@material-ui/icons/Settings';
+import ListIcon from '@mui/icons-material/List';
+import InfoIcon from '@mui/icons-material/Info';
+import ContactSupportIcon from '@mui/icons-material/ContactSupport';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 import './styles.scss';
 import { ApplicationContext } from '../../context/ApplicationContext';

app/context/ApplicationContext.tsx

@@ -38,13 +38,12 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
    */
   // v10: Invoked by connectToDB, passing in app (card title)
   const fetchServicesNames = useCallback((application: string) => {
-   
+
     ipcRenderer.send('servicesRequest');
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
       //data here refers to the services coming the services document of the database
       let result: any;
       result = JSON.parse(data);
-      // console.log({result})
       setServicesData(result);
       ipcRenderer.removeAllListeners('servicesResponse');
     });

app/index.tsx

@@ -1,25 +1,41 @@
 import React from 'react';
+// import { adaptV4Theme } from '@mui/styles';
+import { createTheme, adaptV4Theme } from '@mui/material/styles'
 import ReactDOM from 'react-dom';
 
 // REACT 18 Syntax below
 // import { createRoot } from 'react-dom/client';
 
 import './index.scss';
-import { createTheme, ThemeProvider } from '@material-ui/core/';
+import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material';
 import App from './App';
 import WindowBar from './components/WindowBar/WindowBar';
 
-const theme = createTheme({
+// declare module '@mui/styles/defaultTheme' {
+//   // eslint-disable-next-line @typescript-eslint/no-empty-interface
+//   interface DefaultTheme extends Theme {}
+// }
+
+
+const theme = createTheme(adaptV4Theme({
+  // v4 theme
   typography: {
     fontFamily: ['Roboto', 'sans-serif'].join(','),
   },
-});
+}));
+// const theme = createTheme(adaptV4Theme({
+//   typography: {
+//     fontFamily: ['Roboto', 'sans-serif'].join(','),
+//   },
+// }));
 
 // React 17 Syntax below
 ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    <WindowBar />
-    <App />
-  </ThemeProvider>,
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={theme}>
+      <WindowBar />
+      <App />
+    </ThemeProvider>
+  </StyledEngineProvider>,
   document.getElementById('app')
 );

app/modals/AddModal/ServiceDBType.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 
 const ServiceDBType = (props) => {
+  const { typeOfService, handleChange, database } = props
   return (
     <>
       <div>
@@ -11,8 +12,8 @@ const ServiceDBType = (props) => {
           <select
             id="serv-type"
             name="typeOfService"
-            value={props.typeOfService}
-            onChange={e => props.handleChange(e)}
+            value={typeOfService}
+            onChange={e => handleChange(e)}
           >
             <option value="Docker">Docker</option>
             <option value="gRPC">gRPC</option>
@@ -24,7 +25,7 @@ const ServiceDBType = (props) => {
           <label htmlFor="db-type">
             Type of Database<span>*</span>
           </label>
-          <select id="db-type" name="database" value={props.database} onChange={e => props.handleChange(e)}>
+          <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
             <option value="SQL">SQL</option>
             <option value="MongoDB">MongoDB</option>
           </select>

app/modals/AddModal/ServicesDescription.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const ServicesDescription = (props) => {
+  const { URI, handleChange, name, description } = props;
   return (
     <>
       <div>
@@ -10,8 +11,8 @@ const ServicesDescription = (props) => {
           <input
             id="db-uri"
             name="URI"
-            value={props.URI}
-            onChange={e => props.handleChange(e)}
+            value={URI}
+            onChange={e => handleChange(e)}
             placeholder="Database URI"
             required
           />
@@ -24,8 +25,8 @@ const ServicesDescription = (props) => {
             id="db-name"
             type="text"
             name="name"
-            value={props.name}
-            onChange={e => props.handleChange(e)}
+            value={name}
+            onChange={e => handleChange(e)}
             placeholder="Add a name for your new service"
             required
           />
@@ -35,8 +36,8 @@ const ServicesDescription = (props) => {
           <textarea
             id="db-desc"
             name="description"
-            value={props.description}
-            onChange={e => props.handleChange(e)}
+            value={description}
+            onChange={e => handleChange(e)}
             placeholder="Add a short description"
           />
         </div>

app/modals/AwsModal/AwsDescription.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsDescription = (props) => {
+  const { name, handleChange, description } = props;
   return (
     <>
       <div>
@@ -11,8 +12,8 @@ const AwsDescription = (props) => {
           id="aws-name"
           type="text"
           name="name"
-          value={props.name}
-          onChange={e => props.handleChange(e)}
+          value={name}
+          onChange={e => handleChange(e)}
           placeholder="Add a name for your new service"
           required
         />
@@ -22,8 +23,8 @@ const AwsDescription = (props) => {
         <textarea
           id="db-desc"
           name="description"
-          value={props.description}
-          onChange={e => props.handleChange(e)}
+          value={description}
+          onChange={e => handleChange(e)}
           placeholder="Add a short description"
         />
       </div>