[grid] Linting the Grid UI

Author: diemol

javascript/grid-ui/src/App.tsx

@@ -74,7 +74,7 @@ function App () {
 
   return (
     <ApolloProvider client={client}>
-      <Box display="flex">
+      <Box display='flex'>
         <TopBar
           subheader={topBarSubheader}
           error={error !== undefined}
@@ -91,7 +91,7 @@ function App () {
           />
         )}
         <Box
-          component="main"
+          component='main'
           sx={{
             flexGrow: 1,
             height: '100vh',
@@ -101,13 +101,13 @@ function App () {
         >
           <Container maxWidth={false} sx={{ paddingY: 4 }}>
             <Routes>
-              <Route path="/sessions" element={<Sessions/>}/>
-              <Route path="/help" element={<Help/>}/>
-              <Route path="/" element={<Overview/>}/>
-              <Route path="*" element={<Help/>}/>
+              <Route path='/sessions' element={<Sessions />} />
+              <Route path='/help' element={<Help />} />
+              <Route path='/' element={<Overview />} />
+              <Route path='*' element={<Help />} />
             </Routes>
           </Container>
-          <Footer/>
+          <Footer />
         </Box>
       </Box>
     </ApolloProvider>

javascript/grid-ui/src/components/EnhancedTableToolbar.tsx

@@ -24,11 +24,12 @@ function EnhancedTableToolbar (props) {
   return (
     <Toolbar sx={{ paddingLeft: 2, paddingRight: 1 }}>
       <Typography
-        textAlign={'center'}
+        textAlign='center'
         sx={{ flex: '1 1 100%' }}
-        variant="h3"
-        id="tableTitle"
-        component="div">
+        variant='h3'
+        id='tableTitle'
+        component='div'
+      >
         {title}
       </Typography>
     </Toolbar>

javascript/grid-ui/src/components/Error/Error.tsx

@@ -22,31 +22,31 @@ function Error (props) {
   const { message, errorMessage } = props
   return (
     <Box
-      height="100%"
-      width="100%"
+      height='100%'
+      width='100%'
       paddingY={3}
     >
       <Box
-        display="flex"
-        flexDirection="column"
-        height="100%"
-        justifyContent="center"
+        display='flex'
+        flexDirection='column'
+        height='100%'
+        justifyContent='center'
       >
-        <Container maxWidth="md">
+        <Container maxWidth='md'>
           <Box mb={3}>
             <Typography
-              align="center"
-              color="textPrimary"
-              variant="h3"
+              align='center'
+              color='textPrimary'
+              variant='h3'
             >
               {message}
             </Typography>
           </Box>
           <Typography
-            align="center"
-            color="textPrimary"
-            variant="h4"
-            component="span"
+            align='center'
+            color='textPrimary'
+            variant='h4'
+            component='span'
           >
             <pre>
               {errorMessage}

javascript/grid-ui/src/components/LiveView/LiveView.tsx

@@ -23,9 +23,9 @@ import Snackbar from '@mui/material/Snackbar'
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert (
   props,
-  ref,
+  ref
 ) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+  return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />
 })
 
 function LiveView (props) {
@@ -148,7 +148,7 @@ function LiveView (props) {
       onMouseLeave={handleMouseLeave}
     >
       <PasswordDialog
-        title="LiveView (VNC) Password"
+        title='LiveView (VNC) Password'
         open={open}
         openDialog={handlePasswordDialog}
         onConfirm={handleCredentialsEntered}
@@ -160,7 +160,7 @@ function LiveView (props) {
         autoHideDuration={6000}
         onClose={handleClose}
       >
-        <Alert severity="error" sx={{ width: '100%' }}>
+        <Alert severity='error' sx={{ width: '100%' }}>
           {message}
         </Alert>
       </Snackbar>
@@ -170,7 +170,7 @@ function LiveView (props) {
         autoHideDuration={4000}
         onClose={() => setOpenSuccessAlert(false)}
       >
-        <Alert severity="success" sx={{ width: '100%' }}>
+        <Alert severity='success' sx={{ width: '100%' }}>
           Connected successfully!
         </Alert>
       </Snackbar>

javascript/grid-ui/src/components/LiveView/PasswordDialog.tsx

@@ -64,7 +64,7 @@ const PasswordDialog = (props) => {
     <Dialog
       open={open}
       onClose={() => openDialog(false)}
-      aria-labelledby="password-dialog"
+      aria-labelledby='password-dialog'
     >
       <DialogTitle id='password-dialog'>{title}</DialogTitle>
       <DialogContent>
@@ -73,17 +73,17 @@ const PasswordDialog = (props) => {
         </DialogContentText>
         <FormControl
           sx={{ margin: 1, width: '25ch' }}
-          variant="standard"
+          variant='standard'
         >
           <InputLabel
-            htmlFor="standard-adornment-password"
+            htmlFor='standard-adornment-password'
           >
             Password
           </InputLabel>
           <Input
-            id="standard-adornment-password"
+            id='standard-adornment-password'
             autoFocus
-            margin="dense"
+            margin='dense'
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             fullWidth
@@ -105,22 +105,22 @@ const PasswordDialog = (props) => {
       </DialogContent>
       <DialogActions>
         <Button
-          variant="contained"
+          variant='contained'
           onClick={() => {
             openDialog(false)
             onCancel()
           }}
-          color="secondary"
+          color='secondary'
         >
           Cancel
         </Button>
         <Button
-          variant="contained"
+          variant='contained'
           onClick={() => {
             // setOpen(false)
             onConfirm(values.password)
           }}
-          color="primary"
+          color='primary'
         >
           Accept
         </Button>

javascript/grid-ui/src/components/NavBar/NavBar.tsx

@@ -97,9 +97,9 @@ function NavBarBottom (props): JSX.Element {
     <div>
       <Box p={3} m={1}>
         <Typography
-          align="center"
+          align='center'
           gutterBottom
-          variant="h4"
+          variant='h4'
         >
           Queue size: {sessionQueueSize}
         </Typography>

javascript/grid-ui/src/components/NoData/NoData.tsx

@@ -37,7 +37,7 @@ function NoData (props) {
           <Typography
             align='center'
             color='textPrimary'
-            variant="h1"
+            variant='h1'
             paddingBottom={1}
           >
             {message}

javascript/grid-ui/src/components/Node/Node.tsx

@@ -37,14 +37,14 @@ function Node (props) {
       <CardContent sx={{ pl: 2, pr: 1 }}>
         <Grid
           container
-          justifyContent="space-between"
+          justifyContent='space-between'
           spacing={1}
         >
           <Grid item xs={10}>
             <Typography
-              color="textPrimary"
+              color='textPrimary'
               gutterBottom
-              variant="h6"
+              variant='h6'
             >
               <Box fontWeight='fontWeightBold' mr={1} display='inline'>
                 URI: