chore: update deps and removed traces of material ui v4

package.json

@@ -22,17 +22,16 @@
     "prepare": "git rev-parse --git-dir && git config core.hooksPath ./.git-hooks || true"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
     "@emotion/react": "11.13.0",
     "@emotion/styled": "11.13.0",
-    "@sasjs/adapter": "^4.11.0",
-    "@sasjs/core": "^4.52.4",
-    "@sasjs/utils": "^3.4.0",
-    "axios": "^0.27.2",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^6.4.8",
+    "@mui/x-tree-view": "^6.17.0",
+    "@sasjs/adapter": "4.11.3",
+    "@sasjs/core": "4.56.1",
+    "@sasjs/utils": "3.5.2",
+    "axios": "1.8.3",
     "moment": "^2.29.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -53,6 +52,7 @@
     "@semantic-release/github": "^8.0.4",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/react-highlight": "0.12.8",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.1",

src/components/abortModal.tsx

@@ -1,11 +1,15 @@
 import React from 'react'
 
-import Typography from '@material-ui/core/Typography'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography
+} from '@mui/material'
+
 import { styled } from '@mui/material/styles'
-import Dialog from '@mui/material/Dialog'
-import DialogTitle from '@mui/material/DialogTitle'
-import DialogContent from '@mui/material/DialogContent'
-import IconButton from '@mui/material/IconButton'
+
 import CloseIcon from '@mui/icons-material/Close'
 
 import { AbortModalPayload } from '../types'

src/components/data-page.component.tsx

@@ -1,22 +1,19 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useContext,
-  useCallback
-} from 'react'
-import CircularProgress from '@material-ui/core/CircularProgress'
-
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import Button from '@material-ui/core/Button'
-import Table from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import TableCell from '@material-ui/core/TableCell'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableHead from '@material-ui/core/TableHead'
-import TableRow from '@material-ui/core/TableRow'
-import Paper from '@material-ui/core/Paper'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+
+import {
+  Button,
+  CircularProgress,
+  MenuItem,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow
+} from '@mui/material'
 
 import { SASContext } from '../context/sasContext'
 import { AbortModalPayload } from '../types'
@@ -82,12 +79,7 @@ const DataPageComponent = () => {
     }
   }, [sasContext.isUserLoggedIn, prevLoggedIn, currentRequest, executeRequest])
 
