feat(components, app, labware-library): migrate to react-router-dom v6.24.1

[jerader]

closes AUTH-564

Overview

This PR updates react-router-dom to v6.24.1 in the stack to match PD's react-router-dom version

Big changes between v5 and v6:

1. useHistory is deprecated and replaced with useNavigate. Instead of history.push('path') and history.goBack() it is navigate('path') and navigate(-1)
2. Route no longer has children, instead the component goes into the element prop.
3. Switch is deprecated and is now Routes
4. Route must be wrapped in Routes (should mainly have to worry about this in unit testing since the app components are wrapped in Routes already from the top level)
5. <Redirect/> is deprecated and is now <Navigate/> (if it is wrapped in Routes then you may use Route and Navigate goes into the element prop)

Test Plan

Smoke test labware-library, protocol designer but most importantly, smoke test the app and ODD.

Changelog

• update react-router-dom in Labware-library and app
• deprecate it in components
• fix all affected components and tests

Review requests

see test plan

Risk assessment

high since we have a 8.0.0 release and this touches a bunch of code. we need to smoke test well before merging

[koji]

the migration guide would be useful to review this pr
remix-run/react-router#8753

[koji]

not introducing v6.25.0/v6.25.1 because too new?

[jerader]

oh wait i think v6.25.0 came out just yesterday, that is why i did not use it lol. Shouldn't we stick with 6.24.1 to match PD though? hmm. @shlokamin thoughts?

[koji]

6.25.0 2days ago and 6.25.1 yesterday.
https://github.com/remix-run/react-router/releases

[shlokamin]

doesn't matter to me as long as all of our frontend projects share the same version, so we can either update PD or keep these at 6.24.1

[koji]

https://stackoverflow.com/questions/69868956/how-can-i-redirect-in-react-router-v6

Suggested change

	{targetPath != null && (
	<Route path="/" element={<Navigate to={targetPath} />} />
	)}
	<Route path="*" element={<Navigate to={targetPath} replace />} />

[jerader]

thank you so much koji!

[koji]

For ODD, we would need to check the followings
unboxing flow [without software update]
welcome -> network setup -> software update -> e-stop screen -> name robot -> finish setup -> robot dashboard with modal

unboxing flow [with software update]
welcome -> network setup -> software update -> reboot the robot -> e-stop screen -> name robot -> finish setup -> robot dashboard with modal

Navigation item after unboxing flow

• protocols
• quick transfer
• instruments
• settings

Robot settings Dashboard

• network setup flow
• rename flow

[shlokamin]

making my way through this PR but chiming in to say that i can devote time early next week to test this on a bot!

[koji]

Tested this branch on ODD (tested the UnboxingFlow 2,3 times a couple of times) and didn't see any issues.
I think once Shlok tested this branch and if he doesn't see any issue, this branch will be good to go!

Thank you for updating react-router!