mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
## Problem The dashboard renders all timestamps in the browser's local timezone. When debugging app issues, users often want to see logs and timestamps in a different timezone (e.g. their app's deployment region) without changing their OS clock. ## Fix - New Timezone submenu in the user-avatar dropdown, sitting next to the existing Theme picker. Search-as-you-type combobox over the full IANA catalog plus an Auto detect option. - Selection persists in localStorage (`supabase-ui-timezone`) and survives `clearLocalStorage()`. No backend schema change. - New `lib/datetime.tsx` exposes pure timezone-aware formatters (`formatDateTime`, `formatDate`, `formatTime`, `formatFromNow`, `toTimezone`) plus a `TimezoneProvider` and matching React hooks (`useTimezone`, `useFormatDateTime`, ...). The pure functions take `tz` explicitly so they're easy to unit test (17 vitest cases covering DST transitions, multi-tz formatting, unix-micro/Date inputs, invalid-tz fallback). - The selected timezone propagates to every existing `<TimestampInfo>` in Studio via a new `TimestampInfoProvider` context exported from `ui-patterns`. No per-callsite changes needed for those ~20+ surfaces. - The `UnifiedLogs` date column migrates off `date-fns` to the new `useFormatDateTime` hook (the rest of the date-fns callers stay as-is, since they're either internal range math or non-display). - `ALL_TIMEZONES` (~600 entries) moves out of `PITR.constants.ts` into a shared `lib/constants/timezones.ts`. PITR keeps a re-export shim so its callers don't move. New `TIMEZONES_BY_IANA` dedupes the catalog by primary IANA name (the original list contains both PDT and PST rows for `America/Los_Angeles`, etc.) and `findTimezoneByIana` provides reverse lookup. - Telemetry: `timezone_picker_clicked` PostHog event with `previousTimezone`, `nextTimezone`, `isAutoDetected` properties. Notes for reviewers: - Bare `dayjs(x).format(...)` calls (~157 files) intentionally still render in browser-local time. Surfaces opt in by switching to the new wrappers, so this PR is the abstraction plus logs adoption; broader migration is a follow-up. - Two `// prettier-ignore` lines (`apps/studio/pages/_app.tsx`, `apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx`) work around a pre-existing local-tooling issue where `prettier-plugin-sql-cst` strips angle-bracket type arguments under certain conditions. Project's pinned prettier (3.8.1) does not strip; the issue surfaces with a globally-installed prettier. Worth tracking separately. - Hydration: `guessLocalTimezone()` and `useLocalStorageQuery` are client-only. Studio is mostly CSR via the Pages Router, but any SSR'd `<TimestampInfo>` may briefly render in the server's tz before client hydration. Existing behavior already had this mismatch with `.local()`; this PR does not regress it. - Backend timestamps round-tripped through query params and mutations stay UTC. The picker is display-only. ## How to test - Run `pnpm dev:studio`, sign in. - Open the user avatar dropdown (top right). Hover Timezone. - Search for "tokyo", pick `(UTC+09:00) Osaka, Sapporo, Tokyo`. - Open any project, navigate to Logs (e.g. `Project > Logs > Edge Functions`). Hover a log row's timestamp; the popover should show UTC, the chosen tz (`Asia/Tokyo`), and the relative time. Visible cell text should be in JST. - Visit any page that uses `<TimestampInfo>` (Database > Backups, Project Pause state, Edge Function details). Same tooltip should reflect Asia/Tokyo. - Refresh the page; timezone is still Asia/Tokyo. - Reopen the picker, choose Auto detect; timestamps revert to browser local. - Run `pnpm --filter studio test lib/datetime.test.ts`. 17 tests should pass. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Timezone selector added to the user menu with auto-detect and manual override * App-wide timezone provider and hooks plus a shared timezone catalog for consistent timezone-aware display * Timestamp components accept an optional timezone prop and respect user preference (persisted) * **Bug Fixes / Improvements** * Logs and timestamp displays now use the new timezone formatting hooks * **Tests** * Added comprehensive datetime and timezone catalog tests * **Telemetry** * Telemetry event added for timezone picker interactions <!-- end of auto-generated comment: release notes by coderabbit.ai -->
49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import { ALL_TIMEZONES, findTimezoneByIana, TIMEZONES_BY_IANA } from '@/lib/constants/timezones'
|
|
|
|
describe('TIMEZONES_BY_IANA', () => {
|
|
it('produces one row per primary IANA name', () => {
|
|
const ianas = TIMEZONES_BY_IANA.map((entry) => entry.utc[0])
|
|
expect(new Set(ianas).size).toBe(ianas.length)
|
|
})
|
|
|
|
it('prefers the standard-time row when multiple catalog rows share a primary IANA', () => {
|
|
// ALL_TIMEZONES has both PDT (isdst: true) and PST (isdst: false) pointing
|
|
// at America/Los_Angeles. The deduped view should pick the standard one
|
|
// so the picker label doesn't flip on DST changes.
|
|
const collisions = ALL_TIMEZONES.filter((entry) => entry.utc[0] === 'America/Los_Angeles')
|
|
expect(collisions.length).toBeGreaterThan(1)
|
|
|
|
const winner = TIMEZONES_BY_IANA.find((entry) => entry.utc[0] === 'America/Los_Angeles')
|
|
expect(winner).toBeDefined()
|
|
expect(winner!.isdst).toBe(false)
|
|
})
|
|
|
|
it('preserves entries that have no collision', () => {
|
|
// Most rows have a unique primary IANA. The UTC catalog row's primary is
|
|
// 'America/Danmarkshavn' and survives the dedupe pass unchanged.
|
|
const utcRow = TIMEZONES_BY_IANA.find((entry) => entry.value === 'UTC')
|
|
expect(utcRow?.text).toContain('Coordinated Universal Time')
|
|
expect(utcRow?.utc[0]).toBe('America/Danmarkshavn')
|
|
})
|
|
})
|
|
|
|
describe('findTimezoneByIana', () => {
|
|
it('matches the entry by its primary IANA name', () => {
|
|
const entry = findTimezoneByIana('America/Danmarkshavn')
|
|
expect(entry?.text).toContain('Coordinated Universal Time')
|
|
})
|
|
|
|
it('matches the entry by any of its secondary IANA names', () => {
|
|
// 'Asia/Tokyo' is one of the IANA aliases on the JST row whose primary
|
|
// IANA is 'Asia/Dili'. Lookup must walk the full alias list.
|
|
const entry = findTimezoneByIana('Asia/Tokyo')
|
|
expect(entry?.utc).toContain('Asia/Tokyo')
|
|
})
|
|
|
|
it('returns undefined for an unknown IANA name', () => {
|
|
expect(findTimezoneByIana('Not/A/Real_Zone')).toBeUndefined()
|
|
})
|
|
})
|