Fix: Timezone dropdown label now includes DST-aware GMT offsets

[niranjan-uma-shankar]

Description

This PR addresses #24559, where the timezone dropdown on the /settings/timezone page displayed static GMT offsets that did not account for Daylight Saving Time (DST).

What’s Changed

• The timezone dropdown now uses the timezoneDataWithGMTOffset() function, which dynamically prepends each label with the current, DST-adjusted GMT offset.
• The timezoneDataWithGMTOffset() implementation is introduced in TryGhost/SDK#584.
• Timezone entries are now sorted by current GMT offset, ensuring that the sort order remains in ascending order of GMT offset.

BEFORE

The dropdown displayed incorrect static offsets. For example, when GMT time was 03:55, Amsterdam (which was in GMT+2 due to DST) was shown as GMT+1:

Screen.Recording.2025-07-30.at.9.25.48.AM.mov

AFTER

The offsets now correctly reflect DST adjustments (e.g., Amsterdam is shown as GMT+2 when appropriate). Also, entries are sorted based on current offsets, placing GMT+0 entries like Azores alongside others in the same zone.

Screen.Recording.2025-07-30.at.9.42.47.AM.mov

🚨Note on Failing Tests

Unit tests are currently failing because this PR depends on changes in the @tryghost/timezone-data package introduced in TryGhost/SDK#584, which has not yet been published to npm.
Once the SDK changes are released and the package is updated, the tests in this PR should pass without further modifications.

In the meantime, you can verify that the tests pass locally by running in the Ghost repo (after linking the modified SDK package as described in the testing instructions below).

Testing Instructions

This PR depends on TryGhost/SDK#584, which must be built and linked locally:

1. Setup the SDK package:

git clone https://github.com/TryGhost/SDK.git
cd SDK
yarn
cd packages/timezone-data
yarn build
yarn link

2. Link the SDK package in Ghost:

cd path/to/ghost
yarn link "@tryghost/timezone-data"

3. Test the dropdown:

• Navigate to /settings/timezone.
• Open the timezone dropdown.
• Confirm that each option reflects the correct current GMT offset, including DST.
• Verify that the list is sorted by GMT offset.

4. Ensure tests pass locally

cd apps/admin-x-settings/test
PLAYWRIGHT_REPORTER=list yarn test:acceptance test/acceptance/general/timeZone.test.ts

cd ghost/admin/tests 
yarn test 1 --filter="config-manager"

[coderabbitai]

Walkthrough

This change updates the handling and display of timezone data across the application. The code now imports and utilizes a function, timezoneDataWithGMTOffset, instead of a static array, to generate timezone options, likely to provide more dynamic or accurate GMT offset information. Corresponding adjustments are made in both application logic and tests, including updating dropdown labels to omit static GMT offsets. Fixture data for timezones is also modified by removing GMT offset prefixes from all labels, retaining only the location names.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• Timezone dropdown shows static GMT offsets, not accounting for DST #24559: This PR addresses the issue of static GMT offsets in timezone dropdowns by switching to a function that likely provides dynamic offsets and updating labels accordingly.

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 963ed93 and 1b5bb19.

📒 Files selected for processing (4)

• apps/admin-x-settings/src/components/settings/general/TimeZone.tsx (2 hunks)
• apps/admin-x-settings/test/acceptance/general/timeZone.test.ts (1 hunks)
• ghost/admin/app/instance-initializers/config.js (1 hunks)
• ghost/admin/mirage/fixtures/timezones.js (1 hunks)

🧰 Additional context used

🪛 GitHub Actions: CI

apps/admin-x-settings/src/components/settings/general/TimeZone.tsx

[error] 7-7: TypeScript error TS2614: Module '@tryghost/timezone-data' has no exported member 'timezoneDataWithGMTOffset'. Did you mean to use 'import timezoneDataWithGMTOffset from "@tryghost/timezone-data"' instead?

apps/admin-x-settings/test/acceptance/general/timeZone.test.ts

[error] 18-18: Timed out waiting for 'timezone-select' to be visible in timezone section.

🔇 Additional comments (6)

ghost/admin/mirage/fixtures/timezones.js (1)

1-270: LGTM! Fixture data correctly updated for dynamic GMT offsets.

The removal of GMT offset prefixes from all timezone labels is consistent with the PR objective to make GMT offsets dynamic. The fixture data now contains clean location names that will be enhanced with real-time GMT offsets by the timezoneDataWithGMTOffset() function.

ghost/admin/app/instance-initializers/config.js (1)

9-9: Function call syntax is correct.

The updated getter correctly calls timezoneDataWithGMTOffset() as a function, which aligns with the expected dynamic behavior for GMT offset calculation.

apps/admin-x-settings/test/acceptance/general/timeZone.test.ts (3)

20-20: Test logic updated correctly for new label format.

The test correctly selects "Alaska" instead of the previous GMT-prefixed label, aligning with the updated timezone data structure.

---

25-25: Assertion updated to match new label format.

The assertion correctly expects "Alaska" without the GMT prefix, consistent with the fixture data changes.

---

18-18: Investigate test timeout - component may not be rendering.

The pipeline failure shows a timeout waiting for the timezone select component to be visible. This suggests the component isn't rendering properly, likely due to JavaScript errors from the missing timezoneDataWithGMTOffset export.

The test failure may be related to the missing package export. Once the TypeScript compilation issues are resolved, this test should pass.

apps/admin-x-settings/src/components/settings/general/TimeZone.tsx (1)

50-55: Component logic correctly implemented for dynamic timezone data.

The code properly calls timezoneDataWithGMTOffset() as a function and maps the results to the expected dropdown option format. The implementation will work correctly once the package dependency is resolved.