[Web]-Fix: Enhance progress bar color logic and improve task estimation handling #3962
Conversation
…n handling - Added a neutral state color for the progress bar when no estimation exists. - Updated the task estimation calculation to return 0 when no estimation data is available, improving clarity in task statistics. - Adjusted layout in TeamOutstandingNotifications component for better spacing.
WalkthroughThe changes introduce explicit handling for zero states in both UI and logic: a progress bar now displays a distinct color when progress is exactly zero, a task estimation hook prevents division by zero and clarifies behavior when no estimate exists, and a minor UI spacing adjustment is made to a team notifications component. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
Suggested reviewers
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
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. 🪧 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 (
|
Please review these files and clean up the unused code. |
There was a problem hiding this comment.
Greptile Summary
This PR fixes a visual bug where progress bars incorrectly displayed green color when no task estimation data existed, which misleadingly suggested task completion. The solution implements a three-part approach:
-
Progress Bar Color Logic Enhancement: Modified the
getProgressColorfunction in_progress-bar.tsxto add an explicit check forprogress === 0, returning neutral gray colors (bg-gray-400 dark:bg-gray-500) instead of falling through to the default green state. -
Task Statistics Hook Update: Updated the
getEstimationfunction inuse-task-statistics.tsto return 0 when no estimation data is available (totalEstimate === 0), rather than attempting calculations that could result in undefined behavior or division by zero. -
Minor Layout Adjustment: Added
mb-1class to the TeamOutstandingNotifications component for improved spacing when the neutral state is displayed.
The changes work together to create a consistent neutral state throughout the application - when no estimation exists, the hook returns 0, which triggers the gray color in the progress bar, providing clear visual feedback that no estimation has been set rather than suggesting completion.
Confidence score: 5/5
• This PR is extremely safe to merge - it's a well-contained bug fix with clear logic and no side effects
• The changes are straightforward, well-tested locally, and address a specific UX issue with proper fallback handling
• All three files contain minimal, focused changes that work together cohesively without affecting other functionality
3 files reviewed, no comments
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/core/components/duplicated-components/_progress-bar.tsx(1 hunks)apps/web/core/components/teams/team-outstanding-notifications.tsx(1 hunks)apps/web/core/hooks/tasks/use-task-statistics.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
apps/web/core/hooks/tasks/use-task-statistics.ts (1)
Learnt from: CREDO23
PR: #3353
File: apps/web/lib/features/task/task-input.tsx:812-815
Timestamp: 2024-11-20T19:56:12.313Z
Learning: In apps/web/lib/features/task/task-input.tsx, prefer using useRef over useState for assignees in the AssigneesSelect component to prevent re-renders on change.
apps/web/core/components/duplicated-components/_progress-bar.tsx (8)
Learnt from: CREDO23
PR: #3185
File: apps/web/lib/settings/task-statuses-form.tsx:187-199
Timestamp: 2024-11-07T14:04:24.336Z
Learning: In apps/web/lib/settings/task-statuses-form.tsx, when generating colors in the getRandomColor function, prefer to keep generating them randomly to have more than five colors, even if it might affect color accessibility.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:45.111Z
Learning: In apps/web/components/ui/sidebar.tsx, modifications to the keyboard shortcut implementation within React.useEffect can cause build errors. The current implementation has been validated by shadcn-ui and should remain unchanged.
Learnt from: CREDO23
PR: #3360
File: apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx:346-354
Timestamp: 2024-11-25T18:49:15.126Z
Learning: In apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx, within the ProjectDropDown component, both parent and child state should be synchronized for better UI updates, even in controlled mode. The onChange function carries the parent state, and setSelected maintains the selected state in the child component.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:35.107Z
Learning: In apps/web/components/ui/sidebar.tsx, keyboard shortcut accessibility has already been reviewed and approved by shadcn-ui; further suggestions in this area are unnecessary.
Learnt from: syns2191
PR: #3549
File: apps/server-web/src/main/helpers/interfaces/i-constant.ts:14-17
Timestamp: 2025-01-26T17:29:05.825Z
Learning: In apps/server-web/src/main/helpers/interfaces/i-constant.ts, Linux platform uses the same styling as Windows in the CustomStyle type. No separate Linux-specific styling is needed in the PlatformStyle type.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:14-19
Timestamp: 2024-10-25T15:16:53.869Z
Learning: In apps/web/components/ui/sidebar.tsx, cookie configuration enhancements including secure and httpOnly flags, and making cookie name and max age configurable via environment variables, have already been implemented in previous commits.
Learnt from: NdekoCode
PR: #3199
File: apps/web/components/nav-main.tsx:74-90
Timestamp: 2024-10-28T17:28:53.268Z
Learning: In apps/web/components/nav-main.tsx, prefer to keep className styles inline instead of extracting repeated logic into shared classes.
Learnt from: CREDO23
PR: #3353
File: apps/web/lib/features/task/task-input.tsx:812-815
Timestamp: 2024-11-20T19:56:12.313Z
Learning: In apps/web/lib/features/task/task-input.tsx, prefer using useRef over useState for assignees in the AssigneesSelect component to prevent re-renders on change.
apps/web/core/components/teams/team-outstanding-notifications.tsx (8)
Learnt from: NdekoCode
PR: #3328
File: apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx:66-78
Timestamp: 2024-11-13T05:17:33.527Z
Learning: In the UserTeamActivity component (apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx), the overflow-hidden class is intentionally applied only to the first Tab.Panel because the hidden overflow is needed when the sub-component has not yet been made visible. Applying overflow-hidden to the other Tab.Panel components is not required.
Learnt from: NdekoCode
PR: #3189
File: apps/web/lib/layout/main-layout.tsx:63-63
Timestamp: 2024-10-25T14:59:25.183Z
Learning: In the ever-teams codebase, custom CSS classes may include unconventional or non-standard Tailwind CSS syntax, such as group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12, which are intentional and should not be flagged as issues.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:45.111Z
Learning: In apps/web/components/ui/sidebar.tsx, modifications to the keyboard shortcut implementation within React.useEffect can cause build errors. The current implementation has been validated by shadcn-ui and should remain unchanged.
Learnt from: CREDO23
PR: #3626
File: apps/web/app/[locale]/projects/components/page-component.tsx:119-119
Timestamp: 2025-02-28T09:17:46.802Z
Learning: In the projects page component, filtering of projects based on the active team has been moved out of the useEffect hook that fetches organization projects, and is now handled in the pagination logic instead.
Learnt from: syns2191
PR: #3409
File: apps/server-web/src/renderer/components/svgs/EverTeamsLogo.tsx:18-19
Timestamp: 2024-12-11T01:40:38.438Z
Learning: In the EverTeamsLogo component (apps/server-web/src/renderer/components/svgs/EverTeamsLogo.tsx), it's acceptable to have multiple elements with the same id attribute.
Learnt from: NdekoCode
PR: #3199
File: apps/web/components/nav-main.tsx:74-90
Timestamp: 2024-10-28T17:28:53.268Z
Learning: In apps/web/components/nav-main.tsx, prefer to keep className styles inline instead of extracting repeated logic into shared classes.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:35.107Z
Learning: In apps/web/components/ui/sidebar.tsx, keyboard shortcut accessibility has already been reviewed and approved by shadcn-ui; further suggestions in this area are unnecessary.
Learnt from: NdekoCode
PR: #3234
File: apps/web/components/pages/team/tasks/TaskTable.tsx:9-13
Timestamp: 2024-11-06T17:10:06.239Z
Learning: In the TaskTable component (apps/web/components/pages/team/tasks/TaskTable.tsx), we do not need to add error handling for task fetching when using useTeamTasks().
🪛 GitHub Actions: Knip Review - Cleanup Unused Code - WEB
apps/web/core/hooks/tasks/use-task-statistics.ts
[error] 1-1: Unused code detected in this file.
apps/web/core/components/duplicated-components/_progress-bar.tsx
[error] 1-1: Unused code detected in this file.
⏰ 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)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
apps/web/core/hooks/tasks/use-task-statistics.ts (2)
172-172: LGTM: Enhanced function signature with optional estimate parameter.The addition of the
estimate = 0parameter provides flexibility for passing custom estimates while maintaining backward compatibility through the default value.
173-178: Excellent zero-state handling implementation.The introduction of
totalEstimatevariable and early return for zero values provides clear defensive programming that:
- Prevents division by zero errors
- Establishes a clear neutral state (0) when no estimation data exists
- Improves code readability by making the intent explicit
This aligns perfectly with the PR objective of fixing the progress bar color logic for cases with no estimation data.
apps/web/core/components/duplicated-components/_progress-bar.tsx (1)
6-7: Excellent addition of neutral state for zero progress.The new condition
if (progress === 0) return 'bg-gray-400 dark:bg-gray-500';provides:
- Clear visual distinction between zero progress and low progress
- Appropriate neutral gray color that works in both light and dark themes
- Better user experience by avoiding misleading red color for zero states
This change perfectly complements the task statistics hook changes that now return 0 for cases with no estimation data.
apps/web/core/components/teams/team-outstanding-notifications.tsx (1)
32-32: LGTM: Minor spacing improvement.The addition of
mb-1class provides better visual spacing below the notifications container. This is a small but beneficial UI enhancement that improves the overall layout.
[Web]-Fix: Enhance progress bar color logic and improve task estimation handling
Screenshots
Previous screenshots
Screen.Recording.2025-07-28.at.15.38.50.mov
Current screenshots
Screen.Recording.2025-07-28.at.15.43.06.mov
Related Issues
ETP-62 [Bug]-Web Progress Bar Shows Green Color When No Estimation Data Exists
Type of Change
✅ Checklist
Please confirm you did the following before asking for review:
Summary by CodeRabbit
Style
Bug Fixes