Skip to content

fix: incorrect timestamp timezone conversion and relative time preview#40420

Merged
ggazzo merged 8 commits into
developfrom
chore/add-field-hint--to-timezone-picker
May 15, 2026
Merged

fix: incorrect timestamp timezone conversion and relative time preview#40420
ggazzo merged 8 commits into
developfrom
chore/add-field-hint--to-timezone-picker

Conversation

@abhinavkrin

@abhinavkrin abhinavkrin commented May 6, 2026

Copy link
Copy Markdown
Member

Proposed changes (including videos or screenshots)

Fixes two bugs in the Insert Timestamp feature:

  1. Timezone conversion reverseddateToISOString() copied local clock fields and appended the target timezone suffix without adjusting the hours. Fixed by computing the correct wall-clock time using UTC accessors on an offset-adjusted Date.

  2. Relative time preview stale + locale revert — The RelativeTime component only recomputed text on interval ticks (up to 1 hour delay), and the interval callback hardcoded locale: 'en'. Fixed by adding a useEffect for immediate updates and using the context locale in the interval.

Also includes UX improvements: reordered modal fields (Preview first), updated timezone terminology, and added a hint to the timezone picker :-
Screenshot 2026-05-07 at 12 21 58 AM


Screenshot 2026-05-07 at 12 28 00 AM

Based on:
image

Issue(s)

Steps to test or reproduce

Further comments

SUP-1024

Summary by CodeRabbit

  • New Features

    • Time zone picker now shows a description and hint to guide selection.
  • Improvements

    • Timestamp modal UI reordered to show the preview before controls.
    • Relative-time preview now reliably updates and preserves locale during refreshes.
  • Display/Formatting

    • English copy updated ("Timezone" → "Time zone") and timestamp format labels/samples refined.
  • Tests

    • Added tests verifying relative-time updates and locale preservation.
  • Chores

    • Patch version changeset added.

Review Change Stack

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
@abhinavkrin abhinavkrin requested a review from a team as a code owner May 6, 2026 16:48
@dionisio-bot

dionisio-bot Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

@changeset-bot

changeset-bot Bot commented May 6, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 22e248e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 43 packages
Name Type
@rocket.chat/gazzodown Patch
@rocket.chat/i18n Patch
@rocket.chat/meteor Patch
@rocket.chat/fuselage-ui-kit Patch
@rocket.chat/livechat Patch
@rocket.chat/mock-providers Patch
@rocket.chat/ui-contexts Patch
@rocket.chat/web-ui-registration Patch
@rocket.chat/omnichannel-transcript Patch
@rocket.chat/omnichannel-services Patch
@rocket.chat/uikit-playground Patch
@rocket.chat/ui-voip Patch
@rocket.chat/ui-client Patch
@rocket.chat/ui-avatar Patch
@rocket.chat/ui-video-conf Patch
@rocket.chat/queue-worker Patch
@rocket.chat/ui-composer Patch
@rocket.chat/core-typings Patch
@rocket.chat/rest-typings Patch
@rocket.chat/api-client Patch
@rocket.chat/apps Patch
@rocket.chat/core-services Patch
@rocket.chat/cron Patch
@rocket.chat/ddp-client Patch
@rocket.chat/http-router Patch
@rocket.chat/model-typings Patch
@rocket.chat/models Patch
@rocket.chat/account-service Patch
@rocket.chat/authorization-service Patch
@rocket.chat/ddp-streamer Patch
@rocket.chat/presence-service Patch
@rocket.chat/abac Patch
@rocket.chat/federation-matrix Patch
@rocket.chat/license Patch
@rocket.chat/media-calls Patch
@rocket.chat/pdf-worker Patch
@rocket.chat/presence Patch
rocketchat-services Patch
@rocket.chat/network-broker Patch
@rocket.chat/omni-core-ee Patch
@rocket.chat/instance-status Patch
@rocket.chat/omni-core Patch
@rocket.chat/server-fetch Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

Added description and hint to the Time zone picker, reordered controls in the Timestamp picker modal so Preview appears first, adjusted two full date-time format strings, updated RelativeTime to respect locale during refreshes and added tests, and updated English locale entries for timestamp labels and descriptions. No public API signature changes.

Changes

Timestamp UI, Localization, and Formatting

