better

ui/service/src/routes/router.tsx

@@ -3,9 +3,9 @@ import { createBrowserRouter } from 'evidently-ui-lib/shared-dependencies/react-
 import type { RouteExtended } from 'evidently-ui-lib/router-utils/types'
 
 import {
+  Route,
   decorateAllRoutes,
-  decorateTopLevelRoutes,
-  provideCrumb
+  decorateTopLevelRoutes
 } from 'evidently-ui-lib/router-utils/utils'
 
 // It's important to import `SnapshotIdLazy` before `DashboardLazy`. Affects bundle chunks
@@ -16,40 +16,37 @@ import { DashboardLazy } from './src/dashboard/import'
 import { Home } from './src/home/import'
 import { Project } from './src/project/import'
 import { ProjectsList } from './src/projects-list/import'
+import { ReportsLayout } from './src/reports-layout/import'
 import { ReportsList } from './src/reports-list/import'
+import { TestSuitesLayout } from './src/test-suites-layout/import'
 import { TestSuitesList } from './src/test-suites-list/import'
 
 export const routes = [
-  {
-    ...Home,
+  Route(Home, {
     children: [
-      { index: true, ...ProjectsList },
-      {
+      Route(ProjectsList, { index: true } as const),
+      Route(Project, {
         path: ':projectId',
-        ...Project,
         children: [
-          { index: true, ...DashboardLazy },
-          {
+          Route(DashboardLazy, { index: true } as const),
+          Route(ReportsLayout, {
             path: 'reports',
-            ...{ _route_path: '/:projectId/reports' as const },
             children: [
-              { index: true, ...ReportsList },
-              { path: ':snapshotId', ...SnapshotIdLazy }
+              Route(ReportsList, { index: true } as const),
+              Route(SnapshotIdLazy, { path: ':snapshotId' } as const)
             ]
-          },
-          {
+          } as const),
+          Route(TestSuitesLayout, {
             path: 'test-suites',
-            ...provideCrumb({ title: 'Test suites' }),
-            ...{ _route_path: '/:projectId/test-suites' as const },
             children: [
-              { index: true, ...TestSuitesList },
-              { path: ':snapshotId', ...SnapshotIdLazy }
+              Route(TestSuitesList, { index: true } as const),
+              Route(SnapshotIdLazy, { path: ':snapshotId' } as const)
             ]
-          }
+          } as const)
         ]
-      }
+      } as const)
     ]
-  }
+  } as const)
 ] as const satisfies RouteExtended[]
 
 const finalRoutes = routes.map(decorateTopLevelRoutes).map((r) => decorateAllRoutes(r))

ui/service/src/routes/src/reports-layout/import.tsx

@@ -0,0 +1 @@
+export * as ReportsLayout from '~/routes/src/reports-layout/reports-layout-main'

ui/service/src/routes/src/reports-layout/reports-layout-main.tsx

@@ -0,0 +1,11 @@
+import type { CrumbDefinition } from 'evidently-ui-lib/router-utils/utils'
+
+///////////////////
+//    ROUTE
+///////////////////
+
+export const _route_path = '/:projectId/reports'
+
+const crumb: CrumbDefinition = { title: 'Reports' }
+
+export const handle = { crumb }

ui/service/src/routes/src/test-suites-layout/import.tsx

@@ -0,0 +1 @@
+export * as TestSuitesLayout from '~/routes/src/test-suites-layout/test-suites-layout-main'

ui/service/src/routes/src/test-suites-layout/test-suites-layout-main.tsx

@@ -0,0 +1,11 @@
+import type { CrumbDefinition } from 'evidently-ui-lib/router-utils/utils'
+
+///////////////////
+//    ROUTE
+///////////////////
+
+export const _route_path = '/:projectId/test-suites'
+
+const crumb: CrumbDefinition = { title: 'Test suites' }
+
+export const handle = { crumb }

ui/service/src/routes/types.tsx

@@ -12,7 +12,4 @@ export type Routes = GetMatches<typeof routes>
 
 export type GetRouteByPath<K extends Routes['path']> = Extract<Routes, { path: K }>
 
-// TEST THAT ALL CORRECT
-type RouteStructure = GetRouteStructure<typeof routes>
-
-export type __TESTS_ROUTE_STRUCTURE = Expect<ExpectEqActuall<RouteStructure>>
+export type __TESTS_ROUTE_STRUCTURE = Expect<ExpectEqActuall<GetRouteStructure<typeof routes>>>