feat: feature metrics table timezone (#5880)

frontend/src/component/common/Table/cells/DateTimeCell/DateTimeCell.tsx

@@ -6,15 +6,20 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 
 interface IDateTimeCellProps {
     value?: Date | string | null;
+    timeZone?: string;
 }
 
-export const DateTimeCell: VFC<IDateTimeCellProps> = ({ value }) => {
+export const DateTimeCell: VFC<IDateTimeCellProps> = ({ value, timeZone }) => {
     const { locationSettings } = useLocationSettings();
 
     const date = value
         ? value instanceof Date
-            ? formatDateYMDHM(value, locationSettings.locale)
+            ? formatDateYMDHM(value, locationSettings.locale, timeZone)
-            : formatDateYMDHM(parseISO(value), locationSettings.locale)
+            : formatDateYMDHM(
+                  parseISO(value),
+                  locationSettings.locale,
+                  timeZone,
+              )
         : undefined;
 
     return <TextCell lineClamp={1}>{date}</TextCell>;

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.test.tsx

@@ -0,0 +1,57 @@
+import { render } from 'utils/testRenderer';
+import { FeatureMetricsTable } from './FeatureMetricsTable';
+import { screen } from '@testing-library/react';
+import { formatDateYMDHM } from '../../../../../utils/formatDate';
+
+test('render local time for hourly results', async () => {
+    render(
+        <FeatureMetricsTable
+            metrics={[
+                {
+                    featureName: 'irrelevant',
+                    appName: 'my-application',
+                    environment: 'development',
+                    yes: 20,
+                    no: 10,
+                    timestamp: '2024-01-12T12:00:00.000Z',
+                },
+            ]}
+        />,
+    );
+    const localDate = formatDateYMDHM('2024-01-12T12:00:00.000Z', 'en-US');
+
+    expect(screen.getByText('my-application')).toBeInTheDocument();
+    expect(screen.getByText('development')).toBeInTheDocument();
+    expect(screen.getByText('30')).toBeInTheDocument();
+    expect(screen.getByText('20')).toBeInTheDocument();
+    expect(screen.getByText(localDate)).toBeInTheDocument();
+});
+
+test('render UTC for daily results', async () => {
+    render(
+        <FeatureMetricsTable
+            metrics={[
+                {
+                    featureName: 'irrelevant',
+                    appName: 'my-application',
+                    environment: 'development',
+                    yes: 20,
+                    no: 10,
+                    timestamp: '2024-01-12T23:59:59.999Z',
+                },
+            ]}
+        />,
+    );
+    // 23:59 is hour UTC heuristic
+    const localDate = formatDateYMDHM(
+        '2024-01-12T23:59:59.999Z',
+        'en-US',
+        'UTC',
+    );
+
+    expect(screen.getByText('my-application')).toBeInTheDocument();
+    expect(screen.getByText('development')).toBeInTheDocument();
+    expect(screen.getByText('30')).toBeInTheDocument();
+    expect(screen.getByText('20')).toBeInTheDocument();
+    expect(screen.getByText(localDate)).toBeInTheDocument();
+});

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx

@@ -90,7 +90,14 @@ const COLUMNS = [
         Header: 'Time',
         accessor: 'timestamp',
         Cell: (props: any) => (
-            <DateTimeCell value={props.row.original.timestamp} />
+            <DateTimeCell
+                value={props.row.original.timestamp}
+                timeZone={
+                    props.row.original.timestamp.includes('23:59')
+                        ? 'UTC'
+                        : undefined
+                }
+            />
         ),
     },
     {