Ensure react-router tests don't fail (#511)

* Ensure react-router tests don't fail

* Add comments; centralize more types

* Last little bit of type patching

* don't need to override RouteMatch because we live in magic town

Co-authored-by: David Crespo <[email protected]>

Author: zephraph

app/components/Breadcrumbs.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 
 import type { Crumb } from '@oxide/ui'
 import { Breadcrumbs as BreadcrumbsPure } from '@oxide/ui'
-import type { CustomMatch } from '../hooks/use-matches'
 import { useMatches } from '../hooks/use-matches'
+import type { RouteMatch } from 'react-router'
 
-export function matchesToCrumbs(matches: CustomMatch[]): Crumb[] {
+export function matchesToCrumbs(matches: RouteMatch[]): Crumb[] {
   const filtered = matches.filter((m) => m.route.crumb)
   return filtered.map((m, i) => ({
     label:

app/hooks/use-matches.ts

@@ -1,13 +1,8 @@
 import type { RouteMatch } from 'react-router'
 import { matchRoutes, useLocation } from 'react-router'
 
-import type { CustomRouteObject } from '../routes'
 import { routeConfig } from '../routes'
 
-export type CustomMatch = RouteMatch & {
-  route: CustomRouteObject
-}
-
 /**
  * For the current location, return the path down the route config. For example,
  * if the route config is
@@ -30,5 +25,5 @@ export type CustomMatch = RouteMatch & {
  * ]
  * ```
  */
-export const useMatches = (): CustomMatch[] | null =>
+export const useMatches = (): RouteMatch[] | null =>
   matchRoutes(routeConfig, useLocation())

app/routes.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
 
-import type {
-  RouteMatch,
-  RouteObject,
-  RouteProps as RRRouteProps,
-} from 'react-router'
-import { Navigate, Route as RRRoute, Routes } from 'react-router-dom'
+import type { RouteMatch, RouteObject } from 'react-router'
+import { Navigate, Route, Routes } from 'react-router-dom'
 
 import InstanceCreatePage from './pages/instances/create'
 import InstanceStorage from './pages/instances/Storage'
@@ -22,20 +18,6 @@ import OrgLayout from './layouts/OrgLayout'
 import ProjectLayout from './layouts/ProjectLayout'
 import InstanceLayout from './layouts/InstanceLayout'
 
-// function arm lets us make labels that depend on route params
-type Crumb = string | ((m: RouteMatch) => string)
-
-type RouteProps = RRRouteProps & {
-  crumb?: Crumb
-}
-
-export type CustomRouteObject = RouteObject & {
-  crumb?: Crumb
-}
-
-/** Custom `<Route>` that accepts whatever props we want. */
-const Route = (props: RouteProps) => <RRRoute {...props} />
-
 /*
  * We are doing something a little unorthodox with the route config here. We
  * realized that tagging nodes in the route tree with arbitrary data is very
@@ -49,6 +31,9 @@ const Route = (props: RouteProps) => <RRRoute {...props} />
  * The config ends up being a bit more complicated that it would otherwise be
  * because, e.g., we have to do `orgs` and `:orgName` separately in order to get
  * a crumb for each; `orgs/:orgName` would otherwise be ok.
+ *
+ * Note that `crumb` is defined via patched react-router types in
+ * `types/react-router.d.ts`
  */
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
@@ -155,10 +140,8 @@ export const routes = (
  * in order to be able to put `crumb` prop directly on the <Route> elements
  * https://github.com/remix-run/react-router/blob/174fb105ee/packages/react-router/index.tsx#L685
  * */
-function createRoutesFromChildren(
-  children: React.ReactNode
-): CustomRouteObject[] {
-  const routes: CustomRouteObject[] = []
+function createRoutesFromChildren(children: React.ReactNode): RouteObject[] {
+  const routes: RouteObject[] = []
 
   React.Children.forEach(children, (element) => {
     if (!React.isValidElement(element)) {
@@ -174,7 +157,7 @@ function createRoutesFromChildren(
     }
 
     // only real difference from the original: allow arbitrary props
-    const route: CustomRouteObject = { ...element.props }
+    const route: RouteObject = { ...element.props }
 
     if (element.props.children) {
       route.children = createRoutesFromChildren(element.props.children)

types/react-router.d.ts

@@ -0,0 +1,15 @@
+import type {
+  RouteProps as OriginalRouteProps,
+  RouteObject as OriginalRouteObject,
+} from 'react-router'
+
+declare module 'react-router' {
+  type Crumb = string | ((m: RouteMatch) => string)
+  export interface RouteProps extends OriginalRouteProps {
+    crumb?: Crumb
+  }
+  export interface RouteObject extends OriginalRouteObject {
+    crumb?: Crumb
+  }
+  export function Route(props: RouteProps): React.ReactElement | null
+}