Skip to content

Fixed issue: 1082 Fixing the top contributors card to make it similar to rest#1129

Closed
KaranNegi20Feb wants to merge 8 commits intoOWASP:mainfrom
KaranNegi20Feb:fixing-new-nest
Closed

Fixed issue: 1082 Fixing the top contributors card to make it similar to rest#1129
KaranNegi20Feb wants to merge 8 commits intoOWASP:mainfrom
KaranNegi20Feb:fixing-new-nest

Conversation

@KaranNegi20Feb
Copy link
Contributor

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 18, 2025

Summary by CodeRabbit

  • New Features
    • Enhanced the top contributors display to clearly present each contributor’s contribution count for an improved viewing experience.
  • Style
    • Refined the contributor sections with better spacing, adjusted image sizes, and consistent capitalization of names for a cleaner, more streamlined look.

Walkthrough

This 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 "user1" to "Contributor 1"—across Home, Chapter, Committee, and Project pages. In components, the Top Contributors functionality is enhanced with a new renderDetails function prop that customizes contributor detail rendering.

Changes

Files Change Summary
Test Files: frontend/.../Home.spec.ts & frontend/.../ProjectDetails.spec.ts Refactored visibility assertions for the "Top Contributors" section by using a common variable and simplifying checks (including a redundant check for "Contributor 1" in ProjectDetails).
Test Files: frontend/.../ChapterDetails.test.tsx & frontend/.../CommitteeDetails.test.tsx Updated contributor identifiers in mock data and assertions, changing "user1" to "Contributor 1".
Component Files: frontend/.../CardDetailsPage.tsx & frontend/.../ToggleContributors.tsx Extended the Top Contributors component interface by introducing a new renderDetails prop for custom rendering, with adjustments to element structure, styling, and naming conventions.

Possibly related PRs

Suggested reviewers

  • kasya
  • arkid15r

Tip

⚡🧪 Multi-step agentic review comment chat (experimental)
  • We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
    - To enable this feature, set early_access to true under in the settings.

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e73498a and 2fe4079.

📒 Files selected for processing (4)
  • frontend/__tests__/e2e/pages/Home.spec.ts (2 hunks)
  • frontend/__tests__/unit/pages/ChapterDetails.test.tsx (2 hunks)
  • frontend/__tests__/unit/pages/CommitteeDetails.test.tsx (2 hunks)
  • frontend/src/components/CardDetailsPage.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
  • frontend/tests/unit/pages/ChapterDetails.test.tsx
  • frontend/tests/unit/pages/CommitteeDetails.test.tsx
  • frontend/tests/e2e/pages/Home.spec.ts
  • frontend/src/components/CardDetailsPage.tsx

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@KaranNegi20Feb KaranNegi20Feb marked this pull request as ready for review March 18, 2025 05:13
@KaranNegi20Feb KaranNegi20Feb marked this pull request as draft March 18, 2025 14:16
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
frontend/src/components/ToggleContributors.tsx (1)

36-53: Enhanced contributor card with improved structure and accessibility

The restructured contributor card implementation successfully addresses the PR objectives by:

  1. Making the entire card clickable (using a button element)
  2. Improving the visual hierarchy with better spacing and alignment
  3. Ensuring consistent text capitalization for contributor names
  4. 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

📥 Commits

Reviewing files that changed from the base of the PR and between df0419d and e73498a.

📒 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 contributors

The 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 imports

The 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 implementation

The 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

@sonarqubecloud
Copy link

@KaranNegi20Feb KaranNegi20Feb marked this pull request as ready for review March 18, 2025 17:11
@KaranNegi20Feb
Copy link
Contributor Author

hey @arkid15r can you please review the PR.

Copy link
Collaborator

@arkid15r arkid15r left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make sure your PR contains the issue related changes only.
Also please follow the recommended contribution workflow.

@arkid15r arkid15r marked this pull request as draft March 18, 2025 18:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants