Fixed issue: 1082 Fixing the top contributors card to make it similar to rest#1129
Fixed issue: 1082 Fixing the top contributors card to make it similar to rest#1129KaranNegi20Feb wants to merge 8 commits intoOWASP:mainfrom
Conversation
Summary by CodeRabbit
WalkthroughThis PR updates both test cases and UI components related to the display of top contributors. In tests, assertions are refactored—including consolidating element selection via a shared variable and updating contributor names from Changes
Possibly related PRs
Suggested reviewers
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
|
df0419d to
e73498a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/components/ToggleContributors.tsx (1)
36-53: Enhanced contributor card with improved structure and accessibilityThe restructured contributor card implementation successfully addresses the PR objectives by:
- Making the entire card clickable (using a button element)
- Improving the visual hierarchy with better spacing and alignment
- Ensuring consistent text capitalization for contributor names
- Using the flexible renderDetails prop for customized content
Consider adding ARIA attributes to enhance accessibility:
<button key={index} data-testid="top-contributor" onClick={() => navigate(`/community/users/${item.login}`)} - className="mb-4 w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700" + className="mb-4 w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700" + aria-label={`View ${item.name || item.login}'s profile`} >
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/__tests__/e2e/pages/Home.spec.ts(2 hunks)frontend/__tests__/e2e/pages/ProjectDetails.spec.ts(1 hunks)frontend/src/components/ToggleContributors.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/tests/e2e/pages/ProjectDetails.spec.ts
🧰 Additional context used
🧬 Code Definitions (1)
frontend/src/components/ToggleContributors.tsx (1)
frontend/src/types/contributor.ts (1) (1)
TopContributorsTypeGraphql(8:15)
🔇 Additional comments (3)
frontend/__tests__/e2e/pages/Home.spec.ts (1)
41-45: Improved test structure for top contributorsThe refactored test now uses a more robust approach by targeting elements with the test ID 'top-contributor', making the test more resilient to UI changes while correctly verifying the visibility of all essential elements (contributor image, name, and project name).
frontend/src/components/ToggleContributors.tsx (2)
5-5: Good addition of necessary importsThe imports for JSX and the capitalize utility function support the component's new functionality effectively.
Also applies to: 8-8
14-14: Well-typed renderDetails prop implementationThe addition of the renderDetails prop with proper TypeScript typing provides excellent flexibility for customizing how contributor details are displayed across different views.
Also applies to: 20-20
|
|
hey @arkid15r can you please review the PR. |
arkid15r
left a comment
There was a problem hiding this comment.
Please make sure your PR contains the issue related changes only.
Also please follow the recommended contribution workflow.



Fixed Issues:#1082
The Links in top contributors of home page does not redirect to the correct URL and fixing expandable clicking area.
Changes made:
make the entire highlighted contributor card area clickable (link to OWASP Nest user details page)
show just a project name (no link) on the main page while keeping the contribution count on the project details page
have the link the same style as with recent issues / recent releases for both main/project details page
Screen.Recording.2025-03-18.at.6.10.23.AM.mov
Screen.Recording.2025-03-18.at.6.10.42.AM.mov