fix(editor): 🐛 FIx Webhook settings debounce

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>