Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

fix: normalize hours back to prevent freezing UI (#5953)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-01-19 09:27:31 +01:00 committed by GitHub
parent 277e3e0afd
commit 22037cb0f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.test.tsx
View File

@ -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);
});
});

18
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
View File

@ -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}`,