Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement reusable leader links component #1177

Closed
wants to merge 2 commits into from
Closed

Implement reusable leader links component #1177

wants to merge 2 commits into from

Conversation

rishyym0927
Copy link
Contributor

@rishyym0927 rishyym0927 commented Mar 25, 2025 •
edited
Loading

Commit Message

feat: Implement reusable leader links component

  • Created a reusable component to render leader names as links
  • Links now direct to /community/users?q=<leader_name>
  • Prepared for future refactor to point directly to user detail pages

Closes #1094

Pull Request Message

Title:
Implement reusable leader links component

*Description: *
This PR introduces a reusable component that renders leader names as links, directing users to /community/users?q=<leader_name>. This enhances navigation and user experience. In future updates, these links will be refactored to point directly to individual user detail pages when that functionality becomes available.

Changes:

  • Created a reusable component for leader name links
  • Integrated the component into relevant sections
  • Ensured proper URL encoding for names
Recording.2025-03-25.223511.mp4

Let me know if you need any modifications! 🚀

@coderabbitai coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 25, 2025 •
edited
Loading

Summary by CodeRabbit

  • New Features
    • Enhanced the project details view with an interactive display of leader names. Leader names are now rendered as clickable links styled for improved presentation and open in new tabs for quick access.

Walkthrough

This pull request introduces a new reusable component for displaying leader names as clickable links. A new functional component is created to render leader links with URL-encoded names, and its corresponding prop type is defined. The project details page has been updated to use this component instead of plain text. The links are styled appropriately and open in a new tab, with separators added between each leader except after the last one.

Changes

File(s) Change Summary
frontend/src/.../LeadersLinks.tsx
frontend/src/.../leader.ts		 Added new LeaderLinks component along with its LeaderLinksProps interface to render leader names as clickable links with proper URL encoding and styling.
frontend/src/.../ProjectDetails.tsx Updated the project details page to import and render the new LeaderLinks component instead of concatenating leader names into plain text.

Assessment against linked issues

Objective Addressed Explanation
Implement a reusable entity leader component (#1094) ✅
📜 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 0ac432f and 80ec41c.

📒 Files selected for processing (3)
  • frontend/src/components/ui/LeadersLinks.tsx (1 hunks)
  • frontend/src/pages/ProjectDetails.tsx (2 hunks)
  • frontend/src/types/leader.ts (1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
frontend/src/components/ui/LeadersLinks.tsx (1)
frontend/src/types/leader.ts (1)
  • LeaderLinksProps (1-3)
🔇 Additional comments (7)
frontend/src/types/leader.ts (1)

1-3: Interface looks good!

The LeaderLinksProps interface is well-defined with a clear, typed property that correctly represents an array of leader names.

frontend/src/pages/ProjectDetails.tsx (2)

22-22: Import looks good!

The import statement for the LeaderLinks component is properly added.

67-67: Excellent implementation of the LeaderLinks component!

The component is properly integrated, replacing the text representation with interactive links.

frontend/src/components/ui/LeadersLinks.tsx (4)

1-3: Imports look good!

The necessary imports for Chakra UI Link and the LeaderLinksProps type are properly included.

4-21: Well-implemented component with good UX considerations!

The component nicely maps over the leader names and renders them as clickable links with:

  • Proper URL encoding to handle special characters in names
  • Appropriate styling for both light and dark modes
  • Comma separators between names for better readability

Consider whether opening links in a new tab (target="_blank") is necessary for internal navigation. It might be more user-friendly to keep users within the same tab for navigation within your application.

23-23: Default export looks good!

The component is properly exported as the default export.

1-24: Note about file naming inconsistency

There appears to be a slight mismatch between how the component is imported in ProjectDetails.tsx (import LeaderLinks from 'components/ui/LeadersLinks') and the filename of this file (LeadersLinks.tsx). The import uses "LeadersLinks" while the component name is "LeaderLinks" (without the 's'). Ensure that your bundler configuration handles this discrepancy correctly, or consider renaming for consistency.

✨ Finishing Touches
  • 📝 Generate Docstrings

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
🪧 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 plan to trigger planning for file edits and PR creation.
  • @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.

@rishyym0927 rishyym0927 changed the title New entity Implement reusable leader links component Mar 25, 2025
@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

arkid15r
arkid15r requested changes Mar 25, 2025
View reviewed changes
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.

Thanks for addressing this!

I'd like to request adding some tests for the new functionality, also some e2e tests would be great.

Please also use this new component for the main page recent project/issues sections.

frontend/src/types/leader.ts
export interface LeaderLinksProps {
leaders: string[]
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

Please run these locally -- https://github.com/OWASP/Nest/blob/main/CONTRIBUTING.md#code-quality-checks

@arkid15r arkid15r marked this pull request as draft March 27, 2025 00:32
@arkid15r
Copy link
Collaborator

Implemented in #1143

@arkid15r arkid15r closed this Mar 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@arkid15r arkid15r arkid15r requested changes

@kasya kasya Awaiting requested review from kasya kasya is a code owner

Assignees
No one assigned
Labels
frontend
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Implement an entity leader component
2 participants
@rishyym0927 @arkid15r