From f6d7da151e2bdb509cbb5816c05cab3b05c67f9f Mon Sep 17 00:00:00 2001
From: Dario Gieselaar <dario.gieselaar@elastic.co>
Date: Tue, 18 Jan 2022 21:15:33 +0100
Subject: [PATCH] Simplify router types

---
 .../src/create_router.ts                      |  17 +-
 .../src/index.ts                              |   2 -
 .../src/route.ts                              |  15 -
 .../src/router_provider.tsx                   |   4 +-
 .../src/types/index.ts                        | 301 +++++---------
 .../src/unconst.ts                            |  91 -----
 .../src/use_router.tsx                        |   8 +-
 .../backend_detail_dependencies_table.tsx     |   2 +
 .../components/routing/apm_route_config.tsx   |  21 +-
 .../public/components/routing/home/index.tsx  | 176 +++++----
 .../routing/service_detail/index.tsx          | 366 +++++++++---------
 .../components/routing/settings/index.tsx     | 185 +++++----
 .../routing/templates/settings_template.tsx   |   4 +-
 13 files changed, 479 insertions(+), 713 deletions(-)
 delete mode 100644 packages/kbn-typed-react-router-config/src/route.ts
 delete mode 100644 packages/kbn-typed-react-router-config/src/unconst.ts

diff --git a/packages/kbn-typed-react-router-config/src/create_router.ts b/packages/kbn-typed-react-router-config/src/create_router.ts
index 27a4f1dd5de023b..f3f83dfecdc47c2 100644
--- a/packages/kbn-typed-react-router-config/src/create_router.ts
+++ b/packages/kbn-typed-react-router-config/src/create_router.ts
@@ -15,25 +15,28 @@ 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)) ??
-        [],
+        Object.entries((route.children as RouteMap | undefined) ?? {})?.map(([path, child]) =>
+          toReactRouterConfigRoute({ ...child, path })
+        ) ?? [],
       exact: !route.children?.length,
       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
