diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.test.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.test.tsx index 798e7d2328..5adff70077 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.test.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.test.tsx @@ -37,3 +37,22 @@ test('Display extended daily metrics', async () => { expect(recordedHoursBack).toBe(7 * 24); }); }); + +test('Normalize invalid hours back to default value', async () => { + const invalidHoursBack = 100000; + let recordedHoursBack: number | null = null; + render( + { + recordedHoursBack = hoursBack; + }} + />, + ); + + await screen.findByText('Last 48 hours'); + + await waitFor(() => { + expect(recordedHoursBack).toBe(48); + }); +}); diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx index 60824f9ec9..56dc994385 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx @@ -4,6 +4,7 @@ import GeneralSelect, { } from 'component/common/GeneralSelect/GeneralSelect'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { useExtendedFeatureMetrics } from '../useExtendedFeatureMetrics'; +import { useEffect } from 'react'; const StyledTitle = styled('h2')(({ theme }) => ({ margin: 0, @@ -25,6 +26,7 @@ export const FeatureMetricsHours = ({ setHoursBack, }: IFeatureMetricsHoursProps) => { const { trackEvent } = usePlausibleTracker(); + const onChange: IGeneralSelectProps['onChange'] = (key) => { setHoursBack(parseInt(key)); trackEvent('feature-metrics', { @@ -39,6 +41,18 @@ export const FeatureMetricsHours = ({ ? [...hourOptions, ...daysOptions] : hourOptions; + const normalizedHoursBack = options + .map((option) => Number(option.key)) + .includes(hoursBack) + ? hoursBack + : FEATURE_METRIC_HOURS_BACK_DEFAULT; + + useEffect(() => { + if (hoursBack !== normalizedHoursBack) { + setHoursBack(normalizedHoursBack); + } + }, [hoursBack]); + return (
Period @@ -46,7 +60,7 @@ export const FeatureMetricsHours = ({ name='feature-metrics-period' id='feature-metrics-period' options={options} - value={String(hoursBack)} + value={String(normalizedHoursBack)} onChange={onChange} fullWidth /> @@ -69,8 +83,6 @@ const hourOptions: { key: `${number}`; label: string }[] = [ }, ]; -const now = new Date(); - const daysOptions: { key: `${number}`; label: string }[] = [ { key: `${7 * 24}`,