From 823e8c41cda664b7f22e8fba41aeae10b18faf68 Mon Sep 17 00:00:00 2001
From: Robbie Coomber <robbie.coomber@gmail.com>
Date: Sun, 22 Dec 2024 00:42:33 +0000
Subject: [PATCH] Improve the UI to change the setting

---
 .../lib/lemon-ui/LemonInput/LemonInput.tsx    |  6 +-
 .../environment/BounceRateDuration.tsx        | 61 +++++++++++++++++--
 2 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
index aa8f6f32a964b..9d32f6de6f767 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
@@ -68,7 +68,7 @@ export interface LemonInputPropsNumber
     extends LemonInputPropsBase,
         Pick<React.InputHTMLAttributes<HTMLInputElement>, 'step' | 'min' | 'max'> {
     type: 'number'
-    value?: number
+    value?: number | null
     defaultValue?: number
     onChange?: (newValue: number | undefined) => void
 }
@@ -154,6 +154,10 @@ export const LemonInput = React.forwardRef<HTMLDivElement, LemonInputProps>(func
 
     const InputComponent = autoWidth ? RawInputAutosize : 'input'
 
+    if (value == null) {
+        value = ''
+    }
+
     return (
         <span
             className={clsx(
diff --git a/frontend/src/scenes/settings/environment/BounceRateDuration.tsx b/frontend/src/scenes/settings/environment/BounceRateDuration.tsx
index fc57f38ff1524..1a9f4d63675a4 100644
--- a/frontend/src/scenes/settings/environment/BounceRateDuration.tsx
+++ b/frontend/src/scenes/settings/environment/BounceRateDuration.tsx
@@ -1,9 +1,13 @@
+import { IconX } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonInput } from 'lib/lemon-ui/LemonInput'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { teamLogic } from 'scenes/teamLogic'
 
+const MIN_BOUNCE_RATE_DURATION = 1
+const MAX_BOUNCE_RATE_DURATION = 120
+
 export function BounceRateDurationSetting(): JSX.Element {
     const { updateCurrentTeam } = useActions(teamLogic)
     const { currentTeam } = useValues(teamLogic)
@@ -13,21 +17,66 @@ export function BounceRateDurationSetting(): JSX.Element {
     const [bounceRateDuration, setBounceRateDuration] = useState<number | undefined>(savedDuration)
 
     const handleChange = (duration: number | undefined): void => {
-        updateCurrentTeam({ modifiers: { ...currentTeam?.modifiers, bounceRateDurationSeconds: duration } })
+        if (Number.isNaN(duration)) {
+            duration = undefined
+        }
+        updateCurrentTeam({
+            modifiers: { ...currentTeam?.modifiers, bounceRateDurationSeconds: duration },
+        })
     }
 
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
     return (
         <>
             <p>
-                Choose how long a user can stay on a page, in seconds, before the session is not a bounce. The default
-                is 10 seconds.
+                Choose how long a user can stay on a page, in seconds, before the session is not a bounce. Leave blank
+                to use the default of 10 seconds, or set a custom value between 1 second and 120 seconds inclusive.
             </p>
-            <LemonInput type="number" min={1} max={120} value={bounceRateDuration} onChange={setBounceRateDuration} />
+            <LemonInput
+                type="number"
+                min={MIN_BOUNCE_RATE_DURATION}
+                max={MAX_BOUNCE_RATE_DURATION}
+                value={bounceRateDuration ?? null}
+                onChange={(x) => {
+                    if (x == null || Number.isNaN(x)) {
+                        setBounceRateDuration(undefined)
+                    } else {
+                        setBounceRateDuration(x)
+                    }
+                }}
+                inputRef={inputRef}
+                suffix={
+                    <LemonButton
+                        size="small"
+                        noPadding
+                        icon={<IconX />}
+                        tooltip="Clear input"
+                        onClick={(e) => {
+                            e.stopPropagation()
+                            setBounceRateDuration(undefined)
+                            inputRef.current?.focus()
+                        }}
+                    />
+                }
+            />
             <div className="mt-4">
                 <LemonButton
                     type="primary"
                     onClick={() => handleChange(bounceRateDuration)}
-                    disabledReason={bounceRateDuration === savedDuration ? 'No changes to save' : undefined}
+                    disabledReason={
+                        bounceRateDuration === savedDuration
+                            ? 'No changes to save'
+                            : bounceRateDuration == undefined
+                            ? undefined
+                            : isNaN(bounceRateDuration)
+                            ? 'Invalid number'
+                            : bounceRateDuration < MIN_BOUNCE_RATE_DURATION
+                            ? `Duration must be at least ${MIN_BOUNCE_RATE_DURATION} second`
+                            : bounceRateDuration > MAX_BOUNCE_RATE_DURATION
+                            ? `Duration must be less than ${MAX_BOUNCE_RATE_DURATION} seconds`
+                            : undefined
+                    }
                 >
                     Save
                 </LemonButton>