🚸 Add a better select input

Also improves other inputs behavior

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/KeyValueInputs.tsx

@@ -1,6 +1,6 @@
-import { Input } from '@/components/inputs'
+import { TextInput } from '@/components/inputs'
 import { TableListItemProps } from '@/components/TableList'
-import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
+import { Stack } from '@chakra-ui/react'
 import { KeyValue } from 'models'
 
 export const QueryParamsInputs = (props: TableListItemProps<KeyValue>) => (
@@ -39,26 +39,20 @@ export const KeyValueInputs = ({
   }
   return (
     <Stack p="4" rounded="md" flex="1" borderWidth="1px">
-      <FormControl>
-        <FormLabel htmlFor={'key' + item.id}>Key:</FormLabel>
-        <Input
-          id={'key' + item.id}
-          defaultValue={item.key ?? ''}
-          onChange={handleKeyChange}
-          placeholder={keyPlaceholder}
-          debounceTimeout={debounceTimeout}
-        />
-      </FormControl>
-      <FormControl>
-        <FormLabel htmlFor={'value' + item.id}>Value:</FormLabel>
-        <Input
-          id={'value' + item.id}
-          defaultValue={item.value ?? ''}
-          onChange={handleValueChange}
-          placeholder={valuePlaceholder}
-          debounceTimeout={debounceTimeout}
-        />
-      </FormControl>
+      <TextInput
+        label="Key:"
+        defaultValue={item.key ?? ''}
+        onChange={handleKeyChange}
+        placeholder={keyPlaceholder}
+        debounceTimeout={debounceTimeout}
+      />
+      <TextInput
+        label="Value:"
+        defaultValue={item.value ?? ''}
+        onChange={handleValueChange}
+        placeholder={valuePlaceholder}
+        debounceTimeout={debounceTimeout}
+      />
     </Stack>
   )
 }

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/ResponseMappingInputs.tsx

@@ -1,6 +1,6 @@
-import { SearchableDropdown } from '@/components/SearchableDropdown'
+import { AutocompleteInput } from '@/components/inputs/AutocompleteInput'
 import { TableListItemProps } from '@/components/TableList'
-import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
 import { Variable, ResponseVariableMapping } from 'models'
 
@@ -18,10 +18,10 @@ export const DataVariableInputs = ({
     <Stack p="4" rounded="md" flex="1" borderWidth="1px">
       <FormControl>
         <FormLabel htmlFor="name">Data:</FormLabel>
-        <SearchableDropdown
+        <AutocompleteInput
           items={dataItems}
-          value={item.bodyPath}
-          onValueChange={handleBodyPathChange}
+          defaultValue={item.bodyPath}
+          onChange={handleBodyPathChange}
           placeholder="Select the data"
           withVariableButton
         />

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/VariableForTestInputs.tsx

@@ -1,6 +1,6 @@
-import { Input } from '@/components/inputs'
+import { TextInput } from '@/components/inputs'
 import { TableListItemProps } from '@/components/TableList'
-import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
 import { VariableForTest, Variable } from 'models'
 
@@ -25,15 +25,12 @@ export const VariableForTestInputs = ({
           onSelectVariable={handleVariableSelect}
         />
       </FormControl>
-      <FormControl>
-        <FormLabel htmlFor={'value' + item.id}>Test value:</FormLabel>
-        <Input
-          id={'value' + item.id}
-          defaultValue={item.value ?? ''}
-          onChange={handleValueChange}
-          debounceTimeout={debounceTimeout}
-        />
-      </FormControl>
+      <TextInput
+        label="Test value:"
+        defaultValue={item.value ?? ''}
+        onChange={handleValueChange}
+        debounceTimeout={debounceTimeout}
+      />
     </Stack>
   )
 }

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/WebhookSettings.tsx

@@ -27,18 +27,18 @@ import {
   Webhook,
 } from 'models'
 import { DropdownList } from '@/components/DropdownList'
-import { CodeEditor } from '@/components/CodeEditor'
+import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { HeadersInputs, QueryParamsInputs } from './KeyValueInputs'
 import { VariableForTestInputs } from './VariableForTestInputs'
 import { DataVariableInputs } from './ResponseMappingInputs'
 import { byId, env } from 'utils'
 import { ExternalLinkIcon } from '@/components/icons'
 import { useToast } from '@/hooks/useToast'
-import { SwitchWithLabel } from '@/components/SwitchWithLabel'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { TableListItemProps, TableList } from '@/components/TableList'
 import { executeWebhook } from '../../queries/executeWebhookQuery'
 import { getDeepKeys } from '../../utils/getDeepKeys'
-import { Input } from '@/components/inputs'
+import { TextInput } from '@/components/inputs'
 import { convertVariablesForTestToVariables } from '../../utils/convertVariablesForTestToVariables'
 import { useDebouncedCallback } from 'use-debounce'
 
@@ -157,7 +157,7 @@ export const WebhookSettings = ({
           </Stack>
         </Alert>
       )}
-      <Input
+      <TextInput
         placeholder="Paste webhook URL..."
         defaultValue={localWebhook.url ?? ''}
         onChange={handleUrlChange}