improved breadcrumbs by introducing page layout component #1515
Conversation
Summary by CodeRabbit
Summary by CodeRabbit
WalkthroughThe BreadCrumbs component was refactored to accept explicit breadcrumb items as props, removing the internal logic for deriving breadcrumbs from the URL. A new PageLayout component was introduced to generate and merge automatic and manual breadcrumbs. All relevant page components were updated to use PageLayout and provide appropriate breadcrumb data. Corresponding tests were updated to match the new interface. Changes
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Possibly related PRs
Suggested reviewers
✨ Finishing Touches
🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
frontend/src/app/committees/page.tsx (1)
67-67: Consider using optional chaining for cleaner code.The static analysis tool correctly identifies an opportunity to use optional chaining for more concise code.
- {committees && committees.map(renderCommitteeCard)} + {committees?.map(renderCommitteeCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/contribute/page.tsx (1)
86-86: Consider using optional chaining for cleaner code.Similar to the committees page, this can be simplified with optional chaining.
- {issues && issues.map(renderContributeCard)} + {issues?.map(renderContributeCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 86-86: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/organizations/page.tsx (1)
68-68: Simplify conditional rendering with optional chaining.The static analysis tool correctly identifies that optional chaining would be cleaner here.
Apply this diff to use optional chaining:
- {organizations && organizations.map(renderOrganizationCard)} + {organizations?.map(renderOrganizationCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 68-68: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/members/page.tsx (1)
67-67: Consider using optional chaining for better defensive programming.The static analysis tool suggests using optional chaining, which would make the code more robust against potential undefined values.
Apply this diff to use optional chaining:
- {users && users.map((user) => <div key={user.key}>{renderUserCard(user)}</div>)} + {users?.map((user) => <div key={user.key}>{renderUserCard(user)}</div>)}🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/projects/page.tsx (1)
83-83: Consider using optional chaining for consistency and safety.The static analysis tool suggests using optional chaining, which would be more defensive and consistent with modern JavaScript practices.
Apply this diff to use optional chaining:
- {projects && projects.filter((project) => project.is_active).map(renderProjectCard)} + {projects?.filter((project) => project.is_active).map(renderProjectCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/chapters/page.tsx (1)
105-105: Use optional chaining for cleaner code.The static analysis tool correctly identified that the conditional rendering can be simplified using optional chaining.
Apply this diff to use optional chaining:
- {chapters && chapters.filter((chapter) => chapter.is_active).map(renderChapterCard)} + {chapters?.filter((chapter) => chapter.is_active).map(renderChapterCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/components/PageLayout.tsx (1)
4-7: Consider moving interface to a shared types file.While the interface definition is correct, consider moving
BreadcrumbItemto a shared types file (e.g.,types/breadcrumb.ts) for better reusability across components, especially since this interface will likely be used by consuming components.-interface BreadcrumbItem { - title: string - href: string -}Create
frontend/src/types/breadcrumb.ts:export interface BreadcrumbItem { title: string href: string }Then import it:
+import { BreadcrumbItem } from 'types/breadcrumb'frontend/src/components/BreadCrumbs.tsx (1)
9-16: Consider interface naming consistency.The interface
BCrumbItemcould be renamed toBreadcrumbItemfor consistency with the PageLayout component and better readability.-interface BCrumbItem { +interface BreadcrumbItem { title: string href: string } interface BreadCrumbsProps { - bcItems: BCrumbItem[] + bcItems: BreadcrumbItem[] }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (25)
frontend/__tests__/unit/components/BreadCrumbs.test.tsx(3 hunks)frontend/__tests__/unit/pages/CommitteeDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/OrganizationDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/ProjectDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/RepositoryDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/SnapshotDetails.test.tsx(2 hunks)frontend/__tests__/unit/pages/UserDetails.test.tsx(3 hunks)frontend/src/app/about/page.tsx(2 hunks)frontend/src/app/chapters/[chapterKey]/page.tsx(2 hunks)frontend/src/app/chapters/page.tsx(2 hunks)frontend/src/app/committees/[committeeKey]/page.tsx(2 hunks)frontend/src/app/committees/page.tsx(2 hunks)frontend/src/app/contribute/page.tsx(2 hunks)frontend/src/app/layout.tsx(0 hunks)frontend/src/app/members/[memberKey]/page.tsx(2 hunks)frontend/src/app/members/page.tsx(2 hunks)frontend/src/app/organizations/[organizationKey]/page.tsx(2 hunks)frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx(2 hunks)frontend/src/app/organizations/page.tsx(2 hunks)frontend/src/app/projects/[projectKey]/page.tsx(2 hunks)frontend/src/app/projects/page.tsx(2 hunks)frontend/src/app/snapshots/[id]/page.tsx(2 hunks)frontend/src/app/snapshots/page.tsx(2 hunks)frontend/src/components/BreadCrumbs.tsx(2 hunks)frontend/src/components/PageLayout.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/app/layout.tsx
🧰 Additional context used
🧬 Code Graph Analysis (14)
frontend/src/app/organizations/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)
frontend/src/app/committees/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)
frontend/src/app/contribute/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)
frontend/src/app/snapshots/page.tsx (2)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)frontend/src/types/snapshot.ts (1)
Snapshots(21-26)
frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)
frontend/src/app/chapters/[chapterKey]/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)
frontend/src/app/members/page.tsx (2)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)frontend/src/types/user.ts (1)
user(3-18)
frontend/src/app/committees/[committeeKey]/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)
frontend/src/app/about/page.tsx (2)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)frontend/src/utils/aboutData.ts (2)
aboutText(1-5)technologies(7-76)
frontend/src/components/PageLayout.tsx (1)
frontend/src/components/BreadCrumbs.tsx (1)
BreadCrumbs(18-68)
frontend/src/app/projects/[projectKey]/page.tsx (2)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)backend/apps/github/models/repository.py (1)
project(158-160)
frontend/src/app/snapshots/[id]/page.tsx (2)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)frontend/src/utils/dateFormatter.ts (1)
formatDate(1-20)
frontend/src/components/BreadCrumbs.tsx (1)
frontend/src/types/link.ts (1)
Link(1-6)
frontend/src/app/chapters/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(8-21)
🪛 Biome (1.9.4)
frontend/src/app/organizations/page.tsx
[error] 68-68: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/committees/page.tsx
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/contribute/page.tsx
[error] 86-86: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/members/page.tsx
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/projects/page.tsx
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/chapters/page.tsx
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (41)
frontend/__tests__/unit/pages/RepositoryDetails.test.tsx (1)
71-72: Excellent improvement to test accessibility and specificity.The change from
screen.getByText()toscreen.getByRole('heading', { name: '...' })is a great improvement that:
- Makes the test more semantically specific by targeting heading elements
- Follows accessibility testing best practices
- Reduces the risk of false positives from other elements containing the same text
- Aligns well with the PageLayout component refactoring
frontend/__tests__/unit/pages/CommitteeDetails.test.tsx (1)
54-55: Consistent improvement in test query specificity.The update to use
getByRole('heading', { name: '...' })maintains consistency with the other test file improvements and enhances the test's semantic accuracy by specifically targeting heading elements.frontend/__tests__/unit/pages/OrganizationDetails.test.tsx (1)
73-74: Good consistency in test query improvements.The change to use role-based heading queries maintains the consistent pattern across the test suite and improves the semantic specificity of the test assertions.
frontend/__tests__/unit/pages/UserDetails.test.tsx (3)
91-92: Excellent test improvement for accessibility and specificity.The change to use
getByRole('heading', { name: 'Test User' })improves the test by specifically targeting heading elements, following accessibility testing best practices and reducing false positive risks.
271-272: Consistent application of improved test queries.Good continuation of the heading-specific query pattern in the user summary section test.
331-332: Thorough application of test improvements.The consistent use of role-based queries throughout this test file demonstrates thorough attention to improving test specificity and accessibility practices.
frontend/__tests__/unit/pages/ProjectDetails.test.tsx (1)
71-72: Excellent accessibility improvement in test assertion!The change from text-based query to role-based query for the heading is a great improvement. Using
getByRole('heading', { name: 'Test Project' })is more semantically accurate and follows accessibility testing best practices.frontend/__tests__/unit/pages/SnapshotDetails.test.tsx (1)
74-75: Consistent accessibility improvements across test cases!Both test assertions have been properly updated to use role-based queries for headings. This maintains consistency with the accessibility testing improvements made across other page test files.
Also applies to: 149-150
frontend/src/app/committees/page.tsx (1)
8-8: Great implementation of the PageLayout wrapper pattern!The integration of PageLayout follows the consistent pattern established across the codebase. The breadcrumb configuration is appropriate for the committees page, and all existing SearchPageLayout functionality is preserved.
Also applies to: 55-69
frontend/src/app/contribute/page.tsx (1)
12-12: Excellent consistency with the PageLayout integration pattern!The implementation perfectly follows the established pattern from other pages in this refactor. The breadcrumb configuration is appropriate and the existing SearchPageLayout functionality is fully preserved.
Also applies to: 74-88
frontend/src/app/members/[memberKey]/page.tsx (1)
26-26: LGTM! Clean breadcrumb navigation implementation.The PageLayout integration is well-implemented with proper breadcrumb hierarchy (Members > Current Member). The fallback from
user?.nametouser?.loginprovides good user experience when the user's display name isn't available.Also applies to: 195-216
frontend/src/app/chapters/[chapterKey]/page.tsx (1)
13-13: LGTM! Consistent breadcrumb implementation.The PageLayout integration follows the established pattern with appropriate breadcrumb hierarchy (Chapters > Current Chapter). The chapter data is properly validated before rendering due to the existing error handling.
Also applies to: 64-81
frontend/src/app/projects/[projectKey]/page.tsx (1)
21-21: LGTM! Follows established breadcrumb pattern.The PageLayout integration maintains consistency with other detail pages, using appropriate breadcrumb hierarchy (Projects > Current Project). The project data validation through existing error handling ensures breadcrumbs render safely.
Also applies to: 93-116
frontend/src/app/organizations/page.tsx (1)
6-6: LGTM! Appropriate breadcrumb for search page.The PageLayout integration is correctly implemented for a search page, with a single breadcrumb item for "Organizations" which is appropriate for a listing page.
Also applies to: 55-72
frontend/src/app/committees/[committeeKey]/page.tsx (2)
20-20: LGTM: Clean import addition.The PageLayout import is correctly added to support the breadcrumb refactoring.
83-98: LGTM: Proper breadcrumb implementation.The PageLayout integration is well-implemented with a logical breadcrumb hierarchy:
- "Committees" → "/committees" (parent listing)
- Committee name → current page
The DetailsCard props remain unchanged and are correctly nested within the PageLayout.
frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx (2)
20-20: LGTM: Appropriate import for breadcrumb refactoring.The PageLayout import is correctly added to support the new breadcrumb navigation pattern.
110-135: LGTM: Well-structured breadcrumb hierarchy.The PageLayout implementation provides a clear navigation path:
- "Organizations" → "/organizations"
- Organization name → "/organizations/{key}"
- "Repositories" → "/organizations/{key}/repositories"
- Repository name → current page
This creates an intuitive breadcrumb trail for users navigating deep into the organizational structure. The DetailsCard integration is seamless.
frontend/src/app/members/page.tsx (2)
6-6: LGTM: Correct import for breadcrumb integration.The PageLayout import is properly added to support the new breadcrumb navigation structure.
54-70: LGTM: Appropriate breadcrumb for top-level page.The PageLayout integration with a single "Members" breadcrumb item is appropriate for this top-level listing page. The SearchPageLayout wrapping preserves all existing functionality.
🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/projects/page.tsx (2)
10-10: LGTM: Proper import for breadcrumb functionality.The PageLayout import is correctly added to support the breadcrumb navigation refactoring.
62-85: LGTM: Clean integration with preserved functionality.The PageLayout wrapper with a single "Projects" breadcrumb item is appropriate for this top-level listing page. All SearchPageLayout props are correctly preserved, including the sortChildren configuration.
🧰 Tools
🪛 Biome (1.9.4)
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/organizations/[organizationKey]/page.tsx (2)
18-18: LGTM: Import statement is correct.The PageLayout import is properly added and aligns with the new breadcrumb navigation pattern.
117-136: LGTM: PageLayout implementation is well-structured.The breadcrumb navigation correctly shows the hierarchy from "Organizations" to the specific organization. The usage of
organization.namefor the title andorganizationKeyfor the href provides appropriate context and navigation.frontend/src/app/snapshots/page.tsx (2)
10-10: LGTM: Import statement is correct.The PageLayout import follows the established pattern for breadcrumb navigation enhancement.
66-80: LGTM: PageLayout integration is clean and consistent.The implementation correctly wraps the page content with appropriate breadcrumb navigation. The single breadcrumb item for "Snapshots" is suitable for this top-level page.
frontend/src/app/about/page.tsx (2)
31-31: LGTM: Import statement is correct.The PageLayout import is properly placed and consistent with the breadcrumb navigation enhancement.
102-240: LGTM: PageLayout integration maintains existing functionality.The implementation correctly wraps all page content with appropriate breadcrumb navigation. The single breadcrumb item for "About" provides clear page context while preserving all existing UI components and interactions.
frontend/src/app/chapters/page.tsx (2)
12-12: LGTM: Import statement is correct.The PageLayout import follows the established pattern for breadcrumb navigation enhancement.
80-107: LGTM: PageLayout integration is well-implemented.The PageLayout correctly wraps the SearchPageLayout with appropriate breadcrumb navigation for the Chapters page. The nested structure preserves all existing search functionality while adding consistent navigation.
🧰 Tools
🪛 Biome (1.9.4)
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/components/PageLayout.tsx (1)
8-21: LGTM! Clean and well-structured component.The PageLayout component follows React best practices with:
- Clear TypeScript typing
- Simple, focused responsibility
- Proper component composition
- Semantic HTML structure with the
<main>elementfrontend/src/app/snapshots/[id]/page.tsx (3)
19-19: LGTM! Proper import of the new PageLayout component.
113-118: Excellent implementation of breadcrumb navigation.The breadcrumb implementation is well-structured with:
- Appropriate hierarchy: Snapshots → Current Snapshot
- Defensive programming with fallback title (
snapshot?.title || 'Snapshot Details')- Correct URL paths matching the navigation structure
119-201: LGTM! Content properly wrapped in PageLayout.The existing page content is correctly wrapped in the PageLayout component while preserving all functionality. The indentation changes are appropriate for the new structure.
frontend/__tests__/unit/components/BreadCrumbs.test.tsx (4)
5-9: Improved test approach - explicit props over mocked navigation.The change from testing pathname-based behavior to explicit prop-based behavior makes the tests clearer and more maintainable. Testing with an empty array is more direct than mocking pathname.
11-26: LGTM! Comprehensive test with explicit breadcrumb items.The test properly verifies:
- Multiple breadcrumb segments render correctly
- Home link is always present
- All provided breadcrumb items are displayed
38-41: Correct assertion for non-clickable last segment.The change from checking
hrefattribute absence to verifying the element is not wrapped in an anchor tag is more accurate for the actual DOM structure.
43-78: Comprehensive test coverage maintained.All important functionality is properly tested:
- Correct href attributes on links
- Hover styles applied to clickable elements
- Last segment behavior (non-clickable)
frontend/src/components/BreadCrumbs.tsx (3)
6-6: LGTM! Appropriate use of lodash for empty array checking.
18-19: Excellent refactoring - simplified component responsibility.The component now has a single, clear responsibility: rendering breadcrumbs from provided data. The early return for empty arrays is appropriate and prevents unnecessary DOM rendering.
45-63: LGTM! Clean implementation using provided breadcrumb items.The refactored rendering logic:
- Correctly iterates over provided bcItems
- Uses item.href as key (unique identifier)
- Properly handles last item as non-clickable
- Uses item.title and item.href directly from props
This is much cleaner than the previous pathname parsing approach.
|
Hey @arkid15r ! I've looked at the nitpick comments by the code bot, and I don't think those changes should be considered for this PR. However, if changes are required, please let me know. |
| type="chapter" | ||
| /> | ||
| <PageLayout | ||
| bcItems={[ |
There was a problem hiding this comment.
Same here - can we update this for a clearer naming? If it's conflicting with anything we can do something like crumbItem.
|
|
||
| interface BreadcrumbItem { | ||
| title: string | ||
| href: string |
There was a problem hiding this comment.
I think path is more suitable here than href
| /> | ||
| <PageLayout | ||
| bcItems={[ | ||
| { title: 'Organizations', href: '/organizations' }, |
There was a problem hiding this comment.
Can we utilize usePathname from next/navigation to dynamically get the path, UpperCase it and use here for title and a path itself for href(should be named path)? Instead of hardcoding this.
|
Thank you for the feedback, @kasya . I’ll make the updates asap!. |
github-actions
bot
added
backend
docker
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
frontend/src/app/committees/page.tsx (1)
67-67: Use optional chaining for safer array access.The static analysis suggestion is valid. Consider using optional chaining to simplify the conditional rendering.
- {committees && committees.map(renderCommitteeCard)} + {committees?.map(renderCommitteeCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/organizations/page.tsx (1)
68-68: Simplify with optional chaining.Apply the static analysis suggestion to use optional chaining for cleaner code.
- {organizations && organizations.map(renderOrganizationCard)} + {organizations?.map(renderOrganizationCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 68-68: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/contribute/page.tsx (1)
86-86: Apply optional chaining as suggested by static analysis.The conditional rendering can be simplified using optional chaining.
- {issues && issues.map(renderContributeCard)} + {issues?.map(renderContributeCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 86-86: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/projects/page.tsx (1)
83-83: Optimize chained operations with optional chaining.The static analysis suggestion applies here as well, even with the filter chain.
- {projects && projects.filter((project) => project.is_active).map(renderProjectCard)} + {projects?.filter((project) => project.is_active).map(renderProjectCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/members/page.tsx (1)
67-67: Consider using optional chaining for cleaner code.The static analysis tool correctly suggests using optional chaining instead of logical AND.
- {users && users.map((user) => <div key={user.key}>{renderUserCard(user)}</div>)} + {users?.map((user) => <div key={user.key}>{renderUserCard(user)}</div>)}🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/chapters/page.tsx (1)
105-105: Consider using optional chaining for cleaner code.Similar to the members page, the static analysis tool correctly suggests using optional chaining instead of logical AND.
- {chapters && chapters.filter((chapter) => chapter.is_active).map(renderChapterCard)} + {chapters?.filter((chapter) => chapter.is_active).map(renderChapterCard)}🧰 Tools
🪛 Biome (1.9.4)
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
backend/poetry.lockis excluded by!**/*.lockdocs/poetry.lockis excluded by!**/*.lockfrontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlschema/poetry.lockis excluded by!**/*.lock
📒 Files selected for processing (30)
.github/workflows/run-ci-cd.yaml(6 hunks).github/workflows/run-code-ql.yaml(2 hunks).github/workflows/test-schema.yaml(1 hunks)backend/docker/Dockerfile(2 hunks)backend/docker/Dockerfile.local(2 hunks)backend/docker/Dockerfile.test(2 hunks)docs/docker/Dockerfile.local(2 hunks)frontend/__tests__/unit/components/BreadCrumbs.test.tsx(3 hunks)frontend/package.json(5 hunks)frontend/src/app/about/page.tsx(2 hunks)frontend/src/app/chapters/[chapterKey]/page.tsx(2 hunks)frontend/src/app/chapters/page.tsx(2 hunks)frontend/src/app/committees/[committeeKey]/page.tsx(2 hunks)frontend/src/app/committees/page.tsx(2 hunks)frontend/src/app/contribute/page.tsx(2 hunks)frontend/src/app/layout.tsx(1 hunks)frontend/src/app/members/[memberKey]/page.tsx(2 hunks)frontend/src/app/members/page.tsx(2 hunks)frontend/src/app/organizations/[organizationKey]/page.tsx(2 hunks)frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx(2 hunks)frontend/src/app/organizations/page.tsx(2 hunks)frontend/src/app/projects/[projectKey]/page.tsx(2 hunks)frontend/src/app/projects/page.tsx(2 hunks)frontend/src/app/snapshots/[id]/page.tsx(2 hunks)frontend/src/app/snapshots/page.tsx(2 hunks)frontend/src/components/BreadCrumbs.tsx(2 hunks)frontend/src/components/CardDetailsPage.tsx(1 hunks)frontend/src/components/PageLayout.tsx(1 hunks)proxy/staging.conf(1 hunks)schema/docker/Dockerfile.test(2 hunks)
✅ Files skipped from review due to trivial changes (11)
- docs/docker/Dockerfile.local
- backend/docker/Dockerfile.local
- schema/docker/Dockerfile.test
- frontend/src/components/CardDetailsPage.tsx
- backend/docker/Dockerfile.test
- proxy/staging.conf
- .github/workflows/test-schema.yaml
- frontend/package.json
- backend/docker/Dockerfile
- .github/workflows/run-code-ql.yaml
- .github/workflows/run-ci-cd.yaml
🚧 Files skipped from review as they are similar to previous changes (13)
- frontend/src/app/organizations/[organizationKey]/page.tsx
- frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
- frontend/src/app/committees/[committeeKey]/page.tsx
- frontend/src/app/about/page.tsx
- frontend/src/app/snapshots/[id]/page.tsx
- frontend/src/app/snapshots/page.tsx
- frontend/src/app/members/[memberKey]/page.tsx
- frontend/src/app/chapters/[chapterKey]/page.tsx
- frontend/src/app/projects/[projectKey]/page.tsx
- frontend/tests/unit/components/BreadCrumbs.test.tsx
- frontend/src/app/layout.tsx
- frontend/src/components/PageLayout.tsx
- frontend/src/components/BreadCrumbs.tsx
🧰 Additional context used
🧬 Code Graph Analysis (6)
frontend/src/app/chapters/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(26-42)
frontend/src/app/committees/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(26-42)
frontend/src/app/contribute/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(26-42)
frontend/src/app/members/page.tsx (2)
frontend/src/components/PageLayout.tsx (1)
PageLayout(26-42)frontend/src/types/user.ts (1)
user(3-18)
frontend/src/app/organizations/page.tsx (1)
frontend/src/components/PageLayout.tsx (1)
PageLayout(26-42)
frontend/src/app/projects/page.tsx (2)
frontend/src/components/PageLayout.tsx (1)
PageLayout(26-42)frontend/src/utils/sortingOptions.ts (1)
sortOptionsProject(1-8)
🪛 Biome (1.9.4)
frontend/src/app/chapters/page.tsx
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/committees/page.tsx
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/contribute/page.tsx
[error] 86-86: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/members/page.tsx
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/organizations/page.tsx
[error] 68-68: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/projects/page.tsx
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (8)
frontend/src/app/committees/page.tsx (1)
8-8: PageLayout integration looks good.The addition of PageLayout wrapper correctly implements the new breadcrumb navigation pattern. The component will now automatically generate breadcrumbs based on the current pathname and provide consistent layout structure.
Also applies to: 55-69
frontend/src/app/organizations/page.tsx (1)
6-6: Consistent PageLayout implementation.The PageLayout wrapper is correctly implemented, following the same pattern as other pages. This provides unified breadcrumb navigation and layout structure.
Also applies to: 55-71
frontend/src/app/contribute/page.tsx (1)
12-12: PageLayout wrapper properly integrated.The implementation maintains all existing functionality while adding the new layout and breadcrumb structure. Modal handling and issue rendering remain unchanged.
Also applies to: 74-88
frontend/src/app/projects/page.tsx (1)
10-10: PageLayout integration preserves all existing functionality.The wrapper correctly maintains the sorting capabilities, pagination, and active project filtering while adding consistent breadcrumb navigation.
Also applies to: 62-85
frontend/src/app/members/page.tsx (2)
6-6: LGTM! Import addition is correct.The PageLayout import follows the established pattern and correctly references the new component that handles breadcrumb navigation.
54-70: LGTM! Clean PageLayout wrapper implementation.The SearchPageLayout is properly wrapped with PageLayout without modifying any existing props or logic. This successfully implements the breadcrumb improvements outlined in the PR objectives.
🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
frontend/src/app/chapters/page.tsx (2)
12-12: LGTM! Consistent import addition.The PageLayout import is correctly added and maintains consistency with the pattern established across other pages.
80-107: LGTM! Consistent PageLayout wrapper implementation.The SearchPageLayout is properly wrapped with PageLayout, maintaining all existing functionality while adding breadcrumb navigation. The implementation is consistent with the pattern applied across other pages.
🧰 Tools
🪛 Biome (1.9.4)
[error] 105-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
github-actions
bot
removed
backend
docker
| breadcrumbItems={[ | ||
| { | ||
| title: repository.name, | ||
| path: `/organizations/${organizationKey}/repositories/${repositoryKey}`, |
There was a problem hiding this comment.
Actually, I just realized this was never addressed.
Can we use a path from usePathname() here instead? This could be a potential issue if we change the structure at some point or rename something.
There was a problem hiding this comment.
Yeah right, I can take this logic to PageLayout.
| type="repository" | ||
| /> | ||
| <PageLayout | ||
| breadcrumbItems={[ |
There was a problem hiding this comment.
Another point: passing an Array with just one object is a bit unclear for readability. I understand you probably made it this way for easier merging them in PageLayout but could you update this to pass in an object instead?
There was a problem hiding this comment.
Totally valid. Just updating it.
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
frontend/jest.config.ts (1)
35-39: Double-check long-term impact of excluding__tests__/testUtils/Putting the helpers in an ignored directory prevents Jest from treating them as test files (good) but also stops coverage collection for the code inside.
If you ever want coverage metrics for utilities – or accidentally drop an actual test into that folder – it will be silently skipped.Consider moving the path to
coveragePathIgnorePatternsinstead, or leave it here but add a comment explaining the rationale so future contributors don’t misinterpret the intent.frontend/__tests__/unit/pages/About.test.tsx (1)
211-216: ESLint suppression can be removed; keep the rule effective
assertContributorTogglecontains severalexpectcalls, so the rulejest/expect-expectis satisfied.
The inline disable permanently turns the rule off for this test and may let future edits omit assertions unnoticed.- // eslint-disable-next-line jest/expect-expect test('toggles contributors list when show more/less is clicked', async () => {frontend/__tests__/testUtils/sharedAssertions.ts (2)
49-70: Parameterise hard-coded sentinel & useuserEventfor realism
assertContributorTogglealways checks that “Contributor 10” is absent, which couples the helper to a specific dataset and reduces reuse.
At the same time,fireEventis a low-level API –userEventprovides more realistic interaction semantics (including async behaviour).-export const assertContributorToggle = async (initial: string, others: string[]) => { +export const assertContributorToggle = async ( + initial: string, + others: string[], + hiddenOnCollapse: string = others[others.length - 1] // default fallback +) => { @@ - expect(screen.queryByText('Contributor 10')).not.toBeInTheDocument() + expect(screen.queryByText(hiddenOnCollapse)).not.toBeInTheDocument() @@ - const showMoreButton = screen.getByRole('button', { name: /Show more/i }) - fireEvent.click(showMoreButton) + const showMoreButton = screen.getByRole('button', { name: /show more/i }) + await userEvent.click(showMoreButton) @@ - const showLessButton = screen.getByRole('button', { name: /Show less/i }) - fireEvent.click(showLessButton) + const showLessButton = screen.getByRole('button', { name: /show less/i }) + await userEvent.click(showLessButton) @@ - expect(screen.queryByText('Contributor 10')).not.toBeInTheDocument() + expect(screen.queryByText(hiddenOnCollapse)).not.toBeInTheDocument()You’ll need to add
import userEvent from '@testing-library/user-event'at the top of the file.
This makes the helper independent of hard-coded names and closer to real user behaviour.
20-30: Avoid potential false positives with exact-text queries
assertRepoDetailsusesgetByText(stars)etc.
If a number like “42” appears elsewhere on the page, the assertion may accidentally pass.
Wrap the value in a^…$regexp (or usegetByRole/withinon a scoped container) to ensure you’re checking the intended element.- expect(screen.getByText(stars)).toBeInTheDocument() + expect( + screen.getByText(new RegExp(`^${stars}$`)) + ).toBeInTheDocument()Repeat for
forks,commits,contributors,issues.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
frontend/__tests__/testUtils/sharedAssertions.ts(1 hunks)frontend/__tests__/unit/components/BreadCrumbs.test.tsx(1 hunks)frontend/__tests__/unit/pages/About.test.tsx(2 hunks)frontend/__tests__/unit/pages/CommitteeDetails.test.tsx(2 hunks)frontend/__tests__/unit/pages/ProjectDetails.test.tsx(3 hunks)frontend/__tests__/unit/pages/RepositoryDetails.test.tsx(4 hunks)frontend/__tests__/unit/pages/SnapshotDetails.test.tsx(4 hunks)frontend/jest.config.ts(1 hunks)frontend/src/app/chapters/[chapterKey]/page.tsx(2 hunks)frontend/src/app/committees/[committeeKey]/page.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(2 hunks)frontend/src/app/projects/[projectKey]/page.tsx(2 hunks)frontend/src/app/snapshots/[id]/page.tsx(2 hunks)frontend/src/components/PageLayout.tsx(1 hunks)frontend/tsconfig.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- frontend/tsconfig.json
- frontend/tests/unit/pages/RepositoryDetails.test.tsx
🚧 Files skipped from review as they are similar to previous changes (12)
- frontend/src/app/committees/[committeeKey]/page.tsx
- frontend/src/app/projects/[projectKey]/page.tsx
- frontend/tests/unit/pages/CommitteeDetails.test.tsx
- frontend/src/app/chapters/[chapterKey]/page.tsx
- frontend/tests/unit/pages/SnapshotDetails.test.tsx
- frontend/src/app/members/[memberKey]/page.tsx
- frontend/src/app/organizations/[organizationKey]/page.tsx
- frontend/src/app/snapshots/[id]/page.tsx
- frontend/tests/unit/pages/ProjectDetails.test.tsx
- frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
- frontend/tests/unit/components/BreadCrumbs.test.tsx
- frontend/src/components/PageLayout.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
frontend/__tests__/unit/pages/About.test.tsx (1)
frontend/__tests__/testUtils/sharedAssertions.ts (1)
assertContributorToggle(49-70)
There was a problem hiding this comment.
I noticed this when going over OWASP projects, but the issue is probably with how you build BreadCrumb items in PageLayout.
The OWASP Amass org (this is just an example):
when on the organization page
But when we are getting to a repo level the org name gets messed up since you just parse the URL.
So to make this work we'll have to switch back to using Array of objects to pass in to breadcrumbItems and pass in the whole path starting from organization level, so 4 objects, each with path and title. We'll only need to do this for this page, since it's the only one that has two nested levels.
That will also require updating logic in PageLayout for generating Breadcrumb to accommodate an array of objects.
For all other pages passing just one item is enough - the title and the rest will be parsed from the url (since they are all 1 level deep)
There was a problem hiding this comment.
Understood @kasya, let me update that.
Resolves #1425