[APM] Simplify browser router types (#123549)

elastic · Jan 24, 2022 · 429b252 · 429b252
1 parent 9cba74d
commit 429b252
Show file tree

Hide file tree

Showing 18 changed files with 542 additions and 796 deletions.
diff --git a/packages/kbn-typed-react-router-config/src/create_router.test.tsx b/packages/kbn-typed-react-router-config/src/create_router.test.tsx
@@ -10,16 +10,13 @@ import * as t from 'io-ts';
 import { toNumberRt } from '@kbn/io-ts-utils';
 import { createRouter } from './create_router';
 import { createMemoryHistory } from 'history';
-import { route } from './route';
 
 describe('createRouter', () => {
-  const routes = route([
-    {
-      path: '/',
+  const routes = {
+    '/': {
       element: <></>,
-      children: [
-        {
-          path: '/',
+      children: {
+        '/': {
           element: <></>,
           params: t.type({
             query: t.type({
@@ -32,45 +29,39 @@ describe('createRouter', () => {
               rangeFrom: 'now-30m',
             },
           },
-          children: [
-            {
-              path: '/services/{serviceName}/errors',
+          children: {
+            '/services/{serviceName}/errors': {
               element: <></>,
               params: t.type({
                 path: t.type({
                   serviceName: t.string,
                 }),
               }),
-              children: [
-                {
-                  path: '/services/{serviceName}/errors/{groupId}',
+              children: {
+                '/services/{serviceName}/errors/{groupId}': {
                   element: <></>,
                   params: t.type({
                     path: t.type({ groupId: t.string }),
                   }),
                 },
-                {
-                  path: '/services/{serviceName}/errors',
+                '/services/{serviceName}/errors': {
                   element: <></>,
                 },
-              ],
+              },
             },
-            {
-              path: '/services',
+            '/services': {
               element: <></>,
               params: t.type({
                 query: t.type({
                   transactionType: t.string,
                 }),
               }),
             },
-            {
-              path: '/services/{serviceName}',
+            '/services/{serviceName}': {
               element: <></>,
-              children: [
-                {
+              children: {
+                '/services/{serviceName}': {
                   element: <></>,
-                  path: '/services/{serviceName}',
                   params: t.type({
                     path: t.type({
                       serviceName: t.string,
@@ -81,10 +72,9 @@ describe('createRouter', () => {
                     }),
                   }),
                 },
-              ],
+              },
             },
-            {
-              path: '/traces',
+            '/traces': {
               element: <></>,
               params: t.type({
                 query: t.type({
@@ -93,20 +83,19 @@ describe('createRouter', () => {
                 }),
               }),
             },
-            {
-              path: '/service-map',
+            '/service-map': {
               element: <></>,
               params: t.type({
                 query: t.type({
                   maxNumNodes: t.string.pipe(toNumberRt as any),
                 }),
               }),
             },
-          ],
+          },
         },
-      ],
+      },
     },
-  ] as const);
+  };
 
   let history = createMemoryHistory();
   const router = createRouter(routes);

diff --git a/packages/kbn-typed-react-router-config/src/create_router.ts b/packages/kbn-typed-react-router-config/src/create_router.ts
@@ -15,26 +15,29 @@ import {
 } from 'react-router-config';
 import qs from 'query-string';
 import { findLastIndex, merge, compact } from 'lodash';
-import { deepExactRt, mergeRt } from '@kbn/io-ts-utils';
-import { FlattenRoutesOf, Route, Router } from './types';
+import { mergeRt, deepExactRt } from '@kbn/io-ts-utils';
+import { FlattenRoutesOf, Route, RouteWithPath, Router, RouteMap } from './types';
 
 function toReactRouterPath(path: string) {
   return path.replace(/(?:{([^\/]+)})/g, ':$1');
 }
 
-export function createRouter<TRoutes extends Route[]>(routes: TRoutes): Router<TRoutes> {
+export function createRouter<TRoutes extends RouteMap>(routes: TRoutes): Router<TRoutes> {
   const routesByReactRouterConfig = new Map<ReactRouterConfig, Route>();
   const reactRouterConfigsByRoute = new Map<Route, ReactRouterConfig>();
 
-  const reactRouterConfigs = routes.map((route) => toReactRouterConfigRoute(route));
+  const reactRouterConfigs = Object.entries(routes).map(([path, route]) =>
+    toReactRouterConfigRoute({ ...route, path })
+  );
 
-  function toReactRouterConfigRoute(route: Route): ReactRouterConfig {
+  function toReactRouterConfigRoute(route: RouteWithPath): ReactRouterConfig {
     const reactRouterConfig: ReactRouterConfig = {
       component: () => route.element,
       routes:
-        (route.children as Route[] | undefined)?.map((child) => toReactRouterConfigRoute(child)) ??
-        [],
-      exact: !route.children?.length,
+        Object.entries((route.children as RouteMap | undefined) ?? {})?.map(([path, child]) =>
+          toReactRouterConfigRoute({ ...child, path })
+        ) ?? [],
+      exact: !route.children || Object.values(route.children).length === 0,
       path: toReactRouterPath(route.path),
     };
 

diff --git a/packages/kbn-typed-react-router-config/src/index.ts b/packages/kbn-typed-react-router-config/src/index.ts
@@ -8,10 +8,8 @@
 export * from './create_router';
 export * from './types';
 export * from './outlet';
-export * from './route';
 export * from './route_renderer';
 export * from './router_provider';
-export * from './unconst';
 export * from './use_current_route';
 export * from './use_match_routes';
 export * from './use_params';

diff --git a/packages/kbn-typed-react-router-config/src/route.ts b/packages/kbn-typed-react-router-config/src/route.ts
diff --git a/packages/kbn-typed-react-router-config/src/router_provider.tsx b/packages/kbn-typed-react-router-config/src/router_provider.tsx
@@ -8,15 +8,15 @@
 import { History } from 'history';
 import React from 'react';
 import { Router as ReactRouter } from 'react-router-dom';
-import { Route, Router } from './types';
+import { RouteMap, Router } from './types';
 import { RouterContextProvider } from './use_router';
 
 export function RouterProvider({
   children,
   router,
   history,
 }: {
-  router: Router<Route[]>;
+  router: Router<RouteMap>;
   history: History;
   children: React.ReactNode;
 }) {