Enhance PR section with type badges, state, merged status, and merged…#162
Enhance PR section with type badges, state, merged status, and merged…#162gargivermaa wants to merge 2 commits intoGitMetricsLab:mainfrom
Conversation
❌ Deploy Preview for github-spy failed.
|
WalkthroughThe entire Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Assessment against linked issues
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
✨ 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 (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @gargivermaa for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![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 (2)
src/pages/Home/Home.tsx (2)
28-37: Improve type detection robustness and consider internationalization.The current implementation uses simple substring matching which may produce false positives. Consider these improvements:
- Use word boundaries to avoid partial matches
- Handle multiple keywords in titles
- Consider case variations and common abbreviations
-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 { + const lower = title.toLowerCase(); + + // Use word boundaries for more accurate matching + const hasKeyword = (keywords: string[]) => + keywords.some(keyword => new RegExp(`\\b${keyword}\\b`).test(lower)); + + if (hasKeyword(['feature', 'feat', 'enhancement', 'add'])) return "Feature"; + if (hasKeyword(['fix', 'bug', 'hotfix', 'patch'])) return "Fix"; + if (hasKeyword(['cleanup', 'refactor', 'refactoring', 'clean'])) return "Cleanup"; + if (hasKeyword(['docs', 'documentation', 'readme'])) return "Docs"; + if (hasKeyword(['test', 'testing', 'spec', 'e2e'])) return "Test"; + return "Other"; +}
83-83: Remove commented code.The commented
octokitdeclaration should be removed to keep the codebase clean.- //const octokit = getOctokit();
📜 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 with good color choices.The badge styling function provides clear visual distinction between PR types using appropriate color schemes. The switch statement is clean and the fallback to gray for unknown types is sensible.
294-297: Consistent table structure with proper conditional rendering.The new column headers are properly structured and the conditional rendering for PR-specific columns (Merged and Merged Date) is correctly implemented using the tab state.
332-343: LGTM! Proper conditional rendering with good UX considerations.The conditional rendering of Merged and Merged Date columns is well-implemented:
- Uses consistent conditional logic with the header
- Provides clear "Yes"/"No" values for merged status
- Shows formatted date or dash placeholder appropriately
- Maintains good alignment with center/left positioning
src/pages/Home/Home.tsx
Outdated
|
|
||
| {/* 🆕 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.
💡 Verification agent
🧩 Analysis chain
Consider extracting badge rendering logic and verify Tailwind CSS integration.
The inline badge implementation works but could be improved for maintainability and consistency with the Material-UI theme system.
+// Helper component for type badges
+const TypeBadge: React.FC<{ title: string }> = ({ title }) => {
+ const type = getPRType(title);
+ const badgeClass = getBadgeStyle(type);
+
+ return (
+ <span className={`px-2 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+ {type}
+ </span>
+ );
+};
<TableCell>
- <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getPRType(item.title))}`}>
- {getPRType(item.title)}
- </span>
+ <TypeBadge title={item.title} />
</TableCell>Please verify that Tailwind CSS is properly configured in this project and that the badge styles render correctly:
🏁 Script executed:
#!/bin/bash
# Check if Tailwind CSS is configured
fd -e json -e js -e ts "tailwind.config" --max-depth 2
# Check for Tailwind imports in CSS files
fd -e css | xargs grep -l "tailwind\|@apply" 2>/dev/null || echo "No Tailwind CSS imports found"
# Look for any existing Tailwind usage in the codebase
rg "className.*bg-" --type tsx --type ts -A 1 -B 1Length of output: 215
🏁 Script executed:
#!/bin/bash
# Verify Tailwind directives in the main CSS entry
echo "==> First 20 lines of src/index.css:"
head -n 20 src/index.css || echo "❌ src/index.css not found"
# Look for Tailwind background utilities in .tsx components
echo "==> Searching for bg- utility classes in .tsx files:"
rg "bg-[a-z]" -g "*.tsx" -n -C1 || echo "⚠️ No bg- utility classes found in .tsx files"Length of output: 17577
Extract badge into a reusable TypeBadge component
Tailwind CSS is properly set up—tailwind.config.js is present, src/index.css includes @tailwind directives, and bg-* utilities are used throughout your .tsx files—so the new badge styles will render correctly.
• src/pages/Home/Home.tsx: replace the inline <span> with a TypeBadge call
• Create a TypeBadge component (e.g. in src/components/TypeBadge.tsx) to encapsulate getPRType and getBadgeStyle logic
Proposed diff:
+// src/components/TypeBadge.tsx
+import React from 'react';
+import { getPRType, getBadgeStyle } from '../pages/Home/Home'; // adjust path as needed
+
+export const TypeBadge: React.FC<{ title: string }> = ({ title }) => {
+ const type = getPRType(title);
+ const badgeClass = getBadgeStyle(type);
+ return (
+ <span className={`px-2 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+ {type}
+ </span>
+ );
+};
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ Lines 322-328
- <TableCell>
- <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getPRType(item.title))}`}>
- {getPRType(item.title)}
- </span>
- </TableCell>
+ <TableCell>
+ <TypeBadge title={item.title} />
+ </TableCell>This extraction improves readability and keeps styling consistent across your app.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/Home/Home.tsx around lines 322 to 328, replace the inline span
element used for the PR type badge with a reusable TypeBadge component. Create a
new TypeBadge component in src/components/TypeBadge.tsx that encapsulates the
logic for calling getPRType and getBadgeStyle and renders the styled badge. Then
import and use this TypeBadge component in Home.tsx to improve code readability
and maintain consistent styling.
2 participants
Related Issue
Description
This PR improves the visual presentation and clarity of the Pull Requests section on the dashboard. It adds informative tags and highlights merge status, enhancing the contributor's experience.
How Has This Been Tested?
Ran the app locally and verified:
All columns display correctly
Badges are styled and labeled as expected
State and merged statuses reflect actual values
Manually cross-checked edge cases (e.g., unmerged or open PRs)
Screenshots
Type of Change
-- [ ] New feature
Summary by CodeRabbit