[WEB-3694]feat: added dates display in user timezone in analytics sidebar #6834
Conversation
WalkthroughThis change updates the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant S as SidebarHeader
participant T as TimeZoneConverterHook
participant D as DateRangeDropdown
U->>S: Initiates date range selection
S->>T: Fetch project UTC offset
T-->>S: Returns projectUTCOffset
S->>D: Render with date range and tooltip props
D->>S: Format dates via renderFormattedDateInUserTimezone
S-->>U: Display updated date range with contextual tooltip
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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:
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 (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
web/core/components/cycles/analytics-sidebar/sidebar-header.tsx (1)
329-337: Consider adding fallback text for empty dates in tooltipWhile the tooltip implementation is good, it might be helpful to add fallback text for when dates are empty but the tooltip is shown (though this is mitigated by the current conditional display).
customTooltipContent={ <span className="flex gap-1"> - {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")} + {cycleDetails.start_date ? renderFormattedDateInUserTimezone(cycleDetails.start_date) : t("project_cycles.add_date")} <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" /> - {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")} + {cycleDetails.end_date ? renderFormattedDateInUserTimezone(cycleDetails.end_date) : t("project_cycles.add_date")} </span> }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/core/components/cycles/analytics-sidebar/sidebar-header.tsx(4 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
web/core/components/cycles/analytics-sidebar/sidebar-header.tsx (1)
web/core/components/dropdowns/date-range.tsx (1)
DateRangeDropdown(59-229)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (5)
web/core/components/cycles/analytics-sidebar/sidebar-header.tsx (5)
6-14: Import enhancement for the timezone featureThe addition of the
ArrowRighticon is appropriate for indicating the date range in the new timezone display feature.
31-31: Good addition of timezone converter functionalityThe import of the
useTimeZoneConverterhook is well-placed and aligns with the PR objective of displaying dates in the user's timezone.
64-67: Well-structured timezone conversion implementationExtracting the necessary methods from the hook and deriving the project UTC offset is a clean approach. The hook is properly initialized with the projectId parameter.
305-348: Improved date display with timezone contextThe UI enhancements effectively implement the PR objectives by:
- Restructuring the date range selection UI with a flex container
- Adding a helpful tooltip showing dates in the user's timezone
- Displaying the project UTC offset as a badge for immediate context
The tooltip is correctly shown only when both dates are available, and the UTC offset badge is conditionally rendered.
343-347: Good use of conditional rendering for UTC offset badgeThe conditional rendering of the UTC offset badge ensures it's only shown when needed, and the styling is consistent with the application's design language.
Description
Added tool tip to display time in user's timezone when he is in different timezone from the project.
Added badge to display UTC offset for the project.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
WEB-3694
Summary by CodeRabbit
New Features
UI Improvements