Do Frontend dependency update

[ssciolla]

At some point, we'll want to tackle a couple major version upgrades or other library maintenance tasks, besides Material UI #220. They include:

• React 18 -react-router-dom 6 -eslint version 8 and parsers (blocked, but probably not forever, by pending updates for eslint-config-standard-with-typescript) ~~ - Upgrade Node to version 18 ~~ ~~ - NestJS, other backend dependencies ~~ ~~ - Others? ~~

This can be a parent or "epic" issue, but I'm going to create separate issues to address the backend, frontend, and eslint changes.

2024 Frontend Dep Upgrades

@pushyamig and @jaydonkrooss update: we created a separate branch to test concurrent dependency upgrades. Before testing and merging to main, here's the in-progress changes for FE side of things:

• [x] React 18, React-Dom 18, Material UI v5, notistack 3.0.1

• [x] incremental updates to above packages

• [x] #418

  • [x] Pagination is broken
  • [x] Error window is broken (Try again window)
  • [x] Error icon is red (Review your CSV file) color is changed to blue
  • [x] Alignment issue b/w small and big window inside features workflow
  • [x] Progress bar is close to the section selection window
  • [x] Unmerging text/spinner is missing when unmerging feature
  • [x] Gradebook formatter requirement list is broken
  • [x] In CustomTable.tsx, see this warning SelectProps' is deprecated.ts(6385) TablePagination.d.ts(122, 6): The declaration was marked as deprecated here.
  • [x] Course Name component is misaligned and the text box is bigger than usual
  • [x] Create single Section textbox has alignment issue

• [x] other frontend packages: react-router-dom, Papaparse, winston, Yup, types/cookie-parser

Nice to have / tasks for after production release

• Upgrade testing packages: supertest, jest

[jaydonkrooss]

Some frontend features worth observing to make sure that these upgrades are not breaking anything...

notistack v3 touches all UI snackbars (checking each one might be overkill but verify that both errors and confirmations are formatted and animated correctly):

• API errors (course name, merging/unmerging)
• "Changes were saved" confirmations (course name, create section)
• Other frontend errors ("only csv files accepted" on file upload)

React, ReactDOM, and Material UI v5 impact components and styling: Verify that app loads and components in all user flows are styled correctly

Papaparse touches csv processing. It's only a minor upgrade but make sure that CSV consumption and CSV creation (for Canvas gradebook module) is looking correct

React-Router-DOM v6 impacts routing, make sure redirecting behaves as expected:

• Access Denied page (such as student loading CCM)
• Launch Error page (local development testing only)
• Home page (and correct modules load for the different permission levels)
• Not found page (local development testing only)

Yup V1 touches validation. Probably don't need to do too much other than just verify a few validation errors behave as expected:

• email address (for search non-umich email, Adding non-umich user)
• canvas ID has just numbers (multiple section enrollment on CSV)
• max 255 characters (for course name, login id, firstname, lastname, etc)

[ktowneUM]

Verified: "Changes were saved" confirmations (course name, create section) Other frontend errors ("only csv files accepted" on file upload) Verify that app loads and components in all user flows are styled correctly CSV consumption and CSV creation (for Canvas gradebook module) is looking correct Access Denied page (such as student loading CCM) Home page (and correct modules load for the different permission levels) email address (for search non-umich email, Adding non-umich user) canvas ID has just numbers (multiple section enrollment on CSV) max 255 characters (for course name, login id, firstname, lastname, etc)

Can't verify: API errors Launch Error page (local development testing only) Not found page (local development testing only)

[pushyamig]

Dev test plan was provided is for when reviewing PR and checking that. I think it is already taken care so I will move the issue to Done column