[WEB-3681]feat: added user timezone dates for cycle #6820
Conversation
WalkthroughThis pull request enhances cycle components and date dropdowns with timezone-aware functionality. A new custom hook, Changes
Sequence Diagram(s)sequenceDiagram
participant CLI as CycleListItemAction
participant TZ as useTimeZoneConverter
participant DD as DateRangeDropdown
participant UI as User Interface
CLI->>TZ: Request formatted start/end dates and UTC offset
TZ-->>CLI: Return formatted dates & UTC offset
alt Cycle is active
CLI->>UI: Render Tooltip with formatted dates and offset
else Cycle is inactive
CLI->>DD: Render DateRangeDropdown with custom tooltips
end
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🪧 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: 1
🧹 Nitpick comments (1)
web/core/components/cycles/list/cycle-list-item-action.tsx (1)
248-281: Remove unnecessary fragment and improve code structure.The date range dropdown for inactive cycles is wrapped in an unnecessary fragment that can be removed.
- ) : ( - cycleDetails.start_date && ( - <> - <DateRangeDropdown - buttonVariant={"transparent-with-text"} - buttonContainerClassName={`h-6 w-full cursor-auto flex items-center gap-1.5 text-custom-text-300 rounded text-xs [&>div]:hover:bg-transparent`} - buttonClassName="p-0" - minDate={new Date()} - value={{ - from: getDate(cycleDetails.start_date), - to: getDate(cycleDetails.end_date), - }} - placeholder={{ - from: "Start date", - to: "End date", - }} - showTooltip={isProjectTimeZoneDifferent()} - customTooltipHeading="In your timezone" - customTooltipContent={ - <span className="flex gap-1"> - {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")} - <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" /> - {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")} - </span> - } - required={cycleDetails.status !== "draft"} - disabled - hideIcon={{ - from: false, - to: false, - }} - /> - </> - ) + ) : cycleDetails.start_date && ( + <DateRangeDropdown + buttonVariant={"transparent-with-text"} + buttonContainerClassName={`h-6 w-full cursor-auto flex items-center gap-1.5 text-custom-text-300 rounded text-xs [&>div]:hover:bg-transparent`} + buttonClassName="p-0" + minDate={new Date()} + value={{ + from: getDate(cycleDetails.start_date), + to: getDate(cycleDetails.end_date), + }} + placeholder={{ + from: "Start date", + to: "End date", + }} + showTooltip={isProjectTimeZoneDifferent()} + customTooltipHeading="In your timezone" + customTooltipContent={ + <span className="flex gap-1"> + {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")} + <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" /> + {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")} + </span> + } + required={cycleDetails.status !== "draft"} + disabled + hideIcon={{ + from: false, + to: false, + }} + /> )}🧰 Tools
🪛 Biome (1.9.4)
[error] 249-279: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
web/core/components/cycles/list/cycle-list-item-action.tsx(5 hunks)web/core/components/cycles/list/cycles-list-item.tsx(2 hunks)web/core/components/dropdowns/date-range.tsx(3 hunks)web/core/hooks/use-timezone-converter.tsx(1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
web/core/components/cycles/list/cycle-list-item-action.tsx (3)
web/core/hooks/use-timezone-converter.tsx (1)
useTimeZoneConverter(4-45)web/core/store/router.store.ts (1)
projectId(85-87)web/core/components/dropdowns/date-range.tsx (1)
DateRangeDropdown(57-226)
🪛 Biome (1.9.4)
web/core/components/cycles/list/cycle-list-item-action.tsx
[error] 249-279: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (11)
web/core/components/cycles/list/cycles-list-item.tsx (2)
56-56: LGTM: Clear variable naming for active cycle state.The addition of this boolean flag clearly identifies when a cycle is "current" and helps with conditional rendering in the component tree.
117-117: Passes active state to child component.The
isActiveprop is correctly passed to theCycleListItemActioncomponent, enabling timezone-related features for active cycles.web/core/components/dropdowns/date-range.tsx (3)
53-54: LGTM: Well-defined prop types for tooltip customization.Adding these optional props enhances the component's flexibility, allowing for customized tooltip content and heading.
83-84: LGTM: Proper prop destructuring.The new props are correctly destructured from the props object following the pattern of the existing code.
154-163: LGTM: Proper implementation of fallback values.The implementation correctly uses optional chaining and nullish coalescing to provide fallback values when custom tooltip content or heading are not provided.
web/core/hooks/use-timezone-converter.tsx (3)
1-9: LGTM: Clean hook implementation with necessary imports.The hook is well-structured and obtains timezone data from user and project sources.
10-18: LGTM: Helpful formatter for user timezone dates.This function properly handles undefined values and correctly converts dates to the user's timezone.
40-45: LGTM: Clear timezone difference check.This function correctly determines if the project and user timezones differ, with appropriate handling of undefined values.
web/core/components/cycles/list/cycle-list-item-action.tsx (3)
4-4: LGTM: Appropriate imports for timezone and date functionality.The added imports for date-fns functions, icons, and the custom hook are necessary for the new timezone functionality.
Also applies to: 8-8, 33-33
60-62: LGTM: Properly initializing timezone utilities.The hook is correctly used with the projectId and its methods are properly destructured. The UTC offset is retrieved at the right point before rendering.
Also applies to: 95-96
216-247: LGTM: Well-implemented active cycle date display with timezone info.When a cycle is active, the component now displays:
- Formatted dates with a tooltip showing dates in the user's timezone
- A badge showing the project's UTC offset for context
- The cycle creator's avatar
This enhances user experience by providing timezone context for active cycles.
*chore: refactored user timezone functions
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
packages/i18n/src/locales/sk/translations.json (1)
1776-1781: Review of New Translation Keys for Cycle DatesThe new translation entries for cycle dates and related actions enhance the i18n support for timezone-aware functionalities. Overall, the keys and placeholders (e.g.
{count}) are consistent with similar entries and clearly convey their purpose.However, please note a minor grammatical improvement for the key
"in_your_timezone". In Slovak, to agree with the neuter noun "časové pásmo", the possessive adjective should be updated from"Váš"to"Vaše"and the accompanying adjective should be"časové"instead of"časový". For instance, consider the following diff:- "in_your_timezone": "Váš časový pásmo", + "in_your_timezone": "Vaše časové pásmo",This change ensures grammatical correctness and consistency with other similar translations (e.g.,
"timezone": "Časové pásmo").packages/i18n/src/locales/zh-TW/translations.json (1)
1779-1784: New Timezone and Date Translation Keys AddedThe new keys
"start_date","end_date","in_your_timezone","transfer_work_items","date_range", and"add_date"have been added with appropriate Chinese (Traditional) translations. This update aligns well with the PR objective of enhancing timezone-related date displays in cycles. Please verify that these keys and their translations are consistent with similar changes in other locales to maintain consistency across the application.packages/i18n/src/locales/ru/translations.json (1)
1777-1782: New Cycle Date and Timezone Translations:
The keys"start_date","end_date","in_your_timezone","transfer_work_items","date_range", and"add_date"have been added under the"project_cycles"section. They are concise and clearly communicate the intended UI messages for your new cycle functionality. Please ensure that:
- The placeholder
{count}in"transfer_work_items"is consistent with similar placeholders in other locale files.- The phrasing aligns with the UI context—especially with the badge that displays the UTC offset—and remains consistent across all languages.
packages/i18n/src/locales/en/translations.json (1)
1609-1614: New Translation Keys for Cycle Timezone FeaturesThe newly added keys:
"start_date": "Start date""end_date": "End date""in_your_timezone": "In your timezone""transfer_work_items": "Transfer {count} work items""date_range": "Date range""add_date": "Add date"are clearly and consistently named to support the timezone-aware functionality for cycles, aligning with the PR objectives.
A couple of recommendations:
- Ensure similar updates are applied to other locale files to maintain consistent internationalization.
- Verify that these keys are referenced correctly in the UI components responsible for cycle dates.
packages/i18n/src/locales/cs/translations.json (1)
1777-1782: Enhance Wording Consistency for New Cycle Date Translations
The newly added keys for cycle-related dates and timezone functionality support the user timezone feature ([WEB-3681]). Please verify that the wording in these translations aligns with terminology used elsewhere in the project. For example, consider whether "Začátek data" and "Konec data" might be better rendered as "Datum začátku" and "Datum ukončení" for consistency. Also, for clarity, "in_your_timezone" might be revised to "Ve vašem časovém pásmu" if that better reflects the intended message.packages/i18n/src/locales/ja/translations.json (1)
1777-1782: New Cycle Date Translation Keys AddedThe new translation entries—
"start_date","end_date","in_your_timezone","transfer_work_items","date_range", and"add_date"—are introduced to support the enhanced cycle date functionality. These keys and their corresponding Japanese translations ("開始日", "終了日", "あなたのタイムゾーン", "作業項目を転送 {count}", "日付範囲", "日付を追加") appear accurate and consistent with common project management terminology.Please ensure that these keys are used consistently in the components that manage cycle data (e.g., cycle tooltips, UTC offset badges) so that the UI reflects these translations uniformly across the application.
web/core/components/cycles/list/cycle-list-item-action.tsx (1)
249-279: Consider removing unnecessary Fragment.The fragment wrapping the DateRangeDropdown component is redundant as it contains only one child element.
- <> <DateRangeDropdown buttonVariant={"transparent-with-text"} buttonContainerClassName={`h-6 w-full cursor-auto flex items-center gap-1.5 text-custom-text-300 rounded text-xs [&>div]:hover:bg-transparent`} buttonClassName="p-0" minDate={new Date()} value={{ from: getDate(cycleDetails.start_date), to: getDate(cycleDetails.end_date), }} placeholder={{ from: t("project_cycles.start_date"), to: t("project_cycles.end_date"), }} showTooltip={isProjectTimeZoneDifferent()} customTooltipHeading={t("project_cycles.in_your_timezone")} customTooltipContent={ <span className="flex gap-1"> {renderFormattedDateInUserTimezone(cycleDetails.start_date ?? "")} <ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" /> {renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")} </span> } required={cycleDetails.status !== "draft"} disabled hideIcon={{ from: false, to: false, }} /> - </>🧰 Tools
🪛 Biome (1.9.4)
[error] 249-279: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
packages/i18n/src/locales/cs/translations.json(1 hunks)packages/i18n/src/locales/de/translations.json(2 hunks)packages/i18n/src/locales/en/translations.json(1 hunks)packages/i18n/src/locales/es/translations.json(1 hunks)packages/i18n/src/locales/fr/translations.json(1 hunks)packages/i18n/src/locales/it/translations.json(1 hunks)packages/i18n/src/locales/ja/translations.json(1 hunks)packages/i18n/src/locales/ko/translations.json(1 hunks)packages/i18n/src/locales/pl/translations.json(2 hunks)packages/i18n/src/locales/ru/translations.json(1 hunks)packages/i18n/src/locales/sk/translations.json(1 hunks)packages/i18n/src/locales/ua/translations.json(1 hunks)packages/i18n/src/locales/zh-CN/translations.json(1 hunks)packages/i18n/src/locales/zh-TW/translations.json(1 hunks)web/core/components/cycles/list/cycle-list-item-action.tsx(5 hunks)web/core/components/dropdowns/date-range.tsx(4 hunks)web/core/hooks/use-timezone-converter.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/core/components/dropdowns/date-range.tsx
🧰 Additional context used
🧠 Learnings (1)
web/core/hooks/use-timezone-converter.tsx (1)
Learnt from: vamsikrishnamathala
PR: makeplane/plane#6820
File: web/core/hooks/use-timezone-converter.tsx:19-39
Timestamp: 2025-03-26T13:41:39.412Z
Learning: In the Plane project, the `getProjectUTCOffset` function in the timezone converter hook is designed to return undefined when there is no difference between the project's timezone and UTC (when offset is 0).
🪛 Biome (1.9.4)
web/core/components/cycles/list/cycle-list-item-action.tsx
[error] 249-279: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (16)
packages/i18n/src/locales/zh-CN/translations.json (1)
1777-1782: New translation entries for cycle timezone features.
The new keys ("start_date","end_date","in_your_timezone","transfer_work_items","date_range", and"add_date") provide the localized text required for displaying cycle dates and timezone-aware information. Please verify that these key names and translations are consistent with those in the other locale files (e.g., English, Spanish) and that they match exactly the keys used in the corresponding components.packages/i18n/src/locales/de/translations.json (1)
1750-1755: Ensure consistency and clarity in the new translation entries.
The newly added keys—"start_date": "Startdatum","end_date": "Enddatum","in_your_timezone": "In Ihrer Zeitzone","transfer_work_items": "Übertragen von {count} Arbeitselementen","date_range": "Datumsbereich", and"add_date": "Datum hinzufügen"—are well-aligned with the PR’s objective of enhancing cycle-related date functionality with timezone awareness. Please verify that:
- The phrasing is consistent with similar keys in other locale files.
- The placeholder
{count}in"transfer_work_items"is used correctly and matches the style in other translations.packages/i18n/src/locales/it/translations.json (1)
1775-1780: New Translation Entries for Cycle Date and Timezone FeaturesThe newly added keys for
"start_date","end_date","in_your_timezone","transfer_work_items","date_range", and"add_date"accurately capture the intended user interface text for cycle components. The Italian translations appear clear, idiomatic, and consistent with the style used throughout the file. Please double-check that placeholders (e.g.{count}in"transfer_work_items") match the conventions used in other locale files for consistency across different languages.packages/i18n/src/locales/ua/translations.json (1)
1750-1755: New Cycle Date and Timezone Keys Added
These new translation entries—"start_date","end_date","in_your_timezone","transfer_work_items","date_range"and"add_date"—are introduced to support the cycle timezone features as outlined in the PR objectives. The translations appear correct and follow the established format. Please ensure that these keys remain consistent with those added in other locale files (e.g., CS, DE) to maintain uniform behavior across languages.packages/i18n/src/locales/es/translations.json (1)
1779-1784: New Cycle Timezone Date Translations
The new keys for cycle dates and timezone information—
•"start_date": "Fecha de inicio"
•"end_date": "Fecha de finalización"
•"in_your_timezone": "En tu zona horaria"
•"transfer_work_items": "Transferir {count} elementos de trabajo"
•"date_range": "Rango de fechas"
•"add_date": "Agregar fecha"—are clear and accurately rendered. They use consistent terminology (e.g. “Fecha de inicio” and “Fecha de finalización”) and include the proper placeholder for dynamic content in
"transfer_work_items". Please verify that these translations align with the other similar date keys used throughout the application to ensure consistency in the user interface.packages/i18n/src/locales/ko/translations.json (1)
1779-1784: New Cycle Translations AddedThe new translation keys—
"start_date","end_date","in_your_timezone","transfer_work_items","date_range", and"add_date"—are clearly defined and follow the formatting conventions used throughout the file. These keys are critical for the new cycle features that display dates in the user's timezone and provide related badges (e.g., showing the UTC offset).Please verify that these values are consistent with corresponding entries in other locale files (such as English, Czech, German, etc.) to ensure a uniform user experience across all languages.
packages/i18n/src/locales/pl/translations.json (1)
1750-1755: New translations added for user timezone features.These translations support the new timezone-related features in the application, enabling proper localization of date-related UI elements in Polish.
web/core/components/cycles/list/cycle-list-item-action.tsx (4)
60-61: Good implementation of the timezone converter hook.The hook is properly destructured to access the functions needed for timezone conversion and formatting.
95-96: Well-structured timezone offset calculation.The
projectUTCOffsetis derived from the hook, which will be used later to display the UTC offset badge when there's a difference between timezones.
213-213: Good use of translation with dynamic counting.The translation key uses the count parameter to support pluralization for transferable work items.
216-280: Enhanced UI with timezone-aware date display.The conditional rendering based on the cycle's active status improves user experience by:
- Showing a tooltip with dates formatted in the user's timezone when there's a timezone difference
- Displaying a UTC offset badge to provide context
- Using DateRangeDropdown with proper tooltips for inactive cycles
🧰 Tools
🪛 Biome (1.9.4)
[error] 249-279: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
web/core/hooks/use-timezone-converter.tsx (5)
1-4: Good imports and dependencies.The hook imports the necessary dependencies for date formatting and accessing user/project data.
5-10: Well-structured hook with proper data retrieval.The hook correctly retrieves both user and project timezone information needed for the conversion operations.
17-27: Well-implemented date formatting function.The
renderFormattedDateInUserTimezonefunction correctly:
- Handles undefined cases
- Converts dates to the user's timezone
- Formats the result using date-fns
- Uses useCallback with the proper dependency
33-53: Intentional handling of zero UTC offset.The function
getProjectUTCOffsetis designed to return undefined when there is no difference between the project's timezone and UTC (when offset is 0), which is the intended behavior as confirmed in previous discussions.The calculation and formatting of the UTC offset is well-implemented with proper handling of hours, minutes, and the sign.
59-62: Simple and effective timezone difference check.The
isProjectTimeZoneDifferentfunction correctly checks if the project's timezone differs from the user's timezone, with proper handling of undefined values.
| "start_date": "Date de début", | ||
| "end_date": "Date de fin", | ||
| "in_your_timezone": "Dans votre fuseau horaire", | ||
| "transfer_work_items": "Transférer {count} éléments de travail", | ||
| "date_range": "Plage de dates", | ||
| "add_date": "Ajouter une date", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
New Cycle Date and Work Item Transfer Translations Added
The newly added keys "start_date", "end_date", "in_your_timezone", "transfer_work_items", "date_range", and "add_date" clearly reflect the cycle date enhancements required by this PR. The translations are concise and consistent with existing language usage. Please ensure that these entries are synchronized with translations in other locale files for uniformity in the UI.
* feat: added user timezone dates for cycle * *chore: added translations *chore: refactored user timezone functions
Description
Added a tooltip to display dates in the user timezone for the cycle.
Added badge to display UTC offset for the project in active cycle.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
WEB-3681
Summary by CodeRabbit