Layer / File(s) Summary
Localization
packages/i18n/src/locales/en.i18n.json
Renamed Timezone → "Time zone"; added Timezone_picker_description ("Select the time zone for the entered time.") and Timezone_picker_hint ("Others see timestamps converted to their own time zone."); added/updated several timestamps.* keys and descriptive strings (short/long time/date and full date-time descriptions).
Format Mapping
apps/meteor/client/lib/utils/timestamp/formats.ts
Updated TIMESTAMP_FORMATS entries: 'f' format changed to 'PPPP p', 'F' changed to 'PPPP pp'.
Rendering / Formatter
packages/gazzodown/src/elements/Timestamp/index.tsx
Adjusted FullDate and FullDateLong date-fns format strings from PPPppp/PPPPpppp to PPPP p/PPPP pp; RelativeTime now derives locale from context and recalculates display and refresh interval using time and locale.
Tests / Validation
packages/gazzodown/src/elements/Timestamp/RelativeTime.spec.tsx
Adds tests (fake timers) to verify immediate updates on timestamp changes, locale preservation across refresh ticks, and immediate updates when context locale changes.
UI Component — Field copy & hint
apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
Imported FieldDescription and FieldHint from fuselage; rendered FieldDescription with Timezone_picker_description inside the Field and FieldHint with Timezone_picker_hint after the FieldRow.
UI Component — Control order
apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal.tsx
Reordered modal body to render Preview first, then DatePicker, TimePicker, FormatSelector, and TimezoneSelector (Preview was previously last).
Changeset
.changeset/ninety-lilies-kick.md
Adds patch changeset for @rocket.chat/gazzodown, @rocket.chat/i18n, and @rocket.chat/meteor documenting the relative-time preview and locale-fix.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

type: bug

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately and specifically describes the main changes: fixing incorrect timestamp timezone conversion and relative time preview issues.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • SUP-1024: Request failed with status code 401

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov

codecov Bot commented May 6, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 69.59%. Comparing base (2d32e52) to head (22e248e).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #40420      +/-   ##
===========================================
- Coverage    69.64%   69.59%   -0.06%     
===========================================
  Files         3327     3325       -2     
  Lines       122770   122710      -60     
  Branches     21902    21937      +35     
