Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: migrate from react-router to wouter #2415

Merged
merged 49 commits into from
May 31, 2022
Merged

ui: migrate from react-router to wouter #2415

merged 49 commits into from
May 31, 2022

Conversation

mastercactapus
Copy link
Member

@mastercactapus mastercactapus commented May 26, 2022

Description:
Replaces the use of react-router-dom with wouter

Which issue(s) this PR fixes:
This work is part of the CI stability work and resolves lost-event issues by switching libraries.

See: remix-run/react-router#7460
and: remix-run/react-router#8809

Describe any introduced user-facing changes:

  • The /profile pages and links continue to function, but redirect to /user/<id>. This wasn't strictly necessary but was part of the routing cleanup. See more below.
  • Admin pages now have a prefix of Admin: followed by the page name.
  • Alert links will now be redirected to /services/:serviceID/alerts/:alertID
  • As long as the alert ID is valid, the URL will be "repaired"
  • Breadcrumbs will now reflect the full URL path

Additional Info:

  • Following inithttp.go for the backend, all routes are now registered in the AppRoutes.tsx file instead of scattered around the application.
  • The router is no longer used to pass data to components, they now expect props directly (removes use of useParams)
  • Redirect replaces Navigate (same behavior)
  • const [, navigate] = useLocation() replaces const navigate = useNavigate() (same behavior)
  • List pages now have their own components
  • Most *Router components have been removed, the exception being the WizardRouter which isn't a router
  • const urlKey = useURLKey() replaces const { key: urlKey } = useLocation()
  • Mobile app bar auto-closes when the URL key changes, rather than manually attempting to track clicks
  • SideBarDrawerList and NavSubMenu have been replaced with a rewritten component called NavBar filled with standardized NavBarLink and NavBarSubLink components. Styling has been left unchanged.
  • ToolbarAction is now fed a list of routes directly from AppRoutes.tsx so it no longer needs to be kept in sync manually.
  • ToolbarTitle has been reworked to fix some edge cases, like updating the document title at the right time and resolving some race conditions. It also has been generalized slightly to remove some special cases.
  • refetchAll has been added to the window to be called from tests when necessary

image
image

web/src/app/main/components/ToolbarPageTitle.tsx Outdated Show resolved Hide resolved
web/src/app/main/components/ToolbarPageTitle.tsx Outdated Show resolved Hide resolved
web/src/app/main/components/ToolbarPageTitle.tsx Outdated Show resolved Hide resolved
web/src/app/main/components/ToolbarPageTitle.tsx Outdated Show resolved Hide resolved
web/src/app/main/components/ToolbarPageTitle.tsx Outdated Show resolved Hide resolved
web/src/app/main/components/ToolbarPageTitle.tsx Outdated Show resolved Hide resolved
web/src/app/main/components/ToolbarPageTitle.tsx Outdated Show resolved Hide resolved
@mastercactapus mastercactapus marked this pull request as draft May 26, 2022 20:50
@mastercactapus mastercactapus marked this pull request as ready for review May 31, 2022 14:52
@m17ch m17ch requested review from m17ch, KatieMSB and Forfold May 31, 2022 15:07
Copy link
Contributor

@m17ch m17ch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@mastercactapus mastercactapus merged commit 7a91ecf into master May 31, 2022
@mastercactapus mastercactapus deleted the wouter branch May 31, 2022 21:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants