TimeRangePicker: Show local browser time info on hover (#105643)

* TimeRangePicker add timezone description when hover

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx

@@ -5,7 +5,7 @@ import { dateTime, makeTimeRange, TimeRange } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 
 import { TimeRangeProvider } from './TimeRangeContext';
-import { TimeRangePicker } from './TimeRangePicker';
+import { TimePickerTooltip, TimeRangePicker } from './TimeRangePicker';
 
 const selectors = e2eSelectors.components.TimePicker;
 
@@ -151,3 +151,55 @@ it('does not submit wrapping forms', async () => {
 
   expect(onSubmit).not.toHaveBeenCalled();
 });
+
+describe('TimePickerTooltip', () => {
+  beforeAll(() => {
+    const mockIntl = {
+      resolvedOptions: () => ({
+        timeZone: 'America/New_York',
+      }),
+    };
+
+    jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => mockIntl as Intl.DateTimeFormat);
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  const timeRange: TimeRange = {
+    from: dateTime('2024-01-01T00:00:00Z'),
+    to: dateTime('2024-01-02T00:00:00Z'),
+    raw: {
+      from: dateTime('2024-01-01T00:00:00Z'),
+      to: dateTime('2024-01-02T00:00:00Z'),
+    },
+  };
+
+  it('renders time range with UTC timezone', () => {
+    render(<TimePickerTooltip timeRange={timeRange} timeZone="utc" />);
+
+    expect(screen.getByText(/2024-01-01 00:00:00/)).toBeInTheDocument();
+    expect(screen.getByText('to')).toBeInTheDocument();
+    expect(screen.getByText(/2024-01-02 00:00:00/)).toBeInTheDocument();
+    expect(screen.getByText('UTC, GMT')).toBeInTheDocument();
+  });
+
+  it('renders time range without timezone if timezone is not passed in', () => {
+    render(<TimePickerTooltip timeRange={timeRange} />);
+    expect(screen.queryByText('United States, EDT')).not.toBeInTheDocument();
+  });
+
+  it('renders time range with browser timezone', () => {
+    render(<TimePickerTooltip timeRange={timeRange} timeZone="browser" />);
+
+    expect(screen.getByText('Local browser time')).toBeInTheDocument();
+    expect(screen.getByText('United States, EDT')).toBeInTheDocument(); // this was mocked at the beginning, in beforeAll block
+  });
+
+  it('renders time range with specific timezone', () => {
+    render(<TimePickerTooltip timeRange={timeRange} timeZone="Africa/Accra" />);
+
+    expect(screen.getByText('Ghana, GMT')).toBeInTheDocument();
+  });
+});

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -13,6 +13,7 @@ import {
   TimeRange,
   TimeZone,
   dateMath,
+  getTimeZoneInfo,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
@@ -25,6 +26,7 @@ import { ToolbarButton } from '../ToolbarButton';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 import { TimePickerContent } from './TimeRangePicker/TimePickerContent';
+import { TimeZoneDescription } from './TimeZonePicker/TimeZoneDescription';
 import { WeekStart } from './WeekStartPicker';
 import { quickOptions } from './options';
 import { useTimeSync } from './utils/useTimeSync';
@@ -238,16 +240,23 @@ const ZoomOutTooltip = () => (
 
 export const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {
   const styles = useStyles2(getLabelStyles);
+  const now = Date.now();
+
+  // Get timezone info only if timeZone is provided
+  const timeZoneInfo = timeZone ? getTimeZoneInfo(timeZone, now) : undefined;
 
   return (
     <>
-      {dateTimeFormat(timeRange.from, { timeZone })}
       <div className="text-center">
-        <Trans i18nKey="time-picker.range-picker.to">to</Trans>
+        {dateTimeFormat(timeRange.from, { timeZone })}
+        <div className="text-center">
+          <Trans i18nKey="time-picker.range-picker.to">to</Trans>
+        </div>
+        {dateTimeFormat(timeRange.to, { timeZone })}
       </div>
-      {dateTimeFormat(timeRange.to, { timeZone })}
-      <div className="text-center">
+      <div className={styles.container}>
         <span className={styles.utc}>{timeZoneFormatUserFriendly(timeZone)}</span>
+        <TimeZoneDescription info={timeZoneInfo} />
       </div>
     </>
   );
@@ -316,6 +325,7 @@ const getLabelStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       alignItems: 'center',
       whiteSpace: 'nowrap',
+      columnGap: theme.spacing(0.5),
     }),
     utc: css({
       color: theme.v1.palette.orange,