Removed erros and some warning while building with ESlint enabled

.gitignore

@@ -5,6 +5,7 @@
 /styleguideServer/node_modules
 /ReactApp/node_modules
 /ReactApp/storybook-static
+/ReactApp/dist
 /node_modules
 /.pnp
 .pnp.js

ReactApp/src/components/AlarmHandler/EnableDialog.jsx

@@ -11,13 +11,11 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 
-import DateFnsUtils from "@date-io/date-fns";
 import { formatISO, parseISO, setSeconds, addHours } from "date-fns";
 
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { MobileDateTimePicker } from "@mui/x-date-pickers/MobileDateTimePicker";
-import { TextField } from "@mui/material";
 // Styles
 const useStyles = makeStyles((theme) => ({
   boldText: {

ReactApp/src/components/AlarmHandler/ScheduleDialog.jsx

@@ -21,7 +21,6 @@ import SmsOutlinedIcon from "@mui/icons-material/SmsOutlined";
 import WhatsAppIcon from "@mui/icons-material/WhatsApp";
 import SignalIcon from "./SignalIcon";
 
-import DateFnsUtils from "@date-io/date-fns";
 import {
   formatISO,
   isSameDay,

ReactApp/src/components/ArchiverDataViewer/ArchiverDataViewer.jsx

@@ -4,7 +4,6 @@ import ContextMenu from "../SystemComponents/ContextMenu";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
-import DateFnsUtils from "@date-io/date-fns";
 import formatISO from "date-fns/formatISO";
 import {
   subHours,

ReactApp/src/components/AreaDetector/AreaDetector.jsx

@@ -7,7 +7,6 @@ import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/system";
-import GraphHeatmap from "./GraphHeatmap";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
@@ -35,7 +34,6 @@ import PluginsMore from "./PluginsMore";
 const AreaDetector = (props) => {
   const [tabVal, setTabVal] = useState(0);
   const [morePluginsR, setMorePluginsR] = useState(null);
-  const muiTextFieldProps = { size: "small", variant: "standard" };
   const theme = useTheme();
   const paperElevation = theme.palette.paperElevation;
   return (

ReactApp/src/components/AreaDetector/Attributes.jsx

@@ -6,12 +6,10 @@ import TableBody from "@mui/material/TableBody";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
-import { useTheme } from "@mui/system";
 import { StyledTableCell } from "./TableStyles";
 
 const Attributes = (props) => {
   const muiTextFieldProps = { size: "small", variant: "standard" };
-  const theme = useTheme();
   return (
     <Table size="small">
       <TableHead>

ReactApp/src/components/AreaDetector/Buffers.jsx

@@ -8,12 +8,10 @@ import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import SelectionInput from "../BaseComponents/SelectionInput";
 import ActionButton from "../BaseComponents/ActionButton";
-import { useTheme } from "@mui/system";
 import { StyledTableCell } from "./TableStyles";
 
 const Buffers = (props) => {
   const muiTextFieldProps = { size: "small", variant: "standard" };
-  const theme = useTheme();
   return (
     <Table size="small">
       <TableHead>

ReactApp/src/components/AreaDetector/GraphHeatmap.jsx

@@ -5,7 +5,6 @@ import ContextMenu from "../SystemComponents/ContextMenu";
 import PV from "../SystemComponents/PV";
 import Plot from "react-plotly.js";
 import { isMobileOnly } from "react-device-detect";
-import { replaceMacros } from "../SystemComponents/Utils/macroReplacement";
 const PlotData = (props) => {
   const theme = useTheme();
   const updateDataReducer = (pvs, newData) => {

ReactApp/src/components/AreaDetector/Plugins.jsx

@@ -1,11 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import TextUpdate from "../BaseComponents/TextUpdate";
-import { useTheme } from "@mui/system";
 import { StyledTableCell } from "./TableStyles";
 import RadioButton from "../BaseComponents/RadioButton";
 import SettingsIcon from "@mui/icons-material/Settings";

ReactApp/src/components/AreaDetector/PluginsMore.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 
 import TextOutput from "../BaseComponents/TextOutput";
 import TextInput from "../BaseComponents/TextInput";
@@ -12,16 +12,13 @@ import SelectionInput from "../BaseComponents/SelectionInput";
 import ActionButton from "../BaseComponents/ActionButton";
 
 import Stack from "@mui/system/Stack";
-import { useTheme } from "@mui/system";
 import { StyledTableCell } from "./TableStyles";
 import { Typography } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 
 const PluginsMore = (props) => {
   const muiTextFieldProps = { size: "small", variant: "standard" };
-  const theme = useTheme();
-  const paperElevation = theme.palette.paperElevation;
   return (
     <Table size="small">
       <TableHead>

ReactApp/src/components/AreaDetector/ReadOut.jsx

@@ -7,7 +7,6 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import SelectionInput from "../BaseComponents/SelectionInput";
-import { useTheme } from "@mui/system";
 import { StyledTableCell } from "./TableStyles";
 
 const ReadOut = (props) => {

ReactApp/src/components/AreaDetector/Setup.jsx

@@ -7,7 +7,6 @@ import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import ActionButton from "../BaseComponents/ActionButton";
 import Stack from "@mui/system/Stack";
-import { useTheme } from "@mui/system";
 import { StyledTableCell } from "./TableStyles";
 import { Typography } from "@mui/material";
 

ReactApp/src/components/AreaDetector/Shutter.jsx

@@ -7,7 +7,6 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import SelectionInput from "../BaseComponents/SelectionInput";
-import { useTheme } from "@mui/system";
 import { StyledTableCell } from "./TableStyles";
 import { Accordion } from "@mui/material";
 import { AccordionSummary } from "@mui/material";

ReactApp/src/components/BaseComponents/BitIndicators.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import withStyles from "@mui/styles/withStyles";
 import { Grid, FormControlLabel, SvgIcon, useTheme } from "@mui/material";
 import { Lens } from "@mui/icons-material";
 import PropTypes from "prop-types";

ReactApp/src/components/BaseComponents/Gauge.jsx

@@ -23,7 +23,6 @@ function getTickValues(
   xOffset,
   radialTextOffset
 ) {
-  const { classes } = props;
   let ticks = [];
   let i = 0;
   for (i = 0; i < numberOfTicks; i++) {
@@ -59,7 +58,6 @@ function getTickValues(
 function GaugeComponent(props) {
   const theme = useTheme();
   const gradientId = uuidv4();
-  const { classes } = props;
   const units = props.units;
   const value = props.value;
   const min = props.min;

ReactApp/src/components/BaseComponents/ProgressBar.jsx

@@ -36,7 +36,6 @@ function getTickValues(
   yOffset,
   value
 ) {
-  const { classes } = props;
   let ticks = [];
   let i = 0;
   if (typeof props.disabled === "undefined") {
@@ -290,7 +289,6 @@ const ProgressBarInternalComponent = (props) => {
   ]);
 
   const { initialized } = props;
-  const { classes } = props;
   let units;
   let value;
   let min;

ReactApp/src/components/ControlScreens/Components/EditorSinglePS.jsx

@@ -6,7 +6,6 @@ import TextOutput from '../../BaseComponents/TextOutput';
 import Slider from '../../BaseComponents/Slider';
 import Grid from '@mui/material/Grid';
 import ToggleButton from '../../BaseComponents/ToggleButton';
-import withStyles from '@mui/styles/withStyles';
 import Button from '@mui/material/Button';
 import { Link } from 'react-router-dom'
 import ThumbWheel from '../../BaseComponents/ThumbWheel';

ReactApp/src/components/SettingsPages/Probe.jsx

@@ -1,19 +1,15 @@
 import React from "react";
 
-import AutomationStudioContext from "../SystemComponents/AutomationStudioContext";
 import TextInput from "../BaseComponents/TextInput";
 import TextOutput from "../BaseComponents/TextOutput";
 import Slider from "../BaseComponents/Slider";
 import Grid from "@mui/material/Grid";
 import GraphY from "../BaseComponents/GraphY";
 import TextField from "@mui/material/TextField";
 import { useLocation } from "react-router-dom";
-import { useTheme } from "@mui/material/styles";
 
 const Probe = () => {
-  const context = React.useContext(AutomationStudioContext);
   const location = useLocation();
-  const theme = useTheme();
   const probeObject = JSON.parse(decodeURIComponent(location.search.substr(1)));
   let probetype;
 
@@ -257,19 +253,7 @@ const Probe = () => {
                       disabled
                       margin="none"
                       variant="outlined"
-                      InputLabelProps={{
-                        classes: {
-                          root: classes.cssLabel,
-                          focused: classes.cssFocused,
-                        },
-                      }}
                       InputProps={{
-                        classes: {
-                          root: classes.cssOutlinedInput,
-                          focused: classes.cssFocused,
-                          input: classes.input,
-                          notchedOutline: classes.notchedOutline,
-                        },
                         readOnly: true,
                       }}
                     />

ReactApp/src/components/SvgBeamlineComponents/BendingMagnet.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import Widget from "../SystemComponents/Widgets/Widget";
-import withStyles from '@mui/styles/withStyles';
 
 import { v4 as uuidv4 } from 'uuid';
 import  {svgHeight,svgCenterY,svgWidth,svgCenterX} from "../SystemComponents/svgConstants";

ReactApp/src/components/SvgBeamlineComponents/FC.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import Button from '@mui/material/Button';
 import Widget from "../SystemComponents/Widgets/Widget";
-import withStyles from '@mui/styles/withStyles';
 import { svgHeight, svgCenterY, svgWidth, svgCenterX } from "../SystemComponents/svgConstants";
 import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';

ReactApp/src/components/SvgBeamlineComponents/Harp.jsx

@@ -1,7 +1,6 @@
 import React,{useState} from 'react'
 import Button from '@mui/material/Button';
 import Widget from "../SystemComponents/Widgets/Widget";
-import withStyles from '@mui/styles/withStyles';
 import { svgHeight, svgCenterY, svgWidth, svgCenterX } from "../SystemComponents/svgConstants";
 import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';

ReactApp/src/components/SvgBeamlineComponents/QuadrapoleMagnet.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import Widget from "../SystemComponents/Widgets/Widget";
-import withStyles from '@mui/styles/withStyles';
 import { v4 as uuidv4 } from 'uuid';
 import  {svgHeight,svgCenterY,svgWidth,svgCenterX} from "../SystemComponents/svgConstants";
 import PropTypes from 'prop-types';

ReactApp/src/components/SvgBeamlineComponents/SlitXY.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import Widget from "../SystemComponents/Widgets/Widget";
-import withStyles from "@mui/styles/withStyles";
 import {
   svgHeight,
   svgCenterY,

ReactApp/src/components/SvgBeamlineComponents/SteererXYMagnet.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import Widget from "../SystemComponents/Widgets/Widget";
-import withStyles from "@mui/styles/withStyles";
 import {
   svgHeight,
   svgCenterY,

ReactApp/src/components/SvgBeamlineComponents/SteererYMagnet.jsx

@@ -1,7 +1,6 @@
 import React  from 'react'
 
 import Widget from "../SystemComponents/Widgets/Widget";
-import withStyles from '@mui/styles/withStyles';
 import  {svgHeight,svgCenterY,svgWidth,svgCenterX} from "../SystemComponents/svgConstants";
 import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';

ReactApp/src/components/SystemComponents/ProtectedRoute.jsx

@@ -6,7 +6,6 @@ import { useLocation, Navigate } from "react-router-dom";
 
 const ProtectedRoute = (props) => {
   const location = useLocation();
-  const Component = props.component;
   const context = useContext(AutomationStudioContext);
   const loggingIn = context.userData.loggingIn;
   const loggedIn =

ReactApp/src/components/SystemComponents/Utils/widgetProps.jsx

@@ -13,4 +13,4 @@ const nonNegativeInteger = (props, propName, componentName) => {
   }
 };
 
-export default { nonNegativeInteger };
+export default nonNegativeInteger;

ReactApp/src/components/UI/Layout/ComposedLayouts/TraditionalLayout.jsx

@@ -3,7 +3,6 @@ import React, { useState, useContext } from "react";
 import PropTypes from "prop-types";
 
 import { useTheme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";