Merge pull request #111 from CanDIG/fnguyen/version-update-2

DIG-1322: candig-data-portal updates: MUI, React, NPM, etc
CanDIG · Jan 12, 2024 · c5502a8 · c5502a8
2 parents 312ca0b + 6f5ccf4
commit c5502a8
Show file tree

Hide file tree

Showing 101 changed files with 21,620 additions and 32,892 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -25,9 +25,9 @@ jobs:
               uses: actions/checkout@v3
 
             - name: Set up Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: 12
+                  node-version: 20
 
             - name: Install Node.js dependencies
               run: npm ci

diff --git a/README.md b/README.md
@@ -4,8 +4,8 @@ A data analytics and visualization portal for CanDIG Services. Is built off the
 
 ## Setup Development Server
 
--   Node:v17.7.1
--   npm: 8.5.2
+-   Node: v17.7.1
+-   npm: 10.2.5
 -   MUI: V5
 
 There was a migration from V4 - V5 of MUI following https://mui.com/material-ui/guides/migration-v4/

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,52 +5,50 @@
     "homepage": "/portal",
     "dependencies": {
         "@candig/igv": "^2.10.5-c.1",
-        "@emotion/cache": "^11.4.0",
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@highcharts/map-collection": "^2.0.1",
-        "@mui/base": "^5.0.0-alpha.82",
-        "@mui/icons-material": "^5.8.0",
-        "@mui/lab": "^5.0.0-alpha.49",
-        "@mui/material": "^5.14.13",
-        "@mui/styled-engine": "^5.8.0",
-        "@mui/styles": "^5.8.0",
-        "@mui/system": "^5.14.13",
-        "@mui/x-data-grid": "^4.0.2",
-        "@tabler/icons": "^1.119.0",
-        "@testing-library/jest-dom": "^5.11.10",
-        "@testing-library/react": "^11.2.6",
-        "@testing-library/user-event": "^12.8.3",
-        "ag-grid-community": "^27.1.0",
-        "ag-grid-react": "^27.1.0",
-        "apexcharts": "^3.26.1",
-        "babel-loader": "^8.2.5",
-        "clsx": "^1.1.1",
-        "formik": "^2.2.6",
-        "framer-motion": "^4.1.13",
-        "highcharts": "^10.0.0",
-        "highcharts-react-official": "^3.1.0",
-        "history": "^5.0.0",
-        "material-ui-popup-state": "^1.8.0",
-        "npm": "^8.6.0",
-        "papaparse": "^5.3.2",
-        "prop-types": "^15.7.2",
-        "react": "^17.0.2",
-        "react-apexcharts": "^1.3.7",
-        "react-device-detect": "^1.17.0",
-        "react-dom": "^17.0.2",
-        "react-json-view": "^1.21.3",
-        "react-loader-spinner": "^6.0.0-0",
-        "react-multi-select-component": "^4.2.3",
-        "react-new-window": "^0.2.2",
-        "react-notification-alert": "0.0.13",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/react": "^11.11.3",
+        "@emotion/styled": "^11.11.0",
+        "@highcharts/map-collection": "^2.1.0",
+        "@mui/base": "^5.0.0-beta.30",
+        "@mui/icons-material": "^5.15.3",
+        "@mui/lab": "^5.0.0-alpha.159",
+        "@mui/material": "^5.15.3",
+        "@mui/styled-engine": "^5.15.3",
+        "@mui/system": "^5.15.3",
+        "@mui/x-data-grid": "^6.18.7",
+        "@mui/x-tree-view": "^6.17.0",
+        "@tabler/icons-react": "^2.45.0",
+        "@testing-library/jest-dom": "^6.2.0",
+        "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.2",
+        "ag-grid-community": "^31.0.1",
+        "ag-grid-react": "^31.0.1",
+        "apexcharts": "^3.45.1",
+        "babel-loader": "^9.1.3",
+        "clsx": "^2.1.0",
+        "formik": "^2.4.5",
+        "framer-motion": "^10.17.9",
+        "highcharts": "^11.2.0",
+        "highcharts-react-official": "^3.2.1",
+        "history": "^5.3.0",
+        "material-ui-popup-state": "^5.0.10",
+        "npm": "^10.2.5",
+        "papaparse": "^5.4.1",
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-apexcharts": "^1.4.1",
+        "react-device-detect": "^2.2.3",
+        "react-dom": "^18.2.0",
+        "react-loader-spinner": "^6.1.6",
+        "react-multi-select-component": "^4.3.4",
+        "react-new-window": "^1.0.1",
         "react-perfect-scrollbar": "^1.5.8",
-        "react-promise-tracker": "^2.1.0",
-        "react-redux": "^7.2.3",
-        "react-router": "^6.16.0",
-        "react-router-dom": "^6.3.0",
-        "redux": "^4.0.5",
-        "yup": "^0.32.9"
+        "react-promise-tracker": "^2.1.1",
+        "react-redux": "^9.0.4",
+        "react-router": "^6.21.1",
+        "react-router-dom": "^6.21.1",
+        "redux": "^5.0.1",
+        "yup": "^1.3.3"
     },
     "scripts": {
         "start": "react-scripts start",
@@ -81,19 +79,19 @@
         ]
     },
     "devDependencies": {
-        "@babel/core": "^7.14.8",
-        "@babel/eslint-parser": "^7.14.7",
-        "eslint": "^7.32.0",
-        "eslint-config-airbnb": "18.2.1",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-import": "2.22.1",
-        "eslint-plugin-jsx-a11y": "6.4.1",
-        "eslint-plugin-prettier": "^3.4.0",
-        "eslint-plugin-react": "^7.21.5",
-        "eslint-plugin-react-hooks": "^4.2.0",
-        "prettier": "^2.2.1",
-        "react-scripts": "5.0.0",
-        "sass": "^1.32.11",
-        "webpack-cli": "^4.9.2"
+        "@babel/core": "^7.23.7",
+        "@babel/eslint-parser": "^7.23.3",
+        "eslint": "^8.56.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-jsx-a11y": "^6.8.0",
+        "eslint-plugin-prettier": "^5.1.2",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "prettier": "^3.1.1",
+        "react-scripts": "^5.0.1",
+        "sass": "^1.69.7",
+        "webpack-cli": "^5.1.4"
     }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <title>CanDIG Data Portal</title>

