refactor: update breadcrumbs component to support dynamic title rende…

[Kunal1522]

Tasks

• Improve the breadcrumbs component to display each project/chapter/user/etc page H1 header content
• Added Fallback to BreadCrumbWrapper in case of some rendering issue
• Removed the /repositories to appear in breadcrumb as the page does not really exist
• Added Unit Testing for BreadCrumbs.tsx, BreadCrumbsWrapper.tsx

Resolves #(1425)

---

Proposed change

Display actual entity names in breadcrumbs instead of URL slugs.

Currently, breadcrumbs show URL-formatted text like "Bjornkimminich" instead of the real name "Björn Kimminich" from the database. This PR fixes that by having detail pages pass their GraphQL data to the breadcrumb system through a simple interface.

Pages now pass entity names like this:

The breadcrumb checks which field is set and displays that name. If no data is provided, it falls back to formatting the URL slug nicely.

Also refactored breadcrumb logic into reusable components (BreadCrumbs, BreadCrumbsWrapper, useBreadcrumbs hook) and added 72 tests.

---

BEFORE

AFTER

BEFORE

AFTER

---

Detailed PR

Problem
Breadcrumbs were showing URL slugs instead of actual entity names from the database.

Solution

1. Created Reusable Breadcrumb System
   Three main pieces:

   • BreadCrumbs.tsx - Pure UI component that renders breadcrumb items.
   • BreadCrumbsWrapper.tsx - Renders breadcrumbs. It takes an array of items and displays them nicely with proper styling and navigation links.
   • useBreadcrumbs hook - Contains all the logic for building breadcrumbs. It handles both simple routes (/projects/zap) and nested routes (/organizations/x/repositories/y).

2. Pages Pass Real Names via Props
   Each detail page already fetches GraphQL data. Now they pass the entity name to PageLayout:

   The interface accepts different entity types:

   The hook checks which field is present and uses it. If none is provided, it falls back to formatting the URL slug.

3. Special Handling for Nested Routes
   Repository routes (/organizations/[org]/repositories/[repo]) get special detection. The breadcrumb displays actual org and repo names, and skips the "Repositories" segment since that page doesn't exist.

Testing
Added 72 tests covering rendering, auto-generation, real name display, fallbacks, and edge cases. All pass.

Checklist

• I've read and followed the contributing guidelines.
• I've run make check-test locally; all checks and tests passed.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

Release Notes

• New Features
  • Enhanced breadcrumb navigation integrated across detail pages to improve site navigation and provide clearer page hierarchy.

Walkthrough

This PR refactors the breadcrumb navigation system by replacing the old path-based BreadCrumbs component with a new modular architecture: BreadCrumbRenderer (presenter), BreadCrumbsWrapper (path generator), PageLayout (wrapper), and useBreadcrumbs (logic hook). Multiple page components are integrated with PageLayout, and comprehensive tests are added.

Changes

