blsmedia/bot
2
0
Fork 0
Code Activity

fix(editor): 🐛 FIx Webhook settings debounce

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-10 17:32:14 +01:00
parent 6cf89d8d9c
commit 31298e39c1
11 changed files with 50 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/builder/components/shared/CodeEditor.tsx
View File

@ -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(

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

4
apps/builder/components/shared/SearchableDropdown.tsx
View File

@ -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

4
apps/builder/components/shared/SmartNumberInput.tsx
View File

@ -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(() => {

11
apps/builder/components/shared/TableList.tsx
View File

@ -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 />}

4
apps/builder/components/shared/Textbox/TextBox.tsx
View File

@ -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(

14
apps/builder/components/shared/TypebotHeader/CollaborationMenuButton/CollaborationList.tsx
View File

@ -224,12 +224,14 @@ const CollaborationTypeMenuButton = ({
{convertCollaborationTypeEnumToReadable(type)}
</MenuButton>
<MenuList minW={0}>
<MenuItem onClick={() => onChange(CollaborationType.READ)}>
{convertCollaborationTypeEnumToReadable(CollaborationType.READ)}
</MenuItem>
<MenuItem onClick={() => onChange(CollaborationType.WRITE)}>
{convertCollaborationTypeEnumToReadable(CollaborationType.WRITE)}
</MenuItem>
<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>
)

6
apps/builder/components/shared/VariableSearchInput.tsx
View File

@ -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 ?? []