diff --git a/src/App.js b/src/App.js
@@ -14,7 +14,7 @@ import NavigationScroll from './layout/NavigationScroll';
 
 // ===========================|| APP ||=========================== //
 
-const App = () => {
+function App() {
     const customization = useSelector((state) => state.customization);
 
     return (
@@ -27,6 +27,6 @@ const App = () => {
             </StyledEngineProvider>
         </ThemeProvider>
     );
-};
+}
 
 export default App;
diff --git a/src/MenuList/NavCollapse/index.js b/src/MenuList/NavCollapse/index.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 
 // mui
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { Collapse, List, ListItemIcon, ListItemText, Typography } from '@mui/material';
 import ListItemButton from '@mui/material/ListItemButton';
 
@@ -12,52 +12,76 @@ import NavItem from '../NavItem';
 
 // assets
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import { IconChevronDown, IconChevronUp } from '@tabler/icons';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 
-// style constant
-const useStyles = makeStyles((theme) => ({
-    collapseIcon: {
+const PREFIX = 'NavCollapse';
+
+const classes = {
+    collapseIcon: `${PREFIX}-collapseIcon`,
+    collapseIconSub: `${PREFIX}-collapseIconSub`,
+    menuIcon: `${PREFIX}-menuIcon`,
+    listIcon: `${PREFIX}-listIcon`,
+    listCustomIconSub: `${PREFIX}-listCustomIconSub`,
+    listCustomIconSubActive: `${PREFIX}-listCustomIconSubActive`,
+    listItem: `${PREFIX}-listItem`,
+    listItemNoBack: `${PREFIX}-listItemNoBack`,
+    subMenuCaption: `${PREFIX}-subMenuCaption`,
+    collapseWrapper: `${PREFIX}-collapseWrapper`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')(({ theme }) => ({
+    [`& .${classes.collapseIcon}`]: {
         fontSize: '1rem',
         marginTop: 'auto',
         marginBottom: 'auto'
     },
-    collapseIconSub: {
+
+    [`& .${classes.collapseIconSub}`]: {
         fontSize: '1rem',
         marginTop: 'auto',
         marginBottom: 'auto'
     },
-    menuIcon: {
+
+    [`& .${classes.menuIcon}`]: {
         marginTop: 'auto',
         marginBottom: 'auto'
     },
-    listIcon: {
+
+    [`& .${classes.listIcon}`]: {
         minWidth: '18px',
         marginTop: 'auto',
         marginBottom: 'auto'
     },
-    listCustomIconSub: {
+
+    [`& .${classes.listCustomIconSub}`]: {
         width: '6px',
         height: '6px'
     },
-    listCustomIconSubActive: {
+
+    [`& .${classes.listCustomIconSubActive}`]: {
         width: '8px',
         height: '8px'
     },
-    listItem: {
+
+    [`& .${classes.listItem}`]: {
         marginBottom: '5px',
         alignItems: 'flex-start'
     },
-    listItemNoBack: {
+
+    [`& .${classes.listItemNoBack}`]: {
         marginBottom: '5px',
         backgroundColor: 'transparent !important',
         paddingTop: '8px',
         paddingBottom: '8px',
         alignItems: 'flex-start'
     },
-    subMenuCaption: {
+
+    [`& .${classes.subMenuCaption}`]: {
         ...theme.typography.subMenuCaption
     },
-    collapseWrapper: {
+
+    [`& .${classes.collapseWrapper}`]: {
         position: 'relative',
         '&:after': {
             content: "''",
@@ -74,8 +98,7 @@ const useStyles = makeStyles((theme) => ({
 
 // ===========================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||=========================== //
 
-const NavCollapse = ({ menu, level }) => {
-    const classes = useStyles();
+function NavCollapse({ menu, level }) {
     const customization = useSelector((state) => state.customization);
 
     const [open, setOpen] = React.useState(false);
@@ -115,7 +138,7 @@ const NavCollapse = ({ menu, level }) => {
     const menuIconClass = !menu.icon ? classes.listIcon : classes.menuIcon;
 
     return (
-        <>
+        <Root>
             <ListItemButton
                 className={level > 1 ? classes.listItemNoBack : classes.listItem}
                 sx={{ borderRadius: `${customization.borderRadius}px` }}
@@ -149,9 +172,9 @@ const NavCollapse = ({ menu, level }) => {
                     {menus}
                 </List>
             </Collapse>
-        </>
+        </Root>
     );
-};
+}
 
 NavCollapse.propTypes = {
     menu: PropTypes.object,

diff --git a/src/MenuList/NavGroup/index.js b/src/MenuList/NavGroup/index.js
@@ -1,32 +1,40 @@
 import PropTypes from 'prop-types';
 
 // mui
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { Divider, List, Typography } from '@mui/material';
 
 // project imports
 import NavItem from '../NavItem';
 import NavCollapse from '../NavCollapse';
 
-// style constant
-const useStyles = makeStyles((theme) => ({
-    menuCaption: {
+const PREFIX = 'NavGroup';
+
+const classes = {
+    menuCaption: `${PREFIX}-menuCaption`,
+    subMenuCaption: `${PREFIX}-subMenuCaption`,
+    menuDivider: `${PREFIX}-menuDivider`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const DividerRoot = styled(Divider)(({ theme }) => ({
+    [`& .${classes.menuCaption}`]: {
         ...theme.typography.menuCaption
     },
-    subMenuCaption: {
+
+    [`& .${classes.subMenuCaption}`]: {
         ...theme.typography.subMenuCaption
     },
-    menuDivider: {
+
+    [`&.${classes.menuDivider}`]: {
         marginTop: '2px',
         marginBottom: '10px'
     }
 }));
 
 // ===========================|| SIDEBAR MENU LIST GROUP ||=========================== //
 
-const NavGroup = ({ item }) => {
-    const classes = useStyles();
-
+function NavGroup({ item }) {
     // menu list collapse & items
     const items = item.children.map((menu) => {
         switch (menu.type) {
@@ -62,12 +70,11 @@ const NavGroup = ({ item }) => {
             >
                 {items}
             </List>
-
             {/* group divider */}
-            <Divider className={classes.menuDivider} />
+            <DividerRoot className={classes.menuDivider} />
         </>
     );
-};
+}
 
 NavGroup.propTypes = {
     item: PropTypes.object