Enhance PR section with type badges, state, merged status, and merged…#163
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughA new feature is introduced to categorize pull requests by type using keywords in their titles. Two helper functions determine the PR type and corresponding badge style. The dashboard table now includes a "Type" column with styled badges, and, for pull requests, "Merged" and "Merged Date" columns are conditionally displayed. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomePage
participant HelperFunctions
User->>HomePage: View dashboard
HomePage->>HelperFunctions: getPRType(title)
HelperFunctions-->>HomePage: Return PR type
HomePage->>HelperFunctions: getBadgeStyle(type)
HelperFunctions-->>HomePage: Return badge style classes
HomePage->>User: Render table with Type badge, Merged, and Merged Date columns
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Suggested labels
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
🪧 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
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/pages/Home/Home.tsx (1)
28-37: Improve keyword matching logic and add input validation.The current implementation has potential issues:
- No input validation for null/undefined values
- Order-dependent matching could lead to unexpected results (e.g., "fix feature bug" returns "Fix" instead of "Feature")
- Simple substring matching may cause false positives
Consider this improved implementation:
-function getPRType(title: string): string { - const lower = title.toLowerCase(); - if (lower.includes("feature")) return "Feature"; - if (lower.includes("fix")) return "Fix"; - if (lower.includes("cleanup") || lower.includes("refactor")) return "Cleanup"; - if (lower.includes("docs")) return "Docs"; - if (lower.includes("test")) return "Test"; - return "Other"; -} +function getPRType(title: string): string { + if (!title?.trim()) return "Other"; + + const lower = title.toLowerCase(); + + // Use word boundaries or more specific patterns to avoid false positives + const patterns = [ + { keywords: ['feat:', 'feature'], type: 'Feature' }, + { keywords: ['fix:', 'bug:', 'hotfix'], type: 'Fix' }, + { keywords: ['docs:', 'documentation'], type: 'Docs' }, + { keywords: ['test:', 'testing'], type: 'Test' }, + { keywords: ['refactor:', 'cleanup:', 'clean'], type: 'Cleanup' }, + ]; + + for (const pattern of patterns) { + if (pattern.keywords.some(keyword => lower.includes(keyword))) { + return pattern.type; + } + } + + return "Other"; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Home/Home.tsx(4 hunks)
🔇 Additional comments (3)
src/pages/Home/Home.tsx (3)
39-55: LGTM! Well-structured badge styling function.The color mapping is intuitive and follows common conventions (green for features, red for fixes, etc.). The switch statement structure is clean and the default case properly handles unknown types.
293-296: LGTM! Table header structure is well-organized.The new "Type" column and conditional PR-specific columns are properly positioned and the conditional rendering logic is correct.
330-341: LGTM! Conditional PR columns are well-implemented.The conditional rendering logic is consistent with the table headers, proper null safety is maintained with optional chaining, and appropriate fallback values are provided.
| {/* 🆕 PR Type Label */} | ||
| <TableCell> | ||
| <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getPRType(item.title))}`}> | ||
| {getPRType(item.title)} | ||
| </span> | ||
| </TableCell> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider semantic correctness for issue categorization.
The badge is applied to both issues and PRs, but getPRType suggests it's specifically for pull requests. Issues may not follow the same naming conventions, potentially leading to incorrect categorization.
Consider renaming the function or creating separate logic:
- {/* 🆕 PR Type Label */}
+ {/* 🆕 Type Label */}
<TableCell>
- <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getPRType(item.title))}`}>
- {getPRType(item.title)}
+ <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getItemType(item.title))}`}>
+ {getItemType(item.title)}
</span>
</TableCell>And rename the helper function:
-function getPRType(title: string): string {
+function getItemType(title: string): string {Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/Home/Home.tsx around lines 321 to 326, the function getPRType is
used to categorize both issues and pull requests, which may cause incorrect
labeling since issues might not follow PR naming conventions. Rename getPRType
to a more generic name like getIssueOrPRType or create separate functions for
issues and PRs to handle their categorization correctly. Update all references
accordingly to ensure semantic correctness in badge labeling.
|
🎉🎉 Thank you for your contribution! Your PR #163 has been merged! 🎉🎉 |
2 participants
📅 Date
July 31, 2025
🔗 Related Issue
Closes: #28
✨ Description
This PR enhances the Pull Request (PR) section of the GitHub Tracker dashboard by:
Adding design labels and metrics for each PR
Displaying PR type, state (open/closed/merged), merged status, and merged date
Using Tailwind CSS badges for clean and informative UI presentation
Improving overall visualization of contributor activity
✅ How Has This Been Tested?
Tested locally on latest codebase using mock GitHub data
Verified UI changes in the PR section of the Home page
Ensured proper display of badges and values across PRs in multiple states
📸 Screenshots (if applicable)
📦 Type of Change
New feature
Code style update
Summary by CodeRabbit