blsmedia/bot
2
0
Fork 0
Code Activity

feat(editor): 🚸 Improve and unify inputs

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-10 11:34:55 +01:00
parent 36838f05d3
commit 2c1f69439b
32 changed files with 187 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/builder/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx
View File

@ -1,5 +1,5 @@
import { Stack, Text } from '@chakra-ui/react'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { Input } from 'components/shared/Textbox/Input'
import { VideoBubbleContent, VideoBubbleContentType } from 'models'
import urlParser from 'js-video-url-parser/lib/base'
import 'js-video-url-parser/lib/provider/vimeo'
@ -24,9 +24,9 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
}
return (
<Stack p="2">
<InputWithVariableButton
<Input
placeholder="Paste the video link..."
initialValue={content?.url ?? ''}
defaultValue={content?.url ?? ''}
onChange={handleUrlChange}
/>
<Text fontSize="sm" color="gray.400" textAlign="center">

6
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
View File

@ -1,6 +1,6 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { ChoiceInputOptions, Variable } from 'models'
import React from 'react'
@ -34,9 +34,9 @@ export const ChoiceInputSettingsBody = ({
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
<Input
id="button"
initialValue={options?.buttonLabel ?? 'Send'}
defaultValue={options?.buttonLabel ?? 'Send'}
onChange={handleButtonLabelChange}
/>
</Stack>

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

@ -1,6 +1,6 @@
import { FormLabel, Stack, Text } from '@chakra-ui/react'
import { CodeEditor } from 'components/shared/CodeEditor'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { Input } from 'components/shared/Textbox'
import { CodeOptions } from 'models'
import React from 'react'
@ -20,10 +20,11 @@ export const CodeSettings = ({ options, onOptionsChange }: Props) => {
<FormLabel mb="0" htmlFor="name">
Name:
</FormLabel>
<DebouncedInput
<Input
id="name"
initialValue={options.name}
defaultValue={options.name}
onChange={handleNameChange}
withVariableButton={false}
/>
</Stack>
<Stack>

6
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
View File

@ -1,6 +1,6 @@
import { Stack } from '@chakra-ui/react'
import { DropdownList } from 'components/shared/DropdownList'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { Input } from 'components/shared/Textbox/Input'
import { TableListItemProps } from 'components/shared/TableList'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { Comparison, Variable, ComparisonOperators } from 'models'
@ -39,8 +39,8 @@ export const ComparisonItem = ({
placeholder="Select an operator"
/>
{item.comparisonOperator !== ComparisonOperators.IS_SET && (
<InputWithVariableButton
initialValue={item.value ?? ''}
<Input
defaultValue={item.value ?? ''}
onChange={handleChangeValue}
placeholder="Type a value..."
/>

14
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
View File

@ -1,6 +1,6 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { DateInputOptions, Variable } from 'models'
import React from 'react'
@ -46,9 +46,9 @@ export const DateInputSettingsBody = ({
<FormLabel mb="0" htmlFor="from">
From label:
</FormLabel>
<DebouncedInput
<Input
id="from"
initialValue={options.labels.from}
defaultValue={options.labels.from}
onChange={handleFromChange}
/>
</Stack>
@ -58,9 +58,9 @@ export const DateInputSettingsBody = ({
<FormLabel mb="0" htmlFor="to">
To label:
</FormLabel>
<DebouncedInput
<Input
id="to"
initialValue={options.labels.to}
defaultValue={options.labels.to}
onChange={handleToChange}
/>
</Stack>
@ -69,9 +69,9 @@ export const DateInputSettingsBody = ({
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
<Input
id="button"
initialValue={options.labels.button}
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>

15
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
View File

@ -1,6 +1,5 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { EmailInputOptions, Variable } from 'models'
import React from 'react'
@ -29,9 +28,9 @@ export const EmailInputSettingsBody = ({
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<DebouncedInput
<Input
id="placeholder"
initialValue={options.labels.placeholder}
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
@ -39,9 +38,9 @@ export const EmailInputSettingsBody = ({
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
<Input
id="button"
initialValue={options.labels.button}
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
@ -49,9 +48,9 @@ export const EmailInputSettingsBody = ({
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<InputWithVariableButton
<Input
id="retry"
initialValue={options.retryMessageContent}
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>

23
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
View File

@ -9,8 +9,7 @@ import {
Stack,
Tag,
} from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { Input } from 'components/shared/Textbox'
import { GoogleAnalyticsOptions } from 'models'
import React from 'react'
@ -47,9 +46,9 @@ export const GoogleAnalyticsSettings = ({
<FormLabel mb="0" htmlFor="tracking-id">
Tracking ID:
</FormLabel>
<DebouncedInput
<Input
id="tracking-id"
initialValue={options?.trackingId ?? ''}
defaultValue={options?.trackingId ?? ''}
placeholder="G-123456..."
onChange={handleTrackingIdChange}
/>
@ -58,9 +57,9 @@ export const GoogleAnalyticsSettings = ({
<FormLabel mb="0" htmlFor="category">
Event category:
</FormLabel>
<InputWithVariableButton
<Input
id="category"
initialValue={options?.category ?? ''}
defaultValue={options?.category ?? ''}
placeholder="Example: Typebot"
onChange={handleCategoryChange}
/>
@ -69,9 +68,9 @@ export const GoogleAnalyticsSettings = ({
<FormLabel mb="0" htmlFor="action">
Event action:
</FormLabel>
<InputWithVariableButton
<Input
id="action"
initialValue={options?.action ?? ''}
defaultValue={options?.action ?? ''}
placeholder="Example: Submit email"
onChange={handleActionChange}
/>
@ -91,9 +90,9 @@ export const GoogleAnalyticsSettings = ({
<FormLabel mb="0" htmlFor="label">
Event label <Tag>Optional</Tag>:
</FormLabel>
<InputWithVariableButton
<Input
id="label"
initialValue={options?.label ?? ''}
defaultValue={options?.label ?? ''}
placeholder="Example: Campaign Z"
onChange={handleLabelChange}
/>
@ -102,9 +101,9 @@ export const GoogleAnalyticsSettings = ({
<FormLabel mb="0" htmlFor="value">
Event value <Tag>Optional</Tag>:
</FormLabel>
<InputWithVariableButton
<Input
id="value"
initialValue={options?.value?.toString() ?? ''}
defaultValue={options?.value?.toString() ?? ''}
placeholder="Example: 0"
onChange={handleValueChange}
/>

6
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
View File

@ -1,6 +1,6 @@
import { Stack } from '@chakra-ui/react'
import { DropdownList } from 'components/shared/DropdownList'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { Input } from 'components/shared/Textbox/Input'
import { TableListItemProps } from 'components/shared/TableList'
import { Cell } from 'models'
@ -25,8 +25,8 @@ export const CellWithValueStack = ({
items={columns}
placeholder="Select a column"
/>
<InputWithVariableButton
initialValue={item.value ?? ''}
<Input
defaultValue={item.value ?? ''}
onChange={handleValueChange}
placeholder="Type a value..."
/>

10
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
View File

@ -1,6 +1,6 @@
import { FormLabel, HStack, Stack } from '@chakra-ui/react'
import { SmartNumberInput } from 'components/shared/SmartNumberInput'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { NumberInputOptions, Variable } from 'models'
import React from 'react'
@ -35,9 +35,9 @@ export const NumberInputSettingsBody = ({
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<DebouncedInput
<Input
id="placeholder"
initialValue={options.labels.placeholder}
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
@ -45,9 +45,9 @@ export const NumberInputSettingsBody = ({
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
<Input
id="button"
initialValue={options?.labels?.button ?? 'Send'}
defaultValue={options?.labels?.button ?? 'Send'}
onChange={handleButtonLabelChange}
/>
</Stack>

15
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx
View File

@ -1,6 +1,5 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { PhoneNumberInputOptions, Variable } from 'models'
import React from 'react'
@ -32,9 +31,9 @@ export const PhoneNumberSettingsBody = ({
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<DebouncedInput
<Input
id="placeholder"
initialValue={options.labels.placeholder}
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
@ -42,9 +41,9 @@ export const PhoneNumberSettingsBody = ({
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
<Input
id="button"
initialValue={options.labels.button}
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
@ -61,9 +60,9 @@ export const PhoneNumberSettingsBody = ({
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<InputWithVariableButton
<Input
id="retry"
initialValue={options.retryMessageContent}
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>

6
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
View File

@ -1,6 +1,6 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
import { Input } from 'components/shared/Textbox'
import { RedirectOptions } from 'models'
import React from 'react'
@ -21,9 +21,9 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
<FormLabel mb="0" htmlFor="tracking-id">
Url:
</FormLabel>
<InputWithVariableButton
<Input
id="tracking-id"
initialValue={options.url ?? ''}
defaultValue={options.url ?? ''}
placeholder="Type a URL..."
onChange={handleUrlChange}
/>

25
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SendEmailSettings.tsx
View File

@ -1,9 +1,6 @@
import { Stack, useDisclosure, Text } from '@chakra-ui/react'
import { CredentialsDropdown } from 'components/shared/CredentialsDropdown'
import {
InputWithVariableButton,
TextareaWithVariableButton,
} from 'components/shared/TextboxWithVariableButton'
import { Input, Textarea } from 'components/shared/Textbox'
import { CredentialsType, SendEmailOptions } from 'models'
import React, { useState } from 'react'
import { SmtpConfigModal } from './SmtpConfigModal'
@ -80,43 +77,43 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
</Stack>
<Stack>
<Text>To: </Text>
<InputWithVariableButton
<Input
onChange={handleToChange}
initialValue={options.recipients.join(', ')}
defaultValue={options.recipients.join(', ')}
placeholder="email1@gmail.com, email2@gmail.com"
/>
</Stack>
<Stack>
<Text>Cc: </Text>
<InputWithVariableButton
<Input
onChange={handleCcChange}
initialValue={options.cc?.join(', ') ?? ''}
defaultValue={options.cc?.join(', ') ?? ''}
placeholder="email1@gmail.com, email2@gmail.com"
/>
</Stack>
<Stack>
<Text>Bcc: </Text>
<InputWithVariableButton
<Input
onChange={handleBccChange}
initialValue={options.bcc?.join(', ') ?? ''}
defaultValue={options.bcc?.join(', ') ?? ''}
placeholder="email1@gmail.com, email2@gmail.com"
/>
</Stack>
<Stack>
<Text>Subject: </Text>
<InputWithVariableButton
<Input
data-testid="subject-input"
onChange={handleSubjectChange}
initialValue={options.subject ?? ''}
defaultValue={options.subject ?? ''}
/>
</Stack>
<Stack>
<Text>Body: </Text>
<TextareaWithVariableButton
<Textarea
data-testid="body-input"
minH="300px"
onChange={handleBodyChange}
initialValue={options.body ?? ''}
defaultValue={options.body ?? ''}
/>
</Stack>
<SmtpConfigModal

27
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigForm.tsx
View File

@ -1,8 +1,8 @@
import { FormControl, FormLabel, HStack, Stack } from '@chakra-ui/react'
import { isDefined } from '@udecode/plate-common'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SmartNumberInput } from 'components/shared/SmartNumberInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { Input } from 'components/shared/Textbox'
import { SmtpCredentialsData } from 'models'
import React from 'react'
@ -30,43 +30,48 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
<Stack as="form" spacing={4}>
<FormControl isRequired>
<FormLabel>From email:</FormLabel>
<DebouncedInput
initialValue={config.from.email ?? ''}
<Input
defaultValue={config.from.email ?? ''}
onChange={handleFromEmailChange}
placeholder="notifications@provider.com"
withVariableButton={false}
/>
</FormControl>
<FormControl isRequired>
<FormLabel>From name:</FormLabel>
<DebouncedInput
initialValue={config.from.name ?? ''}
<Input
defaultValue={config.from.name ?? ''}
onChange={handleFromNameChange}
placeholder="John Smith"
withVariableButton={false}
/>
</FormControl>
<FormControl isRequired>
<FormLabel>Host:</FormLabel>
<DebouncedInput
initialValue={config.host ?? ''}
<Input
defaultValue={config.host ?? ''}
onChange={handleHostChange}
placeholder="mail.provider.com"
withVariableButton={false}
/>
</FormControl>
<FormControl isRequired>
<FormLabel>Username / Email:</FormLabel>
<DebouncedInput
<Input
type="email"
initialValue={config.username ?? ''}
defaultValue={config.username ?? ''}
onChange={handleUsernameChange}
placeholder="user@provider.com"
withVariableButton={false}
/>
</FormControl>
<FormControl isRequired>
<FormLabel>Password:</FormLabel>
<DebouncedInput
<Input
type="password"
initialValue={config.password ?? ''}
defaultValue={config.password ?? ''}
onChange={handlePasswordChange}
withVariableButton={false}
/>
</FormControl>
<SwitchWithLabel

6
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SetVariableSettings.tsx
View File

@ -1,5 +1,5 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedTextarea } from 'components/shared/DebouncedTextarea'
import { Textarea } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { SetVariableOptions, Variable } from 'models'
import React from 'react'
@ -31,9 +31,9 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
<FormLabel mb="0" htmlFor="expression">
Value / Expression:
</FormLabel>
<DebouncedTextarea
<Textarea
id="expression"
initialValue={options.expressionToEvaluate ?? ''}
defaultValue={options.expressionToEvaluate ?? ''}
onChange={handleExpressionChange}
/>
</Stack>

10
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
View File

@ -1,6 +1,6 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { TextInputOptions, Variable } from 'models'
import React from 'react'
@ -35,9 +35,9 @@ export const TextInputSettingsBody = ({
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<DebouncedInput
<Input
id="placeholder"
initialValue={options.labels.placeholder}
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
@ -45,9 +45,9 @@ export const TextInputSettingsBody = ({
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
<Input
id="button"
initialValue={options.labels.button}
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>

15
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
View File

@ -1,6 +1,5 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { UrlInputOptions, Variable } from 'models'
import React from 'react'
@ -29,9 +28,9 @@ export const UrlInputSettingsBody = ({
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<DebouncedInput
<Input
id="placeholder"
initialValue={options.labels.placeholder}
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
</Stack>
@ -39,9 +38,9 @@ export const UrlInputSettingsBody = ({
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
<Input
id="button"
initialValue={options.labels.button}
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
@ -49,9 +48,9 @@ export const UrlInputSettingsBody = ({
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<InputWithVariableButton
<Input
id="retry"
initialValue={options.retryMessageContent}
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>

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

@ -1,5 +1,5 @@
import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { Input } from 'components/shared/Textbox'
import { TableListItemProps } from 'components/shared/TableList'
import { KeyValue } from 'models'
@ -40,18 +40,18 @@ export const KeyValueInputs = ({
<Stack p="4" rounded="md" flex="1" borderWidth="1px">
<FormControl>
<FormLabel htmlFor={'key' + item.id}>Key:</FormLabel>
<InputWithVariableButton
<Input
id={'key' + item.id}
initialValue={item.key ?? ''}
defaultValue={item.key ?? ''}
onChange={handleKeyChange}
placeholder={keyPlaceholder}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor={'value' + item.id}>Value:</FormLabel>
<InputWithVariableButton
<Input
id={'value' + item.id}
initialValue={item.value ?? ''}
defaultValue={item.value ?? ''}
onChange={handleValueChange}
placeholder={valuePlaceholder}
/>

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

@ -1,6 +1,6 @@
import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { TableListItemProps } from 'components/shared/TableList'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { VariableForTest, Variable } from 'models'
@ -26,9 +26,9 @@ export const VariableForTestInputs = ({
</FormControl>
<FormControl>
<FormLabel htmlFor={'value' + item.id}>Test value:</FormLabel>
<DebouncedInput
<Input
id={'value' + item.id}
initialValue={item.value ?? ''}
defaultValue={item.value ?? ''}
onChange={handleValueChange}
/>
</FormControl>

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

@ -12,7 +12,7 @@ import {
useToast,
Text,
} from '@chakra-ui/react'
import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
import { Input } from 'components/shared/Textbox'
import { useTypebot } from 'contexts/TypebotContext'
import {
HttpMethod,
@ -144,9 +144,9 @@ export const WebhookSettings = ({
if (!localWebhook) return <Spinner />
return (
<Stack spacing={4}>
<InputWithVariableButton
<Input
placeholder="Your Webhook URL..."
initialValue={localWebhook.url ?? ''}
defaultValue={localWebhook.url ?? ''}
onChange={handleUrlChange}
/>
<SwitchWithLabel