===========================================
- Hits         85509    85396     -113     
- Misses       33920    33992      +72     
+ Partials      3341     3322      -19     
Flag Coverage Δ
unit 70.35% <100.00%> (+0.02%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
@abhinavkrin abhinavkrin added this to the 8.5.0 milestone May 6, 2026
Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/meteor/client/lib/utils/timestamp/formats.ts`:
- Around line 24-28: The 'f' format object (label 'timestamps.fullDateTime')
currently uses 'PPPP p' which drops seconds; update the 'f' entry in formats.ts
to either include seconds by changing format to 'PPPP pp' (to match the
long-time variant used by 'F') or else adjust the label/description to indicate
it's a short-time full-datetime (no seconds); modify the object with key 'f'
accordingly so the format and label/description are consistent.

In `@packages/i18n/src/locales/en.i18n.json`:
- Around line 5372-5373: Update the copy for the localization keys
Timezone_picker_description and Timezone_picker_hint to improve grammar and
terminology consistency: change Timezone_picker_description to "Select the time
zone for the entered time." and change Timezone_picker_hint to "Others see
timestamps converted to their own time zone." Ensure both keys use the two-word
"time zone" consistently and include the final punctuation as shown.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 65e5d7a3-ecc6-40ae-9691-a168a3a4692a

📥 Commits

Reviewing files that changed from the base of the PR and between 99b22b1 and 38d85ba.

⛔ Files ignored due to path filters (1)
  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/__snapshots__/TimestampPicker.spec.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (5)
  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal.tsx
  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
  • apps/meteor/client/lib/utils/timestamp/formats.ts
  • packages/gazzodown/src/elements/Timestamp/index.tsx
  • packages/i18n/src/locales/en.i18n.json
📜 Review details
⏰ 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: 📦 Build Packages
  • GitHub Check: CodeQL-Build
  • GitHub Check: CodeQL-Build
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal.tsx
  • apps/meteor/client/lib/utils/timestamp/formats.ts
  • packages/gazzodown/src/elements/Timestamp/index.tsx
  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
🧠 Learnings (5)
📚 Learning: 2026-03-27T14:52:56.865Z
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal.tsx
  • packages/gazzodown/src/elements/Timestamp/index.tsx
  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
📚 Learning: 2026-05-06T12:21:44.083Z
Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.

Applied to files:

  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal.tsx
  • apps/meteor/client/lib/utils/timestamp/formats.ts
  • packages/gazzodown/src/elements/Timestamp/index.tsx
  • apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
📚 Learning: 2026-02-10T16:32:42.586Z
Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38528
File: apps/meteor/client/startup/roles.ts:14-14
Timestamp: 2026-02-10T16:32:42.586Z
Learning: In Rocket.Chat's Meteor client code, DDP streams use EJSON and Date fields arrive as Date objects; do not manually construct new Date() in stream handlers (for example, in sdk.stream()). Only REST API responses return plain JSON where dates are strings, so implement explicit conversion there if needed. Apply this guidance to all TypeScript files under apps/meteor/client to ensure consistent date handling in DDP streams and REST responses.

Applied to files:

  • apps/meteor/client/lib/utils/timestamp/formats.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In the Rocket.Chat repository, do not reference Biome lint rules in code review feedback. Biome is not used even if biome.json exists; only reference Biome rules if there is explicit, project-wide usage documented. For TypeScript files, review lint implications without Biome guidance unless the project enables Biome rules.

Applied to files:

  • apps/meteor/client/lib/utils/timestamp/formats.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In this repository (RocketChat/Rocket.Chat), Biome lint rules are not used even if a biome.json exists. When reviewing TypeScript files (e.g., packages/ui-voip/src/providers/useMediaSession.ts), ensure lint suggestions do not reference Biome-specific rules. Rely on general ESLint/TypeScript lint rules and project conventions instead.

Applied to files:

  • apps/meteor/client/lib/utils/timestamp/formats.ts
🔇 Additional comments (6)
packages/i18n/src/locales/en.i18n.json (2)

7199-7202: LGTM for timestamp option naming updates.

These labels are clearer and map well to the format choices shown in the picker.


7207-7207: Looks good.

The updated example string is suitable for the revised timestamp format option.

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx (2)

29-33: FieldDescription before FieldRow, FieldHint after — placement is correct.

The ordering matches the standard fuselage Field composition pattern (FieldLabel → FieldDescription → FieldRow → FieldHint). LGTM assuming FieldDescription is confirmed available (see import comment above).


1-1: ⚡ Quick win

Remove this verification request. FieldDescription is already being imported and successfully used in multiple files across the codebase (FormSkeleton.tsx, PeerAutocomplete.tsx, ReportUserModal.tsx, NotificationToggle.tsx, and others), confirming it is properly exported from @rocket.chat/fuselage. TypeScript compilation and component rendering would fail if the export were missing, making this concern unfounded.

			> Likely an incorrect or invalid review comment.
apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal.tsx (1)

67-67: Preview moved to the top of the form — LGTM.

The reorder is clean and the rest of the form logic is untouched. This matches the PR intent.

packages/gazzodown/src/elements/Timestamp/index.tsx (1)

57-60: ⚡ Quick win

Verify that FormatSelector example strings and documentation reflect removal of timezone information from 'f' and 'F' style timestamps.

The switch from previous timezone-aware time formats to p (short time) and pp (shorter time) means rendered <Tag> elements in chat will no longer display UTC-offset or timezone context. Confirm that example labels in FormatSelector and any user-facing documentation have been updated to show the new format output (e.g., no timezone suffix like "GMT+5:30"), and that this breaking change in rendered output has been communicated to stakeholders.

Comment thread apps/meteor/client/lib/utils/timestamp/formats.ts
Comment thread packages/i18n/src/locales/en.i18n.json Outdated
@abhinavkrin abhinavkrin changed the title chore: add field hint to timezone in timestamp picker chore: chore: rearrange timestamp picker fields and improve terminology May 6, 2026
@abhinavkrin abhinavkrin changed the title chore: chore: rearrange timestamp picker fields and improve terminology chore: rearrange timestamp picker fields and improve terminology May 6, 2026
Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
@abhinavkrin abhinavkrin force-pushed the chore/add-field-hint--to-timezone-picker branch from 2b577ce to 063f320 Compare May 6, 2026 19:20
@ggazzo ggazzo self-assigned this May 7, 2026
Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
@abhinavkrin abhinavkrin changed the title chore: rearrange timestamp picker fields and improve terminology fix: incorrect timestamp timezone conversion and relative time preview May 11, 2026
Comment thread packages/gazzodown/src/elements/Timestamp/index.tsx
Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
@MartinSchoeler MartinSchoeler added the stat: QA assured Means it has been tested and approved by a company insider label May 14, 2026
@dionisio-bot dionisio-bot Bot added the stat: ready to merge PR tested and approved waiting for merge label May 14, 2026
@alfredodelfabro alfredodelfabro removed the stat: ready to merge PR tested and approved waiting for merge label May 14, 2026
@alfredodelfabro alfredodelfabro added stat: QA assured Means it has been tested and approved by a company insider and removed stat: QA assured Means it has been tested and approved by a company insider labels May 14, 2026
@dionisio-bot dionisio-bot Bot added the stat: ready to merge PR tested and approved waiting for merge label May 14, 2026
@dionisio-bot dionisio-bot Bot added this pull request to the merge queue May 14, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks May 14, 2026
@abhinavkrin abhinavkrin removed the stat: QA assured Means it has been tested and approved by a company insider label May 14, 2026
@dionisio-bot dionisio-bot Bot removed the stat: ready to merge PR tested and approved waiting for merge label May 14, 2026
@abhinavkrin abhinavkrin added stat: ready to merge PR tested and approved waiting for merge stat: QA assured Means it has been tested and approved by a company insider labels May 14, 2026
@dionisio-bot dionisio-bot Bot added this pull request to the merge queue May 14, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks May 14, 2026
@ggazzo ggazzo removed their assignment May 14, 2026
@ggazzo ggazzo merged commit d427b80 into develop May 15, 2026
45 of 47 checks passed
@ggazzo ggazzo deleted the chore/add-field-hint--to-timezone-picker branch May 15, 2026 00:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

stat: QA assured Means it has been tested and approved by a company insider stat: ready to merge PR tested and approved waiting for merge type: bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants