From 22037cb0f243e244e9c6286a247ccac8eff14d2f Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 19 Jan 2024 09:27:31 +0100
Subject: [PATCH] fix: normalize hours back to prevent freezing UI (#5953)

---
 .../FeatureMetricsHours.test.tsx              | 19 +++++++++++++++++++
 .../FeatureMetricsHours.tsx                   | 18 +++++++++++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)

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(
+        <FeatureMetricsHours
+            hoursBack={invalidHoursBack}
+            setHoursBack={(hoursBack) => {
+                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 (
         <div>
             <StyledTitle>Period</StyledTitle>
@@ -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}`,