-  const areaOnChange = (
-    event: React.ChangeEvent<{
-      name?: string | undefined
-      value: unknown
-    }>
-  ) => {
+  const areaOnChange = (event: SelectChangeEvent) => {
     setSelectedArea(event.target.value as string)
   }
 

src/components/file-uploader.component.tsx

@@ -1,57 +1,54 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { bytesToSize } from '@sasjs/utils/utils/bytesToSize'
-import { makeStyles } from '@material-ui/core/styles'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import CircularProgress from '@material-ui/core/CircularProgress'
-import Table from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import TableCell from '@material-ui/core/TableCell'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableHead from '@material-ui/core/TableHead'
-import TableRow from '@material-ui/core/TableRow'
-import Paper from '@material-ui/core/Paper'
+
+import {
+  Button,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography
+} from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 import { SASContext } from '../context/sasContext'
 import { AbortModalPayload } from '../types'
 import { getAbortModalPayload } from '../utils'
 import AbortModal from './abortModal'
 
-const useStyles = makeStyles((theme) => ({
-  pageLayout: {
-    padding: '16px',
-    display: 'flex',
-    flexDirection: 'column' as 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  input: {
-    marginTop: '10px',
-    width: '300px'
-  },
-  uploadButton: {
-    marginTop: '20px'
-  },
-  circularProgress: {
-    marginTop: '10px'
-  },
-  table: {
-    marginTop: '20px'
-  },
-  errorTitle: {
-    color: theme.palette.error.main
-  }
+const PageLayout = styled('div')(({ theme }) => ({
+  padding: theme.spacing(2),
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center'
 }))
 
-export default function FileUploaderComponent() {
-  const classes = useStyles()
+const UploadInput = styled(TextField)(({ theme }) => ({
+  marginTop: theme.spacing(1),
+  width: '300px'
+}))
 
+const UploadButton = styled(Button)(({ theme }) => ({
+  marginTop: theme.spacing(2)
+}))
+
+const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
+  marginTop: theme.spacing(2)
+}))
+
+export default function FileUploaderComponent() {
   const sasContext = useContext(SASContext)
 
   const [uploadPath, setUploadPath] = useState('')
   const [location, setLocation] = useState('')
   const [fileSize, setFileSize] = useState('')
-  const [file, setFile] = useState<File>()
+  const [file, setFile] = useState<File | null>(null)
   const [uploadDisabled, setUploadDisabled] = useState(true)
   const [isUploading, setIsUploading] = useState(false)
   const [dirList, setDirList] = useState([])
@@ -72,17 +69,10 @@ export default function FileUploaderComponent() {
   }, [file, uploadPath])
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    switch (event.target.id) {
-      case 'uploadPath':
-        setUploadPath(event.target.value)
-        break
-      case 'myFile':
-        if (event.target.files?.length) {
-          setFile(event.target.files[0])
-        }
-        break
-      default:
-        break
+    if (event.target.id === 'uploadPath') {
+      setUploadPath(event.target.value)
+    } else if (event.target.id === 'myFile' && event.target.files?.length) {
+      setFile(event.target.files[0])
     }
   }
 
@@ -92,75 +82,74 @@ export default function FileUploaderComponent() {
     setDirList([])
     setAbortModalOpen(false)
 
-    if (sasContext.isUserLoggedIn) {
-      if (file) {
-        await sasContext.sasService
-          .uploadFile(
-            'services/files/upload',
-            [{ file: file, fileName: file.name }],
-            { path: uploadPath }
-          )
-          .then((res: any) => {
-            if (res.sasjsAbort) {
-              getAbortModalPayload(res, setAbortModalPayload)
-              setAbortModalOpen(true)
-            } else if (typeof res?.dirlist === 'object') {
-              setDirList(res.dirlist)
-            } else {
-              setAbortModalPayload({
-                MSG: 'Response does not contain dir list'
-              })
-              setAbortModalOpen(true)
-            }
-          })
-          .catch((err) => console.log(err))
-      }
+    if (sasContext.isUserLoggedIn && file) {
+      await sasContext.sasService
+        .uploadFile(
+          'services/files/upload',
+          [{ file: file, fileName: file.name }],
+          { path: uploadPath }
+        )
+        .then((res: any) => {
+          if (res.sasjsAbort) {
+            getAbortModalPayload(res, setAbortModalPayload)
+            setAbortModalOpen(true)
+          } else if (typeof res?.dirlist === 'object') {
+            setDirList(res.dirlist)
+          } else {
+            setAbortModalPayload({
+              MSG: 'Response does not contain dir list'
+            })
+            setAbortModalOpen(true)
+          }
+        })
+        .catch((err) => console.log(err))
     }
+
     setUploadDisabled(false)
     setIsUploading(false)
   }
 
   return (
-    <div className={classes.pageLayout}>
-      <h1>This is a template file uploader component</h1>
-      <p>
+    <PageLayout>
+      <Typography variant="h5">
+        This is a template file uploader component
+      </Typography>
+      <Typography>
         You can use it to upload a local file to a directory on your Viya server
-      </p>
+      </Typography>
 
-      <TextField
-        className={classes.input}
+      <UploadInput
         id="uploadPath"
         variant="outlined"
         label="Where to upload"
         value={uploadPath}
         disabled={isUploading}
         onChange={handleChange}
       />
-      <TextField
-        className={classes.input}
+      <UploadInput
         id="myFile"
         variant="outlined"
         type="file"
         disabled={isUploading}
         onChange={handleChange}
       />
-      {location ? <p>Location: {location}</p> : null}
-      {fileSize ? <p>Total Size: {fileSize}</p> : null}
-      <Button
+
+      {location && <Typography>Location: {location}</Typography>}
+      {fileSize && <Typography>Total Size: {fileSize}</Typography>}
+
+      <UploadButton
         variant="contained"
         color="primary"
-        className={classes.uploadButton}
         disabled={uploadDisabled}
         onClick={handleUpload}
       >
         Upload
-      </Button>
-      {isUploading ? (
-        <CircularProgress className={classes.circularProgress} />
-      ) : null}
+      </UploadButton>
+
+      {isUploading && <CircularProgress sx={{ marginTop: 2 }} />}
 
-      {dirList && dirList.length > 0 && !isUploading ? (
-        <TableContainer component={Paper} className={classes.table}>
+      {dirList.length > 0 && !isUploading && (
+        <StyledTableContainer>
           <Table aria-label="simple table">
             <TableHead>
               <TableRow>
@@ -175,14 +164,14 @@ export default function FileUploaderComponent() {
               ))}
             </TableBody>
           </Table>
-        </TableContainer>
-      ) : null}
+        </StyledTableContainer>
+      )}
 
       <AbortModal
         abortModalOpen={abortModalOpen}
         setAbortModalOpen={setAbortModalOpen}
         payload={abortModalPayload}
       />
-    </div>
+    </PageLayout>
   )
 }