feat(js): Add TimezoneProvider

Author: evanpurkhiser

static/app/components/dateTime.spec.tsx

@@ -1,26 +1,21 @@
-import {ConfigFixture} from 'sentry-fixture/config';
 import {UserFixture} from 'sentry-fixture/user';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import {DateTime} from 'sentry/components/dateTime';
 import ConfigStore from 'sentry/stores/configStore';
 
-describe('DateTime', () => {
-  const user = UserFixture({
-    options: {
-      ...UserFixture().options,
-      clock24Hours: false,
-      timezone: 'America/Los_Angeles',
-    },
-  });
+import {DateTime} from './dateTime';
+import {TimezoneProvider} from './timezoneProvider';
 
-  beforeAll(() => {
-    ConfigStore.loadInitialData(ConfigFixture({user}));
-  });
+describe('DateTime', () => {
+  function renderPDT(child: React.ReactElement) {
+    return render(
+      <TimezoneProvider timezone="America/Los_Angeles">{child}</TimezoneProvider>
+    );
+  }
 
   it('renders a date', () => {
-    render(<DateTime date={new Date()} />);
+    renderPDT(<DateTime date={new Date()} />);
     expect(screen.getByText('Oct 16, 7:41 PM')).toBeInTheDocument();
   });
 
@@ -30,73 +25,75 @@ describe('DateTime', () => {
     date.setMonth(11);
     date.setDate(31);
 
-    render(<DateTime date={date} />);
+    renderPDT(<DateTime date={date} />);
     expect(screen.getByText('Dec 31, 2016 7:41 PM')).toBeInTheDocument();
   });
 
   it('renders only the time', () => {
-    render(<DateTime date={new Date()} timeOnly />);
+    renderPDT(<DateTime date={new Date()} timeOnly />);
     expect(screen.getByText('7:41 PM')).toBeInTheDocument();
   });
 
   it('renders only the date', () => {
-    render(<DateTime date={new Date()} dateOnly />);
+    renderPDT(<DateTime date={new Date()} dateOnly />);
     expect(screen.getByText('Oct 16')).toBeInTheDocument();
   });
 
   it('renders a date with year', () => {
-    render(<DateTime date={new Date()} year />);
+    renderPDT(<DateTime date={new Date()} year />);
     expect(screen.getByText('Oct 16, 2017 7:41 PM')).toBeInTheDocument();
   });
 
   it('renders a date with seconds', () => {
-    render(<DateTime date={new Date()} seconds />);
+    renderPDT(<DateTime date={new Date()} seconds />);
     expect(screen.getByText('Oct 16, 7:41:20 PM')).toBeInTheDocument();
   });
 
   it('renders a date with the time zone', () => {
-    render(<DateTime date={new Date()} timeZone />);
+    renderPDT(<DateTime date={new Date()} timeZone />);
     expect(screen.getByText('Oct 16, 7:41 PM PDT')).toBeInTheDocument();
   });
 
   it('renders date with forced utc', () => {
-    render(<DateTime date={new Date()} utc />);
+    renderPDT(<DateTime date={new Date()} utc />);
     expect(screen.getByText('Oct 17, 2:41 AM UTC')).toBeInTheDocument();
   });
 
   it('renders date with forced timezone', () => {
-    render(<DateTime date={new Date()} forcedTimezone="America/Toronto" />);
+    renderPDT(<DateTime date={new Date()} forcedTimezone="America/Toronto" />);
     expect(screen.getByText('Oct 16, 10:41 PM')).toBeInTheDocument();
   });
 
   describe('24 Hours', () => {
     beforeAll(() => {
+      const user = UserFixture();
       user.options.clock24Hours = true;
       ConfigStore.set('user', user);
     });
 
     afterAll(() => {
+      const user = UserFixture();
       user.options.clock24Hours = false;
       ConfigStore.set('user', user);
     });
 
     it('renders a date', () => {
-      render(<DateTime date={new Date()} />);
+      renderPDT(<DateTime date={new Date()} />);
       expect(screen.getByText('Oct 16, 19:41')).toBeInTheDocument();
     });
 
     it('renders only the time', () => {
-      render(<DateTime date={new Date()} timeOnly />);
+      renderPDT(<DateTime date={new Date()} timeOnly />);
       expect(screen.getByText('19:41')).toBeInTheDocument();
     });
 
     it('renders date with forced utc', () => {
-      render(<DateTime date={new Date()} utc />);
+      renderPDT(<DateTime date={new Date()} utc />);
       expect(screen.getByText('Oct 17, 02:41 UTC')).toBeInTheDocument();
     });
 
     it('renders date with forced timezone', () => {
-      render(<DateTime date={new Date()} forcedTimezone="America/Toronto" />);
+      renderPDT(<DateTime date={new Date()} forcedTimezone="America/Toronto" />);
       expect(screen.getByText('Oct 16, 22:41')).toBeInTheDocument();
     });
   });

static/app/components/dateTime.tsx

@@ -1,5 +1,6 @@
 import moment from 'moment-timezone';
 
+import {useTimezone} from 'sentry/components/timezoneProvider';
 import {getFormat} from 'sentry/utils/dates';
 import {useUser} from 'sentry/utils/useUser';
 
@@ -60,7 +61,9 @@ export function DateTime({
   ...props
 }: DateTimeProps) {
   const user = useUser();
-  const options = user?.options;
+  const currentTimezone = useTimezone();
+
+  const tz = forcedTimezone ?? currentTimezone;
 
   const formatString =
     format ??
@@ -69,19 +72,19 @@ export function DateTime({
       timeOnly,
       // If the year prop is defined, then use it. Otherwise only show the year if `date`
       // is in the current year.
-      year: year ?? moment().year() !== moment(date).year(),
+      year: year ?? moment.tz(tz).year() !== moment.tz(date, tz).year(),
       // If timeZone is defined, use it. Otherwise only show the time zone if we're using
       // UTC time.
       timeZone: timeZone ?? utc,
       seconds,
-      ...options,
+      clock24Hours: user?.options.clock24Hours,
     });
 
   return (
     <time {...props}>
       {utc
         ? moment.utc(date).format(formatString)
-        : moment.tz(date, forcedTimezone ?? options?.timezone ?? '').format(formatString)}
+        : moment.tz(date, tz).format(formatString)}
     </time>
   );
 }

static/app/components/timezoneProvider.spec.tsx

@@ -0,0 +1,95 @@
+import {Fragment} from 'react';
+import {UserFixture} from 'sentry-fixture/user';
+
+import {act, render, screen} from 'sentry-test/reactTestingLibrary';
+
+import ConfigStore from 'sentry/stores/configStore';
+
+import {
+  OverrideTimezoneProvider,
+  UserTimezoneProvider,
+  useTimezone,
+  useTimezoneOverride,
+} from './timezoneProvider';
+
+describe('timezoneProvider', function () {
+  function setConfigStoreTimezone(tz: string) {
+    const user = UserFixture();
+    user.options.timezone = tz;
+    act(() => ConfigStore.set('user', user));
+  }
+
+  function ShowTimezone(props: React.ComponentProps<'div'>) {
+    const timezone = useTimezone();
+    return <div {...props}>{timezone}</div>;
+  }
+
+  function ChangeUserTimezone({tz}: {tz: string}) {
+    return <button onClick={() => setConfigStoreTimezone(tz)}>Change Timezone</button>;
+  }
+
+  function OverrideTimezone({tz}: {tz: string}) {
+    const {setOverride, clearOverride} = useTimezoneOverride();
+
+    return (
+      <Fragment>
+        <button onClick={() => setOverride(tz)}>Override Timezone</button>
+        <button onClick={() => clearOverride()}>Reset Timezone</button>
+      </Fragment>
+    );
+  }
+
+  beforeEach(() => setConfigStoreTimezone('America/New_York'));
+
+  describe('UserTimezoneProvider', function () {
+    it('provides timezone for the user', function () {
+      render(
+        <UserTimezoneProvider>
+          <ShowTimezone data-test-id="tz" />
+        </UserTimezoneProvider>
+      );
+
+      expect(screen.getByTestId('tz')).toHaveTextContent('America/New_York');
+    });
+
+    it('updates when the user timezone changes', function () {
+      render(
+        <UserTimezoneProvider>
+          <ShowTimezone data-test-id="tz" />
+          <ChangeUserTimezone tz="America/Los_Angeles" />
+        </UserTimezoneProvider>
+      );
+
+      expect(screen.getByTestId('tz')).toHaveTextContent('America/New_York');
+
+      screen.getByRole('button', {name: 'Change Timezone'}).click();
+      expect(screen.getByTestId('tz')).toHaveTextContent('America/Los_Angeles');
+    });
+  });
+
+  describe('OverrideTimezoneProvider', function () {
+    it('can override timezones', function () {
+      render(
+        <UserTimezoneProvider>
+          <ShowTimezone data-test-id="tz-outer" />
+          <OverrideTimezoneProvider>
+            <ShowTimezone data-test-id="tz-inner" />
+            <OverrideTimezone tz="America/Los_Angeles" />
+          </OverrideTimezoneProvider>
+        </UserTimezoneProvider>
+      );
+
+      expect(screen.getByTestId('tz-outer')).toHaveTextContent('America/New_York');
+
+      // Act because useOverrideTimezone is an effect
+      act(() => screen.getByRole('button', {name: 'Override Timezone'}).click());
+      expect(screen.getByTestId('tz-outer')).toHaveTextContent('America/New_York');
+      expect(screen.getByTestId('tz-inner')).toHaveTextContent('America/Los_Angeles');
+
+      // Act because useOverrideTimezone is an effect
+      act(() => screen.getByRole('button', {name: 'Reset Timezone'}).click());
+      expect(screen.getByTestId('tz-outer')).toHaveTextContent('America/New_York');
+      expect(screen.getByTestId('tz-inner')).toHaveTextContent('America/New_York');
+    });
+  });
+});

static/app/components/timezoneProvider.tsx

@@ -0,0 +1,90 @@
+import {createContext, useContext, useEffect, useMemo, useState} from 'react';
+
+import {useUser} from 'sentry/utils/useUser';
+
+interface TimezoneProviderValue {
+  timezone: string;
+  setOverride?: (timezone: string | null) => void;
+}
+
+interface CommonProps {
+  children: NonNullable<React.ReactNode>;
+}
+
+const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+const Provider = createContext<TimezoneProviderValue>({timezone: browserTimezone});
+
+interface TimezoneProviderProps {
+  children: NonNullable<React.ReactNode>;
+  timezone: string;
+}
+
+/**
+ * Provide the specified timezone to components that useTimezone.
+ *
+ * See OverrideTimezoneProvider for a implementation of the timezone provider
+ * that allows for overriding the timezone using hooks.
+ */
+export function TimezoneProvider({children, timezone}: TimezoneProviderProps) {
+  const value = useMemo(() => ({timezone}), [timezone]);
+
+  return <Provider value={value}>{children}</Provider>;
+}
+
+/**
+ * Provides the user's configured timezone to components that use useTimezone.
+ */
+export function UserTimezoneProvider({children}: CommonProps) {
+  const user = useUser();
+  const timezone = user?.options.timezone ?? browserTimezone;
+
+  return <TimezoneProvider timezone={timezone}>{children}</TimezoneProvider>;
+}
+
+/**
+ * Allows components that use useTimezone (such as <DateTime />) that are
+ * within this provider to be overridden using the useTimezoneOverride hook.
+ */
+export function OverrideTimezoneProvider({children}: CommonProps) {
+  const parentTimezone = useTimezone();
+  const [override, setOverride] = useState<string | null>(null);
+
+  const timezone = override ?? parentTimezone;
+  const value = useMemo(() => ({timezone, setOverride}), [timezone]);
+
+  return <Provider value={value}>{children}</Provider>;
+}
+
+/**
+ * Get the currently configured timezone.
+ */
+export function useTimezone() {
+  return useContext(Provider).timezone;
+}
+
+/**
+ * This hook may be used to override the result of useTimezone in the nearest
+ * OverrideTimezoneProvider. The result is a pair of {setOverride,
+ * clearOverride} functions.
+ *
+ * It is the callers responsibility to call clearOverride to restore the
+ * timezone in the OverrideTimezoneProvider.
+ */
+export function useTimezoneOverride() {
+  const {setOverride} = useContext(Provider);
+
+  if (setOverride === undefined) {
+    throw new Error('useTimezoneOverride requires a OverrideTimezoneProvider');
+  }
+
+  const result = useMemo(
+    () => ({
+      setOverride: (timezone: string) => setOverride(timezone),
+      clearOverride: () => setOverride(null),
+    }),
+    [setOverride]
+  );
+
+  return result;
+}

static/app/utils/profiling/hooks/useRelativeDateTime.tsx

@@ -1,7 +1,7 @@
 import {useMemo} from 'react';
 
+import {useTimezone} from 'sentry/components/timezoneProvider';
 import type {PageFilters} from 'sentry/types/core';
-import {getUserTimezone} from 'sentry/utils/dates';
 
 const DAY = 24 * 60 * 60 * 1000;
 
@@ -16,6 +16,8 @@ export function useRelativeDateTime({
   relativeDays,
   retentionDays,
 }: UseRelativeDateTimeOptions): PageFilters['datetime'] {
+  const timezone = useTimezone();
+
   const anchorTime = anchor * 1000;
 
   // Make sure to memo this. Otherwise, each re-render will have
@@ -34,7 +36,7 @@ export function useRelativeDateTime({
   return {
     start: beforeDateTime,
     end: afterDateTime,
-    utc: getUserTimezone() === 'UTC',
+    utc: timezone.includes('UTC'),
     period: null,
   };
 }