I1529 Frontend Dependancy Update

[pushyamig]

Fixes #1529 and #1525

1. Fix the UI changes due to MUI v5 update as it seems to be due to MUI adopting https://emotion.sh/docs/introduction
   1. https://mui.com/material-ui/migration/migration-v4/. The documentation is nuanced since it talk all scenarios with upgrade to MUi v5 with React 17, MUi v5 with React 18, MUi v5 supporting JSS etc
   2. used CodeMods for updating the MUI to v5. here are the docs what gets updated https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#variant-prop
2. react-router-dom has some major changes, the nested router path are relative now
   1. withRouter higher order hook is removed, so need to write a custom function
3. React 18 had some changes to how react is initiated. lot of Improvement to async support.
4. The strategy for package-lock.json was just delete node_module and update the package.json and generate a new lock file. This was simplest!
5. upgrade to @apollo/client, Assignment planning was crashing so added a configuration option assumeImmutableResults: false, to enable mutable object of response which was allowed as an configuration option.
6. used npm-check-updates for checking the latest package version in the repo. It is recommended by package dev to install it globally. https://www.npmjs.com/package/npm-check-updates npm install -g npm-check-updates
7. Three security advisory w.r.t (postcss, graphql, @babel/traverse) are resolved now. check using the command npm ls <package-name> Eg., npm ls postcss

Todo List:

• [x] UI changes from MUI v5 upgrade ( There might be more just need to dig down) - Jaydon
  • [x] Landing page layout and View card layout
    • [x] disable button is not rendering color grey when the view is disabled and on hover
    • make sure to add Copy right flatpage (via django admin tool). I don't see anychanges needed here
  • [x] Resources access view tiny form
  • [x] Resource accessed Drop-down box is slight touching the slider. Needs some adjustment
  • [x] Making the bar %value visible with student accessed the file
  • [x] Assignment planning Pop-up window: no styling applied
    • [x] Assignment Planning pop-up: exiting mouse hover doesn't close the popover
  • [x] Survey Model is not centered after clicking the survey button.
    • [x] Survey Model when opening up causing an warning in console log
  • [x] On hover of the survey button the the color contrast making it Opaque Reproduce it Admin -> Config -> SURVEY_URL
  • [x] the Listitem component button attribute seems deprecated ( it is stricked out in VsCode). Needs an understanding if any impact and any otherway to compensate it. Documentation will help
  • Need an understanding in impact during the upgrade import IconButton from '@mui/material/IconButton' the iconButton Component added size='large' to all files
  • use of sx prop. MUI v5 introduced this prop for inline styling for certain component. for older version style prop was used. I don't feel we need to replace style with sx but building some understanding will help. https://mui.com/system/getting-started/the-sx-prop/ https://stackoverflow.com/questions/72527461/when-should-i-use-style-instead-of-sx-prop-in-material-ui#:~:text=sx%20prop%20works%20only%20on,some%20cases%20as%20explained%20below.
• [x] Webpack/babel lib update and build update - Pushyami
• [x] Other packages update react-router-dom, rc-slider, d3 etc - Pushyami
• [x] strategy around package-lock.json commit - Pushyami
• [ ] Over all testing - Pushyami/Jaydon
• [ ] Jest testing as things are not working as expected (https://github.com/tl-its-umich-edu/my-learning-analytics/issues/1558)

---

Test Plan

https://docs.google.com/spreadsheets/d/18c_VDE7wdme8c36Zo5-pjad77Kit8hFz4ylbmFXmLP8/edit#gid=0

Testing should be done from Student, instructor and MyLa Admin role

[pushyamig]

This Draft PR is branched out of #1554 since that has major Backend updates. So it make sense to this way until that PR get merged

[pushyamig]

used CodeMods for updating the MUI to v5. here are the docs what gets updated https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md

[pushyamig]

I have built the latest from this repo which is here https://github.com/pushyamig/my-learning-analytics/actions/runs/7413997544

[pushyamig]

This PR is now ready for Review, I have added test plan as well

[pushyamig]

I pretty much tested/reviewed it from my lense and things are ok .

I have updated things I tested according to test plan https://docs.google.com/spreadsheets/d/18c_VDE7wdme8c36Zo5-pjad77Kit8hFz4ylbmFXmLP8/edit#gid=0

[pushyamig]

I can't approve a PR which is opened by me. But I will approve the Jaydon's work as well