fix(editor): 🐛 FIx Webhook settings debounce

apps/builder/components/shared/CodeEditor.tsx

@@ -10,14 +10,16 @@ import { useDebouncedCallback } from 'use-debounce'
 type Props = {
   value: string
   lang?: 'css' | 'json' | 'js' | 'html'
-  onChange?: (value: string) => void
   isReadOnly?: boolean
+  debounceTimeout?: number
+  onChange?: (value: string) => void
 }
 export const CodeEditor = ({
   value,
   lang,
   onChange,
   isReadOnly = false,
+  debounceTimeout = 1000,
   ...props
 }: Props & Omit<BoxProps, 'onChange'>) => {
   const editorContainer = useRef<HTMLDivElement | null>(null)
@@ -28,7 +30,7 @@ export const CodeEditor = ({
       setPlainTextValue(value)
       onChange && onChange(value)
     },
-    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
+    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
 
   useEffect(

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/KeyValueInputs.tsx

@@ -24,6 +24,7 @@ export const KeyValueInputs = ({
   onItemChange,
   keyPlaceholder,
   valuePlaceholder,
+  debounceTimeout,
 }: TableListItemProps<KeyValue> & {
   keyPlaceholder?: string
   valuePlaceholder?: string
@@ -45,6 +46,7 @@ export const KeyValueInputs = ({
           defaultValue={item.key ?? ''}
           onChange={handleKeyChange}
           placeholder={keyPlaceholder}
+          debounceTimeout={debounceTimeout}
         />
       </FormControl>
       <FormControl>
@@ -54,6 +56,7 @@ export const KeyValueInputs = ({
           defaultValue={item.value ?? ''}
           onChange={handleValueChange}
           placeholder={valuePlaceholder}
+          debounceTimeout={debounceTimeout}
         />
       </FormControl>
     </Stack>

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/ResponseMappingInputs.tsx

@@ -8,6 +8,7 @@ export const DataVariableInputs = ({
   item,
   onItemChange,
   dataItems,
+  debounceTimeout,
 }: TableListItemProps<ResponseVariableMapping> & { dataItems: string[] }) => {
   const handleBodyPathChange = (bodyPath: string) =>
     onItemChange({ ...item, bodyPath })
@@ -23,6 +24,7 @@ export const DataVariableInputs = ({
           value={item.bodyPath}
           onValueChange={handleBodyPathChange}
           placeholder="Select the data"
+          debounceTimeout={debounceTimeout}
         />
       </FormControl>
       <FormControl>
@@ -31,6 +33,7 @@ export const DataVariableInputs = ({
           onSelectVariable={handleVariableChange}
           placeholder="Search for a variable"
           initialVariableId={item.variableId}
+          debounceTimeout={debounceTimeout}
         />
       </FormControl>
     </Stack>

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/VariableForTestInputs.tsx

@@ -7,6 +7,7 @@ import { VariableForTest, Variable } from 'models'
 export const VariableForTestInputs = ({
   item,
   onItemChange,
+  debounceTimeout,
 }: TableListItemProps<VariableForTest>) => {
   const handleVariableSelect = (variable?: Variable) =>
     onItemChange({ ...item, variableId: variable?.id })
@@ -22,6 +23,7 @@ export const VariableForTestInputs = ({
           id={'name' + item.id}
           initialVariableId={item.variableId}
           onSelectVariable={handleVariableSelect}
+          debounceTimeout={debounceTimeout}
         />
       </FormControl>
       <FormControl>
@@ -30,6 +32,7 @@ export const VariableForTestInputs = ({
           id={'value' + item.id}
           defaultValue={item.value ?? ''}
           onChange={handleValueChange}
+          debounceTimeout={debounceTimeout}
         />
       </FormControl>
     </Stack>

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -81,6 +81,7 @@ export const WebhookSettings = ({
 
     return () => {
       setLocalWebhook((localWebhook) => {
+        console.log(localWebhook)
         if (!localWebhook) return
         updateWebhook(webhookId, localWebhook).then()
         return localWebhook
@@ -148,6 +149,7 @@ export const WebhookSettings = ({
         placeholder="Your Webhook URL..."
         defaultValue={localWebhook.url ?? ''}
         onChange={handleUrlChange}
+        debounceTimeout={0}
       />
       <SwitchWithLabel
         id={'easy-config'}
@@ -177,6 +179,7 @@ export const WebhookSettings = ({
                   onItemsChange={handleQueryParamsChange}
                   Item={QueryParamsInputs}
                   addLabel="Add a param"
+                  debounceTimeout={0}
                 />
               </AccordionPanel>
             </AccordionItem>
@@ -191,6 +194,7 @@ export const WebhookSettings = ({
                   onItemsChange={handleHeadersChange}
                   Item={HeadersInputs}
                   addLabel="Add a value"
+                  debounceTimeout={0}
                 />
               </AccordionPanel>
             </AccordionItem>
@@ -211,6 +215,7 @@ export const WebhookSettings = ({
                     value={localWebhook.body ?? ''}
                     lang="json"
                     onChange={handleBodyChange}
+                    debounceTimeout={0}
                   />
                 )}
               </AccordionPanel>
@@ -228,6 +233,7 @@ export const WebhookSettings = ({
                   onItemsChange={handleVariablesChange}
                   Item={VariableForTestInputs}
                   addLabel="Add an entry"
+                  debounceTimeout={0}
                 />
               </AccordionPanel>
             </AccordionItem>
@@ -258,6 +264,7 @@ export const WebhookSettings = ({
                   onItemsChange={handleResponseMappingChange}
                   Item={ResponseMappingInputs}
                   addLabel="Add an entry"
+                  debounceTimeout={0}
                 />
               </AccordionPanel>
             </AccordionItem>

apps/builder/components/shared/SearchableDropdown.tsx

@@ -15,12 +15,14 @@ import { useDebounce } from 'use-debounce'
 type Props = {
   selectedItem?: string
   items: string[]
+  debounceTimeout?: number
   onValueChange?: (value: string) => void
 } & InputProps
 
 export const SearchableDropdown = ({
   selectedItem,
   items,
+  debounceTimeout = 1000,
   onValueChange,
   ...inputProps
 }: Props) => {
@@ -28,7 +30,7 @@ export const SearchableDropdown = ({
   const [inputValue, setInputValue] = useState(selectedItem ?? '')
   const [debouncedInputValue] = useDebounce(
     inputValue,
-    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
+    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
   const [filteredItems, setFilteredItems] = useState([
     ...items

apps/builder/components/shared/SmartNumberInput.tsx

@@ -12,9 +12,11 @@ import { useDebounce } from 'use-debounce'
 export const SmartNumberInput = ({
   value,
   onValueChange,
+  debounceTimeout = 1000,
   ...props
 }: {
   value?: number
+  debounceTimeout?: number
   onValueChange: (value?: number) => void
 } & NumberInputProps) => {
   const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
@@ -23,7 +25,7 @@ export const SmartNumberInput = ({
   )
   const [debouncedValue] = useDebounce(
     valueToReturn,
-    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
+    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
 
   useEffect(() => {

apps/builder/components/shared/TableList.tsx

@@ -10,13 +10,15 @@ type ItemWithId<T> = T & { id: string }
 
 export type TableListItemProps<T> = {
   item: T
+  debounceTimeout?: number
   onItemChange: (item: T) => void
 }
 
 type Props<T> = {
   initialItems: ItemWithId<T>[]
-  onItemsChange: (items: ItemWithId<T>[]) => void
   addLabel?: string
+  debounceTimeout?: number
+  onItemsChange: (items: ItemWithId<T>[]) => void
   Item: (props: TableListItemProps<T>) => JSX.Element
   ComponentBetweenItems?: (props: unknown) => JSX.Element
 }
@@ -25,6 +27,7 @@ export const TableList = <T,>({
   initialItems,
   onItemsChange,
   addLabel = 'Add',
+  debounceTimeout,
   Item,
   ComponentBetweenItems = () => <></>,
 }: Props<T>) => {
@@ -75,7 +78,11 @@ export const TableList = <T,>({
             onMouseLeave={handleMouseLeave}
             mt={itemIndex !== 0 && ComponentBetweenItems ? 4 : 0}
           >
-            <Item item={item} onItemChange={handleCellChange(itemIndex)} />
+            <Item
+              item={item}
+              onItemChange={handleCellChange(itemIndex)}
+              debounceTimeout={debounceTimeout}
+            />
             <Fade in={showDeleteIndex === itemIndex}>
               <IconButton
                 icon={<TrashIcon />}

apps/builder/components/shared/Textbox/TextBox.tsx

@@ -22,12 +22,14 @@ export type TextBoxProps = {
     | ComponentWithAs<'textarea', TextareaProps>
     | ComponentWithAs<'input', InputProps>
   withVariableButton?: boolean
+  debounceTimeout?: number
 } & Omit<InputProps & TextareaProps, 'onChange'>
 
 export const TextBox = ({
   onChange,
   TextBox,
   withVariableButton = true,
+  debounceTimeout = 1000,
   ...props
 }: TextBoxProps) => {
   const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
@@ -39,7 +41,7 @@ export const TextBox = ({
     (value) => {
       onChange(value)
     },
-    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
+    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
 
   useEffect(

apps/builder/components/shared/TypebotHeader/CollaborationMenuButton/CollaborationList.tsx

@@ -224,12 +224,14 @@ const CollaborationTypeMenuButton = ({
         {convertCollaborationTypeEnumToReadable(type)}
       </MenuButton>
       <MenuList minW={0}>
+        <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
           <MenuItem onClick={() => onChange(CollaborationType.READ)}>
             {convertCollaborationTypeEnumToReadable(CollaborationType.READ)}
           </MenuItem>
           <MenuItem onClick={() => onChange(CollaborationType.WRITE)}>
             {convertCollaborationTypeEnumToReadable(CollaborationType.WRITE)}
           </MenuItem>
+        </Stack>
       </MenuList>
     </Menu>
   )

apps/builder/components/shared/VariableSearchInput.tsx

@@ -20,16 +20,18 @@ import { byId, isNotDefined } from 'utils'
 
 type Props = {
   initialVariableId?: string
+  debounceTimeout?: number
+  isDefaultOpen?: boolean
   onSelectVariable: (
     variable: Pick<Variable, 'id' | 'name'> | undefined
   ) => void
-  isDefaultOpen?: boolean
 } & InputProps
 
 export const VariableSearchInput = ({
   initialVariableId,
   onSelectVariable,
   isDefaultOpen,
+  debounceTimeout = 1000,
   ...inputProps
 }: Props) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
@@ -40,7 +42,7 @@ export const VariableSearchInput = ({
   )
   const [debouncedInputValue] = useDebounce(
     inputValue,
-    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
+    process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
   const [filteredItems, setFilteredItems] = useState<Variable[]>(
     variables ?? []