fix(kanban): complete refresh button implementation #584
Conversation
github-actions
bot
added
area/frontend
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughKanbanBoard props updated to include optional Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)apps/frontend/src/**/*.{ts,tsx,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
apps/frontend/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
apps/frontend/**/*.{ts,tsx}⚙️ CodeRabbit configuration file
Files:
🧠 Learnings (3)📚 Learning: 2025-12-30T16:38:36.314ZApplied to files:
📚 Learning: 2025-12-30T16:38:36.314ZApplied to files:
📚 Learning: 2025-12-30T16:38:36.314ZApplied to files:
🧬 Code graph analysis (1)apps/frontend/src/renderer/components/KanbanBoard.tsx (2)
⏰ 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). (2)
🔇 Additional comments (2)
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. Comment |
Summary of ChangesHello @MikeeBuilds, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request finalizes the refresh button functionality for the Kanban board, addressing previously incomplete UI elements and prop handling. It ensures that users can manually refresh tasks and receive appropriate visual feedback during the refresh process, significantly enhancing the board's usability and responsiveness. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully completes the implementation of the refresh button in the Kanban board. The changes correctly destructure the necessary props and render the button with appropriate states for loading and interaction. My review includes one suggestion to improve maintainability by using the existing internationalization setup for the button's text, which is currently hardcoded.
| className="gap-2 text-muted-foreground hover:text-foreground" | ||
| > | ||
| <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} /> | ||
| {isRefreshing ? 'Refreshing...' : 'Refresh Tasks'} |
There was a problem hiding this comment.
The button text 'Refreshing...' and 'Refresh Tasks' are hardcoded. To support internationalization, which is an established pattern in this component, these strings should be translated using the t function.
You can add keys like refreshing and refreshTasks to your tasks.json file within the kanban object:
"kanban": {
...
"refreshing": "Refreshing...",
"refreshTasks": "Refresh Tasks"
}Then, you can use the t function to display the localized text.
| {isRefreshing ? 'Refreshing...' : 'Refresh Tasks'} | |
| {isRefreshing ? t('kanban.refreshing') : t('kanban.refreshTasks')} |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/frontend/src/renderer/components/KanbanBoard.tsx (1)
332-347: Suggest getting projectId from the tasks being archived for consistency.Line 334 retrieves
projectIdfromtasks[0], while line 340 gets the IDs to archive fromtasksByStatus.done(which is derived fromfilteredTasks). For better code clarity and consistency, consider getting theprojectIdfrom the same source.🔎 Proposed refactor for consistency
const handleArchiveAll = async () => { - // Get projectId from the first task (all tasks should have the same projectId) - const projectId = tasks[0]?.projectId; + const doneTaskIds = tasksByStatus.done.map((t) => t.id); + if (doneTaskIds.length === 0) return; + + // Get projectId from the first done task (all tasks should have the same projectId) + const projectId = tasksByStatus.done[0]?.projectId; if (!projectId) { console.error('[KanbanBoard] No projectId found'); return; } - const doneTaskIds = tasksByStatus.done.map((t) => t.id); - if (doneTaskIds.length === 0) return; - const result = await archiveTasks(projectId, doneTaskIds); if (!result.success) { console.error('[KanbanBoard] Failed to archive tasks:', result.error); } };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
apps/frontend/src/renderer/components/KanbanBoard.tsx
🧰 Additional context used
📓 Path-based instructions (3)
apps/frontend/src/**/*.{ts,tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always use i18n translation keys for all user-facing text in the frontend instead of hardcoded strings
Files:
apps/frontend/src/renderer/components/KanbanBoard.tsx
apps/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
useTranslation()hook with namespace prefixes (e.g., 'navigation:items.key') for accessing translation strings in React components
Files:
apps/frontend/src/renderer/components/KanbanBoard.tsx
apps/frontend/**/*.{ts,tsx}
⚙️ CodeRabbit configuration file
apps/frontend/**/*.{ts,tsx}: Review React patterns and TypeScript type safety.
Check for proper state management and component composition.
Files:
apps/frontend/src/renderer/components/KanbanBoard.tsx
🧬 Code graph analysis (1)
apps/frontend/src/renderer/components/KanbanBoard.tsx (2)
.design-system/src/components/Button.tsx (1)
Button(10-44).design-system/src/lib/utils.ts (1)
cn(4-6)
⏰ 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). (2)
- GitHub Check: CodeQL (python)
- GitHub Check: CodeQL (javascript-typescript)
🔇 Additional comments (2)
apps/frontend/src/renderer/components/KanbanBoard.tsx (2)
36-37: LGTM! Props definition follows best practices.The optional
onRefreshcallback andisRefreshingboolean are correctly typed and allow backwards compatibility with existing usage.
280-280: LGTM! Function signature correctly updated.The new props are properly destructured, completing the implementation started in PR #548.
| {/* Kanban header with refresh button */} | ||
| {onRefresh && ( | ||
| <div className="flex items-center justify-end px-6 pt-4 pb-2"> | ||
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| onClick={onRefresh} | ||
| disabled={isRefreshing} | ||
| className="gap-2 text-muted-foreground hover:text-foreground" | ||
| > | ||
| <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} /> | ||
| {isRefreshing ? 'Refreshing...' : 'Refresh Tasks'} | ||
| </Button> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Critical: Use i18n translation keys instead of hardcoded strings.
Lines 426 contain hardcoded user-facing text 'Refreshing...' and 'Refresh Tasks', which violates the coding guidelines requiring all user-facing text to use i18n translation keys.
As per coding guidelines: "Always use i18n translation keys for all user-facing text in the frontend instead of hardcoded strings"
🔎 Proposed fix using translation keys
- {isRefreshing ? 'Refreshing...' : 'Refresh Tasks'}
+ {isRefreshing ? t('kanban.refreshing') : t('kanban.refreshTasks')}You'll need to add the corresponding keys to your translation files:
{
"kanban": {
"refreshing": "Refreshing...",
"refreshTasks": "Refresh Tasks"
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {/* Kanban header with refresh button */} | |
| {onRefresh && ( | |
| <div className="flex items-center justify-end px-6 pt-4 pb-2"> | |
| <Button | |
| variant="ghost" | |
| size="sm" | |
| onClick={onRefresh} | |
| disabled={isRefreshing} | |
| className="gap-2 text-muted-foreground hover:text-foreground" | |
| > | |
| <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} /> | |
| {isRefreshing ? 'Refreshing...' : 'Refresh Tasks'} | |
| </Button> | |
| </div> | |
| )} | |
| {/* Kanban header with refresh button */} | |
| {onRefresh && ( | |
| <div className="flex items-center justify-end px-6 pt-4 pb-2"> | |
| <Button | |
| variant="ghost" | |
| size="sm" | |
| onClick={onRefresh} | |
| disabled={isRefreshing} | |
| className="gap-2 text-muted-foreground hover:text-foreground" | |
| > | |
| <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} /> | |
| {isRefreshing ? t('kanban.refreshing') : t('kanban.refreshTasks')} | |
| </Button> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
In apps/frontend/src/renderer/components/KanbanBoard.tsx around lines 415 to 429
there are hardcoded user-facing strings ('Refreshing...' and 'Refresh Tasks');
replace them with i18n translation keys (e.g. t('kanban.refreshing') and
t('kanban.refreshTasks') or equivalent hook) by importing and using the
project's i18n helper (useTranslation or t) at the top of the component, update
the Button children to call the translation function, and add the corresponding
keys to the translation JSON files (e.g. kanban.refreshing and
kanban.refreshTasks) for all supported locales.
- Destructure onRefresh and isRefreshing props in KanbanBoard - Add refresh button in kanban header with spinning animation - Button shows 'Refreshing...' text while loading Fixes incomplete implementation from PR #548
MikeeBuilds
force-pushed
the
fix/kanban-refresh-button
branch
from
f02dd9b to
ac1e884
Compare
github-actions
bot
added
🔄 Checking
|
Hey @AndyMik90 👋 This is a quick fix to complete the Kanban refresh button from PR #548 - the props were defined but never wired up. CI passed on the first push. Just rebased to catch up with develop. Can you merge when you get a chance? 🙏 — Mike |
MikeeBuilds
left a comment
MikeeBuilds
left a comment
There was a problem hiding this comment.
Fixed! Added i18n translation keys as suggested:
t('kanban.refreshing')for "Refreshing..."t('kanban.refreshTasks')for "Refresh Tasks"
Added keys to both EN and FR translation files. Thanks for the catch! 🙏
Includes: - fix: human_review status persistence bug (AndyMik90#605) - fix(frontend): resolve PATH/PYTHONPATH issues (AndyMik90#610) - fix: electron-rebuild Windows fix (AndyMik90#622) - fix(kanban): complete refresh button (AndyMik90#584)
MikeeBuilds
added
size/XS
Merged upstream changes: - fix(ci): include update manifests for architecture-specific auto-updates (AndyMik90#611) - fix: security hook cwd extraction and PATH issues (AndyMik90#555, AndyMik90#556) (AndyMik90#587) - fix(frontend): filter empty env vars to prevent OAuth token override (AndyMik90#520) - refactor(github-review): replace confidence scoring with evidence-based validation (AndyMik90#628) - feat(terminal): add worktree support for terminals (AndyMik90#625) - fix: human_review status persistence bug (worktree plan path fix) (AndyMik90#605) - fix(frontend): resolve PATH and PYTHONPATH issues in insights and changelog services (AndyMik90#558) (AndyMik90#610) - fix: pass electron version explicitly to electron-rebuild on Windows (AndyMik90#622) - fix(kanban): complete refresh button implementation (AndyMik90#584) Conflict resolution: - insights-executor.ts: Combined local diagnostics with upstream error message improvements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Summary
Completes the refresh button implementation from PR #548 which was merged with incomplete code.
Problem
PR #548 added
onRefreshandisRefreshingprops to KanbanBoard's interface and importedRefreshCwicon, but:This left users unable to manually refresh tasks when the UI gets stuck.
Changes
onRefreshandisRefreshingprops inKanbanBoardfunctionTesting
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.