index b58c70998901c3f..9ba68aed7e3b257 100644
--- 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
deleted file mode 100644
index b9b228d1009e2f6..000000000000000
--- a/packages/kbn-typed-react-router-config/src/route.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-import { Route } from './types';
-import { Unconst, unconst } from './unconst';
-
-export function route<TRoute extends Route | Route[] | readonly Route[]>(
-  r: TRoute
-): Unconst<TRoute> {
-  return unconst(r);
-}
diff --git a/packages/kbn-typed-react-router-config/src/router_provider.tsx b/packages/kbn-typed-react-router-config/src/router_provider.tsx
index 657df9e9fc59226..ef06964f230be8a 100644
--- a/packages/kbn-typed-react-router-config/src/router_provider.tsx
+++ b/packages/kbn-typed-react-router-config/src/router_provider.tsx
@@ -8,7 +8,7 @@
 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({
@@ -16,7 +16,7 @@ export function RouterProvider({
   router,
   history,
 }: {
-  router: Router<Route[]>;
+  router: Router<RouteMap>;
   history: History;
   children: React.ReactNode;
 }) {
diff --git a/packages/kbn-typed-react-router-config/src/types/index.ts b/packages/kbn-typed-react-router-config/src/types/index.ts
index 97b58ce5a700fff..f768990ac014a10 100644
--- a/packages/kbn-typed-react-router-config/src/types/index.ts
+++ b/packages/kbn-typed-react-router-config/src/types/index.ts
@@ -9,17 +9,24 @@
 import { Location } from 'history';
 import * as t from 'io-ts';
 import { ReactElement } from 'react';
-import { RequiredKeys, ValuesType } from 'utility-types';
-// import { unconst } from '../unconst';
+import { RequiredKeys, ValuesType, UnionToIntersection } from 'utility-types';
 import { NormalizePath } from './utils';
 
-// type PathsOfRoute<TRoute extends Route> =
-//   | TRoute['path']
-//   | (TRoute extends { children: Route[] }
-//       ? AppendPath<TRoute['path'], '/*'> | PathsOf<TRoute['children']>
-//       : never);
+export type PathsOf<TRouteMap extends RouteMap> = keyof MapRoutes<TRouteMap> & string;
 
-export type PathsOf<TRoutes extends Route[]> = keyof MapRoutes<TRoutes> & string;
+export type RouteMap = Record<string, Route>;
+
+export interface Route {
+  element: ReactElement;
+  children?: RouteMap;
+  params?: t.Type<any>;
+  defaults?: Record<string, Record<string, string>>;
+  pre?: ReactElement;
+}
+
+export interface RouteWithPath extends Route {
+  path: string;
+}
 
 export interface RouteMatch<TRoute extends Route = Route> {
   route: TRoute;
@@ -51,33 +58,13 @@ type UnwrapRouteMap<TRoute extends Route & { parents?: Route[] }> = TRoute exten
   ? ToRouteMatch<[...TRoute['parents'], Omit<TRoute, 'parents'>]>
   : ToRouteMatch<[Omit<TRoute, 'parents'>]>;
 
-export type Match<TRoutes extends Route[], TPath extends string> = MapRoutes<TRoutes> extends {
+export type Match<TRoutes extends RouteMap, TPath extends string> = MapRoutes<TRoutes> extends {
   [key in TPath]: Route;
 }
   ? UnwrapRouteMap<MapRoutes<TRoutes>[TPath]>
   : [];
 
-interface PlainRoute {
-  path: string;
-  element: ReactElement;
-  children?: PlainRoute[];
-  params?: t.Type<any>;
-  defaults?: Record<string, Record<string, string>>;
-  pre?: ReactElement;
-}
-
-interface ReadonlyPlainRoute {
-  readonly path: string;
-  readonly element: ReactElement;
-  readonly children?: readonly ReadonlyPlainRoute[];
-  readonly params?: t.Type<any>;
-  readonly defaults?: Record<string, Record<string, string>>;
-  pre?: ReactElement;
-}
-
-export type Route = PlainRoute | ReadonlyPlainRoute;
-
-interface DefaultOutput {
+export interface DefaultOutput {
   path: {};
   query: {};
 }
@@ -97,7 +84,7 @@ type OutputOfMatches<TRouteMatches extends RouteMatch[]> = TRouteMatches extends
   ? OutputOfRouteMatch<ValuesType<TRouteMatches>>
   : DefaultOutput;
 
-export type OutputOf<TRoutes extends Route[], TPath extends PathsOf<TRoutes>> = OutputOfMatches<
+export type OutputOf<TRoutes extends RouteMap, TPath extends PathsOf<TRoutes>> = OutputOfMatches<
   Match<TRoutes, TPath>
 > &
   DefaultOutput;
@@ -116,7 +103,7 @@ type TypeOfMatches<TRouteMatches extends RouteMatch[]> = TRouteMatches extends [
   : {};
 
 export type TypeOf<
-  TRoutes extends Route[],
+  TRoutes extends RouteMap,
   TPath extends PathsOf<TRoutes>,
   TWithDefaultOutput extends boolean = true
 > = TypeOfMatches<Match<TRoutes, TPath>> & (TWithDefaultOutput extends true ? DefaultOutput : {});
@@ -127,11 +114,11 @@ export type TypeAsArgs<TObject> = keyof TObject extends never
   ? [TObject] | []
   : [TObject];
 
-export type FlattenRoutesOf<TRoutes extends Route[]> = Array<
+export type FlattenRoutesOf<TRoutes extends RouteMap> = Array<
   Omit<ValuesType<MapRoutes<TRoutes>>, 'parents'>
 >;
 
-export interface Router<TRoutes extends Route[]> {
+export interface Router<TRoutes extends RouteMap> {
   matchRoutes<TPath extends PathsOf<TRoutes>>(
     path: TPath,
     location: Location
@@ -179,11 +166,11 @@ type MaybeUnion<T extends Record<string, any>, U extends Record<string, any>> =
   [key in keyof U]: key extends keyof T ? T[key] | U[key] : U[key];
 };
 
-type MapRoute<TRoute extends Route, TParents extends Route[] = []> = MaybeUnion<
+type MapRoute<TRoute extends RouteWithPath, TParents extends RouteWithPath[] = []> = MaybeUnion<
   {
     [key in TRoute['path']]: TRoute & { parents: TParents };
   },
-  TRoute extends { children: Route[] }
+  TRoute extends { children: RouteMap }
     ? MaybeUnion<
         MapRoutes<TRoute['children'], [...TParents, TRoute]>,
         {
@@ -195,107 +182,41 @@ type MapRoute<TRoute extends Route, TParents extends Route[] = []> = MaybeUnion<
     : {}
 >;
 
-type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
-  ? MapRoute<TRoutes[0], TParents>
-  : TRoutes extends [Route, Route]
-  ? MapRoute<TRoutes[0], TParents> & MapRoute<TRoutes[1], TParents>
-  : TRoutes extends [Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> & MapRoute<TRoutes[1], TParents> & MapRoute<TRoutes[2], TParents>
-  : TRoutes extends [Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[7], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[7], TParents> &
-      MapRoute<TRoutes[8], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[8], TParents> &
-      MapRoute<TRoutes[7], TParents> &
-      MapRoute<TRoutes[9], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[8], TParents> &
-      MapRoute<TRoutes[7], TParents> &
-      MapRoute<TRoutes[9], TParents> &
-      MapRoute<TRoutes[10], TParents>
-  : {};
+type FromRouteMap<
+  TRouteMap extends RouteMap,
+  TParents extends RouteWithPath[] = []
+> = UnionToIntersection<
+  ValuesType<{
+    [key in keyof TRouteMap]: MapRoute<TRouteMap[key] & { path: key & string }, TParents>;
+  }>
+>;
+
+type MapRoutes<TRouteMap extends RouteMap, TParents extends RouteWithPath[] = []> = FromRouteMap<
+  TRouteMap,
+  TParents
+> extends Record<string, any>
+  ? FromRouteMap<TRouteMap, TParents>
+  : never;
 
 // const element = null as any;
 
-// const routes = unconst([
-//   {
-//     path: '/link-to/transaction/{transactionId}',
+// const routes = {
+//   '/link-to/transaction/{transactionId}': {
 //     element,
 //   },
-//   {
-//     path: '/link-to/trace/{traceId}',
+//   '/link-to/trace/{traceId}': {
 //     element,
 //   },
-//   {
-//     path: '/',
+//   '/': {
 //     element,
-//     children: [
-//       {
-//         path: '/settings',
+//     children: {
+//       '/settings': {
 //         element,
-//         children: [
-//           {
-//             path: '/settings/agent-configuration',
+//         children: {
+//           '/settings/agent-configuration': {
 //             element,
 //           },
-//           {
-//             path: '/settings/agent-configuration/create',
+//           '/settings/agent-configuration/create': {
 //             element,
 //             params: t.partial({
 //               query: t.partial({
@@ -303,8 +224,7 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //               }),
 //             }),
 //           },
-//           {
-//             path: '/settings/agent-configuration/edit',
+//           '/settings/agent-configuration/edit': {
 //             element,
 //             params: t.partial({
 //               query: t.partial({
@@ -312,34 +232,27 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //               }),
 //             }),
 //           },
-//           {
-//             path: '/settings/apm-indices',
+//           '/settings/apm-indices': {
 //             element,
 //           },
-//           {
-//             path: '/settings/custom-links',
+//           '/settings/custom-links': {
 //             element,
 //           },
-//           {
-//             path: '/settings/schema',
+//           '/settings/schema': {
 //             element,
 //           },
-//           {
-//             path: '/settings/anomaly-detection',
+//           '/settings/anomaly-detection': {
 //             element,
 //           },
-//           {
-//             path: '/settings/agent-keys',
+//           '/settings/agent-keys': {
 //             element,
 //           },
-//           {
-//             path: '/settings',
+//           '/settings': {
 //             element,
 //           },
-//         ],
+//         },
 //       },
-//       {
-//         path: '/services/:serviceName',
+//       '/services/:serviceName': {
 //         element,
 //         params: t.intersection([
 //           t.type({
@@ -360,29 +273,23 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //             }),
 //           }),
 //         ]),
-//         children: [
-//           {
-//             path: '/services/:serviceName/overview',
+//         children: {
+//           '/services/:serviceName/overview': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/transactions',
+//           '/services/:serviceName/transactions': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/transactions/view',
+//           '/services/:serviceName/transactions/view': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/dependencies',
+//           '/services/:serviceName/dependencies': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/errors',
+//           '/services/:serviceName/errors': {
 //             element,
-//             children: [
-//               {
-//                 path: '/services/:serviceName/errors/:groupId',
+//             children: {
+//               '/services/:serviceName/errors/:groupId': {
 //                 element,
 //                 params: t.type({
 //                   path: t.type({
@@ -390,8 +297,7 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //                   }),
 //                 }),
 //               },
-//               {
-//                 path: '/services/:serviceName/errors',
+//               '/services/:serviceName/errors': {
 //                 element,
 //                 params: t.partial({
 //                   query: t.partial({
@@ -402,46 +308,37 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //                   }),
 //                 }),
 //               },
-//             ],
+//             },
 //           },
-//           {
-//             path: '/services/:serviceName/metrics',
+//           '/services/:serviceName/metrics': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/nodes',
+//           '/services/:serviceName/nodes': {
 //             element,
-//             children: [
-//               {
-//                 path: '/services/{serviceName}/nodes/{serviceNodeName}/metrics',
+//             children: {
+//               '/services/{serviceName}/nodes/{serviceNodeName}/metrics': {
 //                 element,
 //               },
-//               {
-//                 path: '/services/:serviceName/nodes',
+//               '/services/:serviceName/nodes': {
 //                 element,
 //               },
-//             ],
+//             },
 //           },
-//           {
-//             path: '/services/:serviceName/service-map',
+//           '/services/:serviceName/service-map': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/logs',
+//           '/services/:serviceName/logs': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/profiling',
+//           '/services/:serviceName/profiling': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName',
+//           '/services/:serviceName': {
 //             element,
 //           },
-//         ],
+//         },
 //       },
-//       {
-//         path: '/',
+//       '/': {
 //         element,
 //         params: t.partial({
 //           query: t.partial({
@@ -449,55 +346,47 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //             rangeTo: t.string,
 //           }),
 //         }),
-//         children: [
-//           {
-//             path: '/services',
+//         children: {
+//           '/services': {
 //             element,
 //           },
-//           {
-//             path: '/traces',
+//           '/traces': {
 //             element,
 //           },
-//           {
-//             path: '/service-map',
+//           '/service-map': {
 //             element,
 //           },
-//           {
-//             path: '/backends',
+//           '/backends': {
 //             element,
-//             children: [
-//               {
-//                 path: '/backends/{backendName}/overview',
+//             children: {
+//               '/backends/{backendName}/overview': {
 //                 element,
 //               },
-//               {
-//                 path: '/backends/overview',
+//               '/backends/overview': {
 //                 element,
 //               },
-//               {
-//                 path: '/backends',
+//               '/backends': {
 //                 element,
 //               },
-//             ],
+//             },
 //           },
-//           {
-//             path: '/',
+//           '/': {
 //             element,
 //           },
-//         ],
+//         },
 //       },
-//     ],
+//     },
 //   },
-// ] as const);
+// };
 
 // type Routes = typeof routes;
 
-// type Mapped = keyof MapRoutes<Routes>;
+// type Mapped = MapRoutes<Routes>;
 // type Paths = PathsOf<Routes>;
 
 // type Bar = ValuesType<Match<Routes, '/*'>>['route']['path'];
 // type Foo = OutputOf<Routes, '/*'>;
-// // type Baz = OutputOf<Routes, '/services/:serviceName/errors'>;
+// type Baz = OutputOf<Routes, '/services/:serviceName/errors'>;
 
 // const { path }: Foo = {} as any;
 
@@ -505,4 +394,4 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //   return {} as any;
 // }
 
-// // const params = _useApmParams('/services/:serviceName/nodes/*');
+// const params = _useApmParams('/services/:serviceName/nodes/*');
diff --git a/packages/kbn-typed-react-router-config/src/unconst.ts b/packages/kbn-typed-react-router-config/src/unconst.ts
deleted file mode 100644
index d10c8290e20e9aa..000000000000000
--- a/packages/kbn-typed-react-router-config/src/unconst.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-import * as t from 'io-ts';
-import { DeepReadonly } from 'utility-types';
-
-export type MaybeConst<TObject extends object | [object]> = TObject extends [object]
-  ? [DeepReadonly<TObject> | TObject]
-  : TObject extends [object, ...infer TTail]
-  ? [DeepReadonly<TObject> | TObject, ...(TTail extends object[] ? MaybeConst<TTail> : [])]
-  : TObject extends object[]
-  ? DeepReadonly<TObject>
-  : TObject extends object
-  ? [DeepReadonly<TObject> | TObject]
-  : [];
-
-export type Unconst<T> = T extends React.ReactElement
-  ? React.ReactElement<any, any>
-  : T extends t.Type<any>
-  ? T
-  : T extends readonly [any]
-  ? [Unconst<T[0]>]
-  : T extends readonly [any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>]
-  : T extends readonly [any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>]
-  : T extends readonly [any, any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>, Unconst<T[3]>]
-  : T extends readonly [any, any, any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>, Unconst<T[3]>, Unconst<T[4]>]
-  : T extends readonly [any, any, any, any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>, Unconst<T[3]>, Unconst<T[4]>, Unconst<T[5]>]
-  : T extends readonly [any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>
-    ]
-  : T extends readonly [any, any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>,
-      Unconst<T[7]>
-    ]
-  : T extends readonly [any, any, any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>,
-      Unconst<T[7]>,
-      Unconst<T[8]>
-    ]
-  : T extends readonly [any, any, any, any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>,
-      Unconst<T[7]>,
-      Unconst<T[8]>,
-      Unconst<T[9]>
-    ]
-  : T extends readonly [infer U, ...infer V]
-  ? [Unconst<U>, ...Unconst<V>]
-  : T extends Record<any, any>
-  ? { -readonly [key in keyof T]: Unconst<T[key]> }
-  : T;
-
-export function unconst<T>(value: T): Unconst<T> {
-  return value as Unconst<T>;
-}
diff --git a/packages/kbn-typed-react-router-config/src/use_router.tsx b/packages/kbn-typed-react-router-config/src/use_router.tsx
index c78e85650f26d30..f3a6c396d37d4a9 100644
--- a/packages/kbn-typed-react-router-config/src/use_router.tsx
+++ b/packages/kbn-typed-react-router-config/src/use_router.tsx
@@ -7,19 +7,19 @@
  */
 
 import React, { createContext, useContext } from 'react';
-import { Route, Router } from './types';
+import { RouteMap, Router } from './types';
 
-const RouterContext = createContext<Router<Route[]> | undefined>(undefined);
+const RouterContext = createContext<Router<RouteMap> | undefined>(undefined);
 
 export const RouterContextProvider = ({
   router,
   children,
 }: {
-  router: Router<Route[]>;
+  router: Router<RouteMap>;
   children: React.ReactNode;
 }) => <RouterContext.Provider value={router}>{children}</RouterContext.Provider>;
 
-export function useRouter(): Router<Route[]> {
+export function useRouter(): Router<RouteMap> {
   const router = useContext(RouterContext);
 
   if (!router) {
diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
index 4e3f7f4bee81132..17180b9cb9d8b18 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
@@ -58,6 +58,8 @@ export function BackendDetailDependenciesTable() {
     [start, end, environment, offset, backendName, kuery]
   );
 
+  data?.services;
+
   const dependencies =
     data?.services.map((dependency) => {
       const { location } = dependency;
diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
index 7e6ee849fdb0b3f..daab3003b18dcbe 100644
--- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
+++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { createRouter, Outlet, route } from '@kbn/typed-react-router-config';
+import { createRouter, Outlet } from '@kbn/typed-react-router-config';
 import * as t from 'io-ts';
 import React from 'react';
 import { Breadcrumb } from '../app/breadcrumb';
@@ -19,9 +19,8 @@ import { settings } from './settings';
  * The array of route definitions to be used when the application
  * creates the routes.
  */
-const apmRoutes = route([
-  {
-    path: '/link-to/transaction/{transactionId}',
+const apmRoutes = {
+  '/link-to/transaction/{transactionId}': {
     element: <TransactionLink />,
     params: t.intersection([
       t.type({
@@ -37,8 +36,7 @@ const apmRoutes = route([
       }),
     ]),
   },
-  {
-    path: '/link-to/trace/{traceId}',
+  '/link-to/trace/{traceId}': {
     element: <TraceLink />,
     params: t.intersection([
       t.type({
@@ -54,16 +52,19 @@ const apmRoutes = route([
       }),
     ]),
   },
-  {
-    path: '/',
+  '/': {
     element: (
       <Breadcrumb title="APM" href="/">
         <Outlet />
       </Breadcrumb>
     ),
-    children: [settings, serviceDetail, home],
+    children: {
+      ...settings,
+      ...serviceDetail,
+      ...home,
+    },
   },
-] as const);
+};
 
 export type ApmRoutes = typeof apmRoutes;
 
diff --git a/x-pack/plugins/apm/public/components/routing/home/index.tsx b/x-pack/plugins/apm/public/components/routing/home/index.tsx
index 25a68592d2b1190..d81d69aa4e587fc 100644
--- a/x-pack/plugins/apm/public/components/routing/home/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/home/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { i18n } from '@kbn/i18n';
-import { Outlet } from '@kbn/typed-react-router-config';
+import { Outlet, Route } from '@kbn/typed-react-router-config';
 import * as t from 'io-ts';
 import React from 'react';
 import { toBooleanRt } from '@kbn/io-ts-utils';
@@ -30,15 +30,26 @@ function page<TPath extends string>({
   path: TPath;
   element: React.ReactElement<any, any>;
   title: string;
-}): { path: TPath; element: React.ReactElement<any, any> } {
+}): Record<
+  TPath,
+  {
+    element: React.ReactElement<any, any>;
+  }
+> {
   return {
-    path,
-    element: (
-      <Breadcrumb title={title} href={path}>
-        <ApmMainTemplate pageTitle={title}>{element}</ApmMainTemplate>
-      </Breadcrumb>
-    ),
-  };
+    [path]: {
+      element: (
+        <Breadcrumb title={title} href={path}>
+          <ApmMainTemplate pageTitle={title}>{element}</ApmMainTemplate>
+        </Breadcrumb>
+      ),
+    },
+  } as Record<
+    TPath,
+    {
+      element: React.ReactElement<any, any>;
+    }
+  >;
 }
 
 export const ServiceInventoryTitle = i18n.translate(
@@ -56,88 +67,85 @@ export const DependenciesInventoryTitle = i18n.translate(
 );
 
 export const home = {
-  path: '/',
-  element: <Outlet />,
-  params: t.type({
-    query: t.intersection([
-      environmentRt,
-      t.type({
-        rangeFrom: t.string,
-        rangeTo: t.string,
-        kuery: t.string,
-      }),
-      t.partial({
-        refreshPaused: t.union([t.literal('true'), t.literal('false')]),
-        refreshInterval: t.string,
-        comparisonEnabled: toBooleanRt,
-        comparisonType: comparisonTypeRt,
-      }),
-    ]),
-  }),
-  defaults: {
-    query: {
-      environment: ENVIRONMENT_ALL.value,
-      kuery: '',
-    },
-  },
-  children: [
-    page({
-      path: '/services',
-      title: ServiceInventoryTitle,
-      element: <ServiceInventory />,
+  '/': {
+    element: <Outlet />,
+    params: t.type({
+      query: t.intersection([
+        environmentRt,
+        t.type({
+          rangeFrom: t.string,
+          rangeTo: t.string,
+          kuery: t.string,
+        }),
+        t.partial({
+          refreshPaused: t.union([t.literal('true'), t.literal('false')]),
+          refreshInterval: t.string,
+          comparisonEnabled: toBooleanRt,
+          comparisonType: comparisonTypeRt,
+        }),
+      ]),
     }),
-    page({
-      path: '/traces',
-      title: i18n.translate('xpack.apm.views.traceOverview.title', {
-        defaultMessage: 'Traces',
+    defaults: {
+      query: {
+        environment: ENVIRONMENT_ALL.value,
+        kuery: '',
+      },
+    },
+    children: {
+      ...page({
+        path: '/services',
+        title: ServiceInventoryTitle,
+        element: <ServiceInventory />,
       }),
-      element: <TraceOverview />,
-    }),
-    page({
-      path: '/service-map',
-      title: i18n.translate('xpack.apm.views.serviceMap.title', {
-        defaultMessage: 'Service Map',
+      ...page({
+        path: '/traces',
+        title: i18n.translate('xpack.apm.views.traceOverview.title', {
+          defaultMessage: 'Traces',
+        }),
+        element: <TraceOverview />,
       }),
-      element: <ServiceMapHome />,
-    }),
-    {
-      path: '/backends',
-      element: <Outlet />,
-      params: t.partial({
-        query: t.partial({
-          comparisonEnabled: toBooleanRt,
-          comparisonType: comparisonTypeRt,
+      ...page({
+        path: '/service-map',
+        title: i18n.translate('xpack.apm.views.serviceMap.title', {
+          defaultMessage: 'Service Map',
         }),
+        element: <ServiceMapHome />,
       }),
-      children: [
-        {
-          path: '/backends/{backendName}/overview',
-          element: <RedirectToBackendOverviewRouteView />,
-          params: t.type({
-            path: t.type({
-              backendName: t.string,
-            }),
+      '/backends': {
+        element: <Outlet />,
+        params: t.partial({
+          query: t.partial({
+            comparisonEnabled: toBooleanRt,
+            comparisonType: comparisonTypeRt,
           }),
-        },
-        {
-          path: '/backends/overview',
-          element: <BackendDetailOverview />,
-          params: t.type({
-            query: t.type({
-              backendName: t.string,
+        }),
+        children: {
+          '/backends/{backendName}/overview': {
+            element: <RedirectToBackendOverviewRouteView />,
+            params: t.type({
+              path: t.type({
+                backendName: t.string,
+              }),
+            }),
+          },
+          '/backends/overview': {
+            element: <BackendDetailOverview />,
+            params: t.type({
+              query: t.type({
+                backendName: t.string,
+              }),
             }),
+          },
+          ...page({
+            path: '/backends',
+            title: DependenciesInventoryTitle,
+            element: <BackendInventory />,
           }),
         },
-        page({
-          path: '/backends',
-          title: DependenciesInventoryTitle,
-          element: <BackendInventory />,
-        }),
-      ],
+      },
+      '/': {
+        element: <RedirectTo pathname="/services" />,
+      },
     },
-    {
-      path: '/',
-      element: <RedirectTo pathname="/services" />,
-    },
-  ],
-} as const;
+  },
+};
diff --git a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
index f8206f273abd4c7..6514c8288be0ec4 100644
--- a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
@@ -29,14 +29,12 @@ import { ServiceDependencies } from '../../app/service_dependencies';
 import { ServiceLogs } from '../../app/service_logs';
 import { InfraOverview } from '../../app/infra_overview';
 
-function page<TPath extends string>({
-  path,
+function page({
   title,
   tab,
   element,
   searchBarOptions,
 }: {
-  path: TPath;
   title: string;
   tab: React.ComponentProps<typeof ApmServiceTemplate>['selectedTab'];
   element: React.ReactElement<any, any>;
@@ -48,10 +46,8 @@ function page<TPath extends string>({
   };
 }): {
   element: React.ReactElement<any, any>;
-  path: TPath;
 } {
   return {
-    path,
     element: (
       <ApmServiceTemplate
         title={title}
@@ -61,225 +57,209 @@ function page<TPath extends string>({
         {element}
       </ApmServiceTemplate>
     ),
-  } as any;
+  };
 }
 
 export const serviceDetail = {
-  path: '/services/{serviceName}',
-  element: <ApmServiceWrapper />,
-  params: t.intersection([
-    t.type({
-      path: t.type({
-        serviceName: t.string,
-      }),
-    }),
-    t.type({
-      query: t.intersection([
-        environmentRt,
-        t.type({
-          rangeFrom: t.string,
-          rangeTo: t.string,
-          kuery: t.string,
-        }),
-        t.partial({
-          comparisonEnabled: toBooleanRt,
-          comparisonType: comparisonTypeRt,
-          latencyAggregationType: t.string,
-          transactionType: t.string,
-          refreshPaused: t.union([t.literal('true'), t.literal('false')]),
-          refreshInterval: t.string,
+  '/services/{serviceName}': {
+    element: <ApmServiceWrapper />,
+    params: t.intersection([
+      t.type({
+        path: t.type({
+          serviceName: t.string,
         }),
-      ]),
-    }),
-  ]),
-  defaults: {
-    query: {
-      kuery: '',
-      environment: ENVIRONMENT_ALL.value,
-    },
-  },
-  children: [
-    page({
-      path: '/services/{serviceName}/overview',
-      element: <ServiceOverview />,
-      tab: 'overview',
-      title: i18n.translate('xpack.apm.views.overview.title', {
-        defaultMessage: 'Overview',
       }),
-      searchBarOptions: {
-        showTransactionTypeSelector: true,
-        showTimeComparison: true,
+      t.type({
+        query: t.intersection([
+          environmentRt,
+          t.type({
+            rangeFrom: t.string,
+            rangeTo: t.string,
+            kuery: t.string,
+          }),
+          t.partial({
+            comparisonEnabled: toBooleanRt,
+            comparisonType: comparisonTypeRt,
+            latencyAggregationType: t.string,
+            transactionType: t.string,
+            refreshPaused: t.union([t.literal('true'), t.literal('false')]),
+            refreshInterval: t.string,
+          }),
+        ]),
+      }),
+    ]),
+    defaults: {
+      query: {
+        kuery: '',
+        environment: ENVIRONMENT_ALL.value,
       },
-    }),
-    {
-      ...page({
-        path: '/services/{serviceName}/transactions',
-        tab: 'transactions',
-        title: i18n.translate('xpack.apm.views.transactions.title', {
-          defaultMessage: 'Transactions',
+    },
+    children: {
+      '/services/{serviceName}/overview': page({
+        element: <ServiceOverview />,
+        tab: 'overview',
+        title: i18n.translate('xpack.apm.views.overview.title', {
+          defaultMessage: 'Overview',
         }),
-        element: <Outlet />,
         searchBarOptions: {
           showTransactionTypeSelector: true,
           showTimeComparison: true,
         },
       }),
-      children: [
-        {
-          path: '/services/{serviceName}/transactions/view',
-          element: <TransactionDetails />,
-          params: t.type({
-            query: t.intersection([
-              t.type({
-                transactionName: t.string,
-              }),
-              t.partial({
-                traceId: t.string,
-                transactionId: t.string,
-                comparisonEnabled: toBooleanRt,
-                comparisonType: comparisonTypeRt,
-              }),
-            ]),
+      '/services/{serviceName}/transactions': {
+        ...page({
+          tab: 'transactions',
+          title: i18n.translate('xpack.apm.views.transactions.title', {
+            defaultMessage: 'Transactions',
           }),
+          element: <Outlet />,
+          searchBarOptions: {
+            showTransactionTypeSelector: true,
+            showTimeComparison: true,
+          },
+        }),
+        children: {
+          '/services/{serviceName}/transactions/view': {
+            element: <TransactionDetails />,
+            params: t.type({
+              query: t.intersection([
+                t.type({
+                  transactionName: t.string,
+                }),
+                t.partial({
+                  traceId: t.string,
+                  transactionId: t.string,
+                  comparisonEnabled: toBooleanRt,
+                  comparisonType: comparisonTypeRt,
+                }),
+              ]),
+            }),
+          },
+          '/services/{serviceName}/transactions': {
+            element: <TransactionOverview />,
+          },
         },
-        {
-          path: '/services/{serviceName}/transactions',
-          element: <TransactionOverview />,
-        },
-      ],
-    },
-    page({
-      path: '/services/{serviceName}/dependencies',
-      element: <ServiceDependencies />,
-      tab: 'dependencies',
-      title: i18n.translate('xpack.apm.views.dependencies.title', {
-        defaultMessage: 'Dependencies',
-      }),
-      searchBarOptions: {
-        showTimeComparison: true,
       },
-    }),
-    {
-      ...page({
-        path: '/services/{serviceName}/errors',
-        tab: 'errors',
-        title: i18n.translate('xpack.apm.views.errors.title', {
-          defaultMessage: 'Errors',
+      '/services/{serviceName}/dependencies': page({
+        element: <ServiceDependencies />,
+        tab: 'dependencies',
+        title: i18n.translate('xpack.apm.views.dependencies.title', {
+          defaultMessage: 'Dependencies',
         }),
-        element: <Outlet />,
         searchBarOptions: {
           showTimeComparison: true,
         },
       }),
-      params: t.partial({
-        query: t.partial({
-          sortDirection: t.string,
-          sortField: t.string,
-          pageSize: t.string,
-          page: t.string,
+      '/services/{serviceName}/errors': {
+        ...page({
+          tab: 'errors',
+          title: i18n.translate('xpack.apm.views.errors.title', {
+            defaultMessage: 'Errors',
+          }),
+          element: <Outlet />,
+          searchBarOptions: {
+            showTimeComparison: true,
+          },
         }),
-      }),
-      children: [
-        {
-          path: '/services/{serviceName}/errors/{groupId}',
-          element: <ErrorGroupDetails />,
-          params: t.type({
-            path: t.type({
-              groupId: t.string,
-            }),
+        params: t.partial({
+          query: t.partial({
+            sortDirection: t.string,
+            sortField: t.string,
+            pageSize: t.string,
+            page: t.string,
           }),
+        }),
+        children: {
+          '/services/{serviceName}/errors/{groupId}': {
+            element: <ErrorGroupDetails />,
+            params: t.type({
+              path: t.type({
+                groupId: t.string,
+              }),
+            }),
+          },
+          '/services/{serviceName}/errors': {
+            element: <ErrorGroupOverview />,
+          },
         },
-        {
-          path: '/services/{serviceName}/errors',
-          element: <ErrorGroupOverview />,
-        },
-      ],
-    },
-    page({
-      path: '/services/{serviceName}/metrics',
-      tab: 'metrics',
-      title: i18n.translate('xpack.apm.views.metrics.title', {
-        defaultMessage: 'Metrics',
-      }),
-      element: <ServiceMetrics />,
-    }),
-    {
-      ...page({
-        path: '/services/{serviceName}/nodes',
-        tab: 'nodes',
-        title: i18n.translate('xpack.apm.views.nodes.title', {
-          defaultMessage: 'JVMs',
+      },
+      '/services/{serviceName}/metrics': page({
+        tab: 'metrics',
+        title: i18n.translate('xpack.apm.views.metrics.title', {
+          defaultMessage: 'Metrics',
         }),
-        element: <Outlet />,
+        element: <ServiceMetrics />,
       }),
-      children: [
-        {
-          path: '/services/{serviceName}/nodes/{serviceNodeName}/metrics',
-          element: <ServiceNodeMetrics />,
-          params: t.type({
-            path: t.type({
-              serviceNodeName: t.string,
-            }),
+      '/services/{serviceName}/nodes': {
+        ...page({
+          tab: 'nodes',
+          title: i18n.translate('xpack.apm.views.nodes.title', {
+            defaultMessage: 'JVMs',
           }),
-        },
-        {
-          path: '/services/{serviceName}/nodes',
-          element: <ServiceNodeOverview />,
-          params: t.partial({
-            query: t.partial({
-              sortDirection: t.string,
-              sortField: t.string,
-              pageSize: t.string,
-              page: t.string,
+          element: <Outlet />,
+        }),
+        children: {
+          '/services/{serviceName}/nodes/{serviceNodeName}/metrics': {
+            element: <ServiceNodeMetrics />,
+            params: t.type({
+              path: t.type({
+                serviceNodeName: t.string,
+              }),
             }),
-          }),
+          },
+          '/services/{serviceName}/nodes': {
+            element: <ServiceNodeOverview />,
+            params: t.partial({
+              query: t.partial({
+                sortDirection: t.string,
+                sortField: t.string,
+                pageSize: t.string,
+                page: t.string,
+              }),
+            }),
+          },
         },
-      ],
-    },
-    page({
-      path: '/services/{serviceName}/service-map',
-      tab: 'service-map',
-      title: i18n.translate('xpack.apm.views.serviceMap.title', {
-        defaultMessage: 'Service Map',
-      }),
-      element: <ServiceMapServiceDetail />,
-      searchBarOptions: {
-        hidden: true,
       },
-    }),
-    page({
-      path: '/services/{serviceName}/logs',
-      tab: 'logs',
-      title: i18n.translate('xpack.apm.views.logs.title', {
-        defaultMessage: 'Logs',
+      '/services/{serviceName}/service-map': page({
+        tab: 'service-map',
+        title: i18n.translate('xpack.apm.views.serviceMap.title', {
+          defaultMessage: 'Service Map',
+        }),
+        element: <ServiceMapServiceDetail />,
+        searchBarOptions: {
+          hidden: true,
+        },
       }),
-      element: <ServiceLogs />,
-      searchBarOptions: {
-        showKueryBar: false,
-      },
-    }),
-    page({
-      path: '/services/{serviceName}/profiling',
-      tab: 'profiling',
-      title: i18n.translate('xpack.apm.views.serviceProfiling.title', {
-        defaultMessage: 'Profiling',
+      '/services/{serviceName}/logs': page({
+        tab: 'logs',
+        title: i18n.translate('xpack.apm.views.logs.title', {
+          defaultMessage: 'Logs',
+        }),
+        element: <ServiceLogs />,
+        searchBarOptions: {
+          showKueryBar: false,
+        },
       }),
-      element: <ServiceProfiling />,
-    }),
-    page({
-      path: '/services/{serviceName}/infra',
-      tab: 'infra',
-      title: i18n.translate('xpack.apm.views.infra.title', {
-        defaultMessage: 'Infrastructure',
+      '/services/{serviceName}/profiling': page({
+        tab: 'profiling',
+        title: i18n.translate('xpack.apm.views.serviceProfiling.title', {
+          defaultMessage: 'Profiling',
+        }),
+        element: <ServiceProfiling />,
+      }),
+      '/services/{serviceName}/infra': page({
+        tab: 'infra',
+        title: i18n.translate('xpack.apm.views.infra.title', {
+          defaultMessage: 'Infrastructure',
+        }),
+        element: <InfraOverview />,
+        searchBarOptions: {
+          hidden: true,
+        },
       }),
-      element: <InfraOverview />,
-      searchBarOptions: {
-        hidden: true,
+      '/services/{serviceName}/': {
+        element: <RedirectToDefaultServiceRouteView />,
       },
-    }),
-    {
-      path: '/services/{serviceName}/',
-      element: <RedirectToDefaultServiceRouteView />,
     },
-  ],
-} as const;
+  },
+};
diff --git a/x-pack/plugins/apm/public/components/routing/settings/index.tsx b/x-pack/plugins/apm/public/components/routing/settings/index.tsx
index afeef9c496d25db..97748f2ce13ba82 100644
--- a/x-pack/plugins/apm/public/components/routing/settings/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/settings/index.tsx
@@ -21,129 +21,120 @@ import { Schema } from '../../app/Settings/schema';
 import { AnomalyDetection } from '../../app/Settings/anomaly_detection';
 import { AgentKeys } from '../../app/Settings/agent_keys';
 
-function page<TPath extends string>({
-  path,
+function page({
   title,
   tab,
   element,
 }: {
-  path: TPath;
   title: string;
   tab: React.ComponentProps<typeof SettingsTemplate>['selectedTab'];
   element: React.ReactElement;
 }): {
   element: React.ReactElement;
-  path: TPath;
 } {
   return {
-    path,
     element: (
-      <Breadcrumb title={title} href={`/settings${path}`}>
+      <Breadcrumb title={title} href={`/settings/${tab}`}>
         <SettingsTemplate selectedTab={tab}>{element}</SettingsTemplate>
       </Breadcrumb>
     ),
-  } as any;
+  };
 }
 
 export const settings = {
-  path: '/settings',
-  element: (
-    <Breadcrumb
-      href="/settings"
-      title={i18n.translate('xpack.apm.views.listSettings.title', {
-        defaultMessage: 'Settings',
-      })}
-    >
-      <Outlet />
-    </Breadcrumb>
-  ),
-  children: [
-    page({
-      path: '/settings/agent-configuration',
-      tab: 'agent-configurations',
-      title: i18n.translate(
-        'xpack.apm.views.settings.agentConfiguration.title',
-        { defaultMessage: 'Agent Configuration' }
-      ),
-      element: <AgentConfigurations />,
-    }),
-    {
-      ...page({
-        path: '/settings/agent-configuration/create',
+  '/settings': {
+    element: (
+      <Breadcrumb
+        href="/settings"
+        title={i18n.translate('xpack.apm.views.listSettings.title', {
+          defaultMessage: 'Settings',
+        })}
+      >
+        <Outlet />
+      </Breadcrumb>
+    ),
+    children: {
+      '/settings/agent-configuration': page({
+        tab: 'agent-configuration',
         title: i18n.translate(
-          'xpack.apm.views.settings.createAgentConfiguration.title',
-          { defaultMessage: 'Create Agent Configuration' }
+          'xpack.apm.views.settings.agentConfiguration.title',
+          { defaultMessage: 'Agent Configuration' }
         ),
-        tab: 'agent-configurations',
-        element: <CreateAgentConfigurationRouteView />,
+        element: <AgentConfigurations />,
       }),
-      params: t.partial({
-        query: t.partial({
-          pageStep: agentConfigurationPageStepRt,
+      '/settings/agent-configuration/create': {
+        ...page({
+          title: i18n.translate(
+            'xpack.apm.views.settings.createAgentConfiguration.title',
+            { defaultMessage: 'Create Agent Configuration' }
+          ),
+          tab: 'agent-configuration',
+          element: <CreateAgentConfigurationRouteView />,
         }),
-      }),
-    },
-    {
-      ...page({
-        path: '/settings/agent-configuration/edit',
-        title: i18n.translate(
-          'xpack.apm.views.settings.editAgentConfiguration.title',
-          { defaultMessage: 'Edit Agent Configuration' }
-        ),
-        tab: 'agent-configurations',
-        element: <EditAgentConfigurationRouteView />,
-      }),
-      params: t.partial({
-        query: t.partial({
-          environment: t.string,
-          name: t.string,
-          pageStep: agentConfigurationPageStepRt,
+        params: t.partial({
+          query: t.partial({
+            pageStep: agentConfigurationPageStepRt,
+          }),
         }),
+      },
+      '/settings/agent-configuration/edit': {
+        ...page({
+          title: i18n.translate(
+            'xpack.apm.views.settings.editAgentConfiguration.title',
+            { defaultMessage: 'Edit Agent Configuration' }
+          ),
+          tab: 'agent-configuration',
+          element: <EditAgentConfigurationRouteView />,
+        }),
+        params: t.partial({
+          query: t.partial({
+            environment: t.string,
+            name: t.string,
+            pageStep: agentConfigurationPageStepRt,
+          }),
+        }),
+      },
+      '/settings/apm-indices': page({
+        title: i18n.translate('xpack.apm.views.settings.indices.title', {
+          defaultMessage: 'Indices',
+        }),
+        tab: 'apm-indices',
+        element: <ApmIndices />,
       }),
-    },
-    page({
-      path: '/settings/apm-indices',
-      title: i18n.translate('xpack.apm.views.settings.indices.title', {
-        defaultMessage: 'Indices',
-      }),
-      tab: 'apm-indices',
-      element: <ApmIndices />,
-    }),
-    page({
-      path: '/settings/custom-links',
-      title: i18n.translate('xpack.apm.views.settings.customLink.title', {
-        defaultMessage: 'Custom Links',
+      '/settings/custom-links': page({
+        title: i18n.translate('xpack.apm.views.settings.customLink.title', {
+          defaultMessage: 'Custom Links',
+        }),
+        tab: 'custom-links',
+        element: <CustomLinkOverview />,
       }),
-      tab: 'custom-links',
-      element: <CustomLinkOverview />,
-    }),
-    page({
-      path: '/settings/schema',
-      title: i18n.translate('xpack.apm.views.settings.schema.title', {
-        defaultMessage: 'Schema',
+      '/settings/schema': page({
+        title: i18n.translate('xpack.apm.views.settings.schema.title', {
+          defaultMessage: 'Schema',
+        }),
+        element: <Schema />,
+        tab: 'schema',
       }),
-      element: <Schema />,
-      tab: 'schema',
-    }),
-    page({
-      path: '/settings/anomaly-detection',
-      title: i18n.translate('xpack.apm.views.settings.anomalyDetection.title', {
-        defaultMessage: 'Anomaly detection',
+      '/settings/anomaly-detection': page({
+        title: i18n.translate(
+          'xpack.apm.views.settings.anomalyDetection.title',
+          {
+            defaultMessage: 'Anomaly detection',
+          }
+        ),
+        element: <AnomalyDetection />,
+        tab: 'anomaly-detection',
       }),
-      element: <AnomalyDetection />,
-      tab: 'anomaly-detection',
-    }),
-    page({
-      path: '/settings/agent-keys',
-      title: i18n.translate('xpack.apm.views.settings.agentKeys.title', {
-        defaultMessage: 'Agent keys',
+      '/settings/agent-keys': page({
+        title: i18n.translate('xpack.apm.views.settings.agentKeys.title', {
+          defaultMessage: 'Agent keys',
+        }),
+        element: <AgentKeys />,
+        tab: 'agent-keys',
       }),
-      element: <AgentKeys />,
-      tab: 'agent-keys',
-    }),
-    {
-      path: '/settings',
-      element: <Redirect to="/settings/agent-configuration" />,
+      '/settings': {
+        element: <Redirect to="/settings/agent-configuration" />,
+      },
     },
-  ],
-} as const;
+  },
+};
diff --git a/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
index 43a865c0584c900..08cacc38e89f0ff 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
@@ -17,7 +17,7 @@ import { getLegacyApmHref } from '../../shared/links/apm/apm_link';
 
 type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
   key:
-    | 'agent-configurations'
+    | 'agent-configuration'
     | 'agent-keys'
     | 'anomaly-detection'
     | 'apm-indices'
@@ -66,7 +66,7 @@ function getTabs({
 
   const tabs: Tab[] = [
     {
-      key: 'agent-configurations',
+      key: 'agent-configuration',
       label: i18n.translate('xpack.apm.settings.agentConfig', {
         defaultMessage: 'Agent Configuration',
       }),