feat(js): Add TimezoneProvider

This implements a new top-level provider that provides the timezone to
components like <DateTime />. This provider exposes two hooks

 - `useTimezone` - Get the currently set timezone by the user

 - `useOverrideTimezone` - Overrides the configured timezone to a
   different timezone. The effect will only persist while the component
   that rendered the hook is mounted. Only affects the closest
   TimezoneProvider.

   This can be useful in scenarios where it may be useful to provide
   the user the option to change the timezone of a specific part of a
   view. For example, when looking at a Cron Monitor the user may want
   to view the times of check-ins in their timezone, the monitors
   timezone, or the UTC timezone.

Author: evanpurkhiser

static/app/components/dateTime.spec.tsx

@@ -1,102 +1,99 @@
-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();
   });
 
-  it('renders a date and shows the year if it is outside the current year', () => {
+  it.only('renders a date and shows the year if it is outside the current year', () => {
     const date = new Date();
     date.setFullYear(2016);
     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/timeRangeSelector/index.spec.tsx

@@ -5,6 +5,7 @@ import {initializeOrg} from 'sentry-test/initializeOrg';
 import {fireEvent, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {TimeRangeSelector} from 'sentry/components/timeRangeSelector';
+import {TimezoneProvider} from 'sentry/components/timezoneProvider';
 import ConfigStore from 'sentry/stores/configStore';
 
 const {organization} = initializeOrg({
@@ -27,7 +28,11 @@ describe('TimeRangeSelector', function () {
   const onChange = jest.fn();
 
   function getComponent(props = {}) {
-    return <TimeRangeSelector showAbsolute showRelative onChange={onChange} {...props} />;
+    return (
+      <TimezoneProvider timezone="America/Los_Angeles">
+        <TimeRangeSelector showAbsolute showRelative onChange={onChange} {...props} />
+      </TimezoneProvider>
+    );
   }
 
   function renderComponent(props = {}) {

static/app/components/timeRangeSelector/index.tsx

@@ -8,6 +8,7 @@ import type {Item} from 'sentry/components/dropdownAutoComplete/types';
 import DropdownButton from 'sentry/components/dropdownButton';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {DesyncedFilterIndicator} from 'sentry/components/organizations/pageFilters/desyncedFilter';
+import {useTimezone} from 'sentry/components/timezoneProvider';
 import {DEFAULT_RELATIVE_PERIODS, DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -19,7 +20,6 @@ import {
   getInternalDate,
   getLocalToSystem,
   getPeriodAgo,
-  getUserTimezone,
   getUtcToSystem,
 } from 'sentry/utils/dates';
 import {parsePeriodToHours} from 'sentry/utils/duration/parsePeriodToHours';
@@ -169,14 +169,15 @@ export function TimeRangeSelector({
 }: TimeRangeSelectorProps) {
   const router = useRouter();
   const organization = useOrganization({allowNull: true});
+  const timezone = useTimezone();
 
   const [search, setSearch] = useState('');
   const [hasChanges, setHasChanges] = useState(false);
   const [hasDateRangeErrors, setHasDateRangeErrors] = useState(false);
   const [showAbsoluteSelector, setShowAbsoluteSelector] = useState(!showRelative);
 
   const [internalValue, setInternalValue] = useState<ChangeData>(() => {
-    const internalUtc = utc ?? getUserTimezone() === 'UTC';
+    const internalUtc = utc ?? timezone.includes('UTC');
 
     return {
       start: start ? getInternalDate(start, internalUtc) : undefined,

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');
+    });
+  });
+});