Cohort / File(s)	Summary
Breadcrumb Core Components frontend/src/components/BreadCrumbs.tsx, frontend/src/components/BreadCrumbsWrapper.tsx, frontend/src/components/PageLayout.tsx, frontend/src/hooks/useBreadcrumbs.ts	Refactored breadcrumb system: BreadCrumbs.tsx now exports BreadCrumbRenderer accepting items prop; new BreadCrumbsWrapper generates breadcrumbs from pathname with path-based logic; new PageLayout wraps content with breadcrumbs using useBreadcrumbs hook; hook constructs breadcrumb trail from pathname and optional breadcrumbData with fallback logic.
Breadcrumb Tests frontend/__tests__/unit/components/BreadCrumbs.test.tsx, frontend/__tests__/unit/components/BreadCrumbsWrapper.test.tsx, frontend/__tests__/unit/components/PageLayout.test.tsx, frontend/__tests__/unit/hooks/useBreadcrumbs.test.ts	Reworked BreadCrumbs test to validate BreadCrumbRenderer rendering; added comprehensive test suites for BreadCrumbsWrapper (route-based visibility, link generation), PageLayout (breadcrumb rendering and props handling), and useBreadcrumbs hook (path parsing, label generation, nested routes).
Page Components with PageLayout Integration frontend/src/app/chapters/[chapterKey]/page.tsx, frontend/src/app/committees/[committeeKey]/page.tsx, frontend/src/app/members/[memberKey]/page.tsx, frontend/src/app/organizations/[organizationKey]/page.tsx, frontend/src/app/projects/[projectKey]/page.tsx, frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx	Wrapped existing DetailsCard components with PageLayout, passing breadcrumbData (projectName, memberName, chapterName, committeeName, orgName, or repoName) for breadcrumb context.
Root Layout & Layout Tests frontend/src/app/layout.tsx, frontend/__tests__/unit/pages/ChapterDetails.test.tsx, frontend/__tests__/unit/pages/CommitteeDetails.test.tsx, frontend/__tests__/unit/pages/OrganizationDetails.test.tsx	Updated RootLayout to use BreadCrumbsWrapper instead of BreadCrumbs; added/updated usePathname mocks in page tests and adjusted selectors to use heading role.
Queries & Dictionary frontend/src/server/queries/repositoryQueries.ts, cspell/custom-dict.txt	Added organization.name field to GET_REPOSITORY_DATA GraphQL query; added dictionary entries (Cyclonedx, bjornkimminich).

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• useBreadcrumbs hook (frontend/src/hooks/useBreadcrumbs.ts): Path parsing logic with nested route detection, title formatting, and breadcrumbData precedence requires careful validation across edge cases.
• BreadCrumbsWrapper component (frontend/src/components/BreadCrumbsWrapper.tsx): Path-based breadcrumb generation with conditional rendering and route-specific logic needs verification.
• Component interaction: Interaction between BreadCrumbRenderer, BreadCrumbsWrapper, PageLayout, and useBreadcrumbs; verify data flow and type consistency across layers.
• Page wrapping consistency: While repetitive, verify all page components correctly pass breadcrumbData and maintain proper prop forwarding to DetailsCard.
• Test coverage: Comprehensive new tests added; verify mock implementations and edge case handling (trailing slashes, undefined data, nested paths).

Possibly related PRs

• Breadcrumb component implementation #1397: Directly related — modifies breadcrumb component implementation and layout usage (original BreadCrumbs addition/refactoring).
• Moved /repositories under organization #1380: Related — modifies repository queries to include organization information; aligns with GET_REPOSITORY_DATA organization.name addition.
• Fixed breadcrumb styling and added tests #1435: Related — modifies breadcrumb components and breadcrumb-related tests with overlapping scope.

Suggested labels

frontend, frontend-tests

Suggested reviewers

• kasya
• arkid15r

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d6ca282 and 7a1353d.

⛔ Files ignored due to path filters (1)

• frontend/src/types/__generated__/repositoryQueries.generated.ts is excluded by !**/__generated__/**

📒 Files selected for processing (20)

• cspell/custom-dict.txt (3 hunks)
• frontend/__tests__/unit/components/BreadCrumbs.test.tsx (1 hunks)
• frontend/__tests__/unit/components/BreadCrumbsWrapper.test.tsx (1 hunks)
• frontend/__tests__/unit/components/PageLayout.test.tsx (1 hunks)
• frontend/__tests__/unit/hooks/useBreadcrumbs.test.ts (1 hunks)
• frontend/__tests__/unit/pages/ChapterDetails.test.tsx (1 hunks)
• frontend/__tests__/unit/pages/CommitteeDetails.test.tsx (2 hunks)
• frontend/__tests__/unit/pages/OrganizationDetails.test.tsx (2 hunks)
• frontend/src/app/chapters/[chapterKey]/page.tsx (2 hunks)
• frontend/src/app/committees/[committeeKey]/page.tsx (2 hunks)
• frontend/src/app/layout.tsx (2 hunks)
• frontend/src/app/members/[memberKey]/page.tsx (2 hunks)
• frontend/src/app/organizations/[organizationKey]/page.tsx (2 hunks)
• frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx (3 hunks)
• frontend/src/app/projects/[projectKey]/page.tsx (2 hunks)
• frontend/src/components/BreadCrumbs.tsx (2 hunks)
• frontend/src/components/BreadCrumbsWrapper.tsx (1 hunks)
• frontend/src/components/PageLayout.tsx (1 hunks)
• frontend/src/hooks/useBreadcrumbs.ts (1 hunks)
• frontend/src/server/queries/repositoryQueries.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

The PR must be linked to an issue assigned to the PR author.

[sonarqubecloud]

Quality Gate failed

Failed conditions
6.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud