add empty check and cleaned up breadcrumbs implementation (harness#833)

pixel-point · Jan 24, 2025 · ee7a1da · ee7a1da
1 parent 0170b63
commit ee7a1da
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx b/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx
@@ -6,19 +6,18 @@ import { CustomHandle } from '../../framework/routing/types'
 
 function Breadcrumbs() {
   const matches = useMatches()
+  const matchesWithBreadcrumb = matches.filter(match => (match.handle as CustomHandle)?.breadcrumb)
 
   return (
     <Topbar.Root>
       <Topbar.Left>
         <Breadcrumb.Root className="select-none">
           <Breadcrumb.List>
-            {matches.map((match, index) => {
+            {matchesWithBreadcrumb.map((match, index) => {
               const { breadcrumb, asLink = true } = (match.handle || {}) as CustomHandle
-              if (!breadcrumb) return null
-
-              const isFirst = index === 1
-              const isLast = index === matches.length - 1
-              const breadcrumbContent = breadcrumb(match.params)
+              const isFirst = index === 0
+              const isLast = index === matchesWithBreadcrumb.length - 1
+              const breadcrumbContent = breadcrumb!(match.params)
 
               return (
                 <Breadcrumb.Item key={match.pathname}>

diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx
@@ -859,12 +859,14 @@ export const mfeRoutes = (mfeProjectId = '', mfeRouteRenderer: JSX.Element | nul
         <AppShellMFE />
       </>
     ),
-    handle: { routeName: 'toHome' },
+    handle: { routeName: RouteConstants.toHome },
     children: [
       {
         path: '',
         handle: {
-          breadcrumb: () => <span>{mfeProjectId ?? ''}</span>
+          ...(mfeProjectId && {
+            breadcrumb: () => <Text>{mfeProjectId}</Text>
+          })
         },
         children: repoRoutes
       }