🚸 Add a better select input

Also improves other inputs behavior

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/CellWithValueStack.tsx

@@ -2,7 +2,7 @@ import { Stack } from '@chakra-ui/react'
 import { DropdownList } from '@/components/DropdownList'
 import { Cell } from 'models'
 import { TableListItemProps } from '@/components/TableList'
-import { Input } from '@/components/inputs'
+import { TextInput } from '@/components/inputs'
 
 export const CellWithValueStack = ({
   item,
@@ -25,7 +25,7 @@ export const CellWithValueStack = ({
         items={columns}
         placeholder="Select a column"
       />
-      <Input
+      <TextInput
         defaultValue={item.value ?? ''}
         onChange={handleValueChange}
         placeholder="Type a value..."

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/CellWithVariableIdStack.tsx

@@ -2,7 +2,7 @@ import { Stack } from '@chakra-ui/react'
 import { DropdownList } from '@/components/DropdownList'
 import { ExtractingCell, Variable } from 'models'
 import { TableListItemProps } from '@/components/TableList'
-import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 
 export const CellWithVariableIdStack = ({
   item,

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/RowsFilterComparisonItem.tsx

@@ -1,5 +1,5 @@
 import { DropdownList } from '@/components/DropdownList'
-import { Input } from '@/components/inputs'
+import { TextInput } from '@/components/inputs'
 import { TableListItemProps } from '@/components/TableList'
 import { Stack } from '@chakra-ui/react'
 import { ComparisonOperators, RowsFilterComparison } from 'models'
@@ -42,7 +42,7 @@ export const RowsFilterComparisonItem = ({
         placeholder="Select an operator"
       />
       {item.comparisonOperator !== ComparisonOperators.IS_SET && (
-        <Input
+        <TextInput
           defaultValue={item.value ?? ''}
           onChange={handleChangeValue}
           placeholder="Type a value..."

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/SheetsDropdown.tsx

@@ -1,8 +1,6 @@
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { SearchableDropdown } from '@/components/SearchableDropdown'
+import { Select } from '@/components/inputs/Select'
 import { HStack, Input } from '@chakra-ui/react'
-import { useMemo } from 'react'
-import { isDefined } from 'utils'
 import { Sheet } from '../../types'
 
 type Props = {
@@ -18,16 +16,6 @@ export const SheetsDropdown = ({
   sheetId,
   onSelectSheetId,
 }: Props) => {
-  const currentSheet = useMemo(
-    () => sheets?.find((s) => s.id === sheetId),
-    [sheetId, sheets]
-  )
-
-  const handleSpreadsheetSelect = (name: string) => {
-    const id = sheets?.find((s) => s.name === name)?.id
-    if (isDefined(id)) onSelectSheetId(id)
-  }
-
   if (isLoading) return <Input value="Loading..." isDisabled />
   if (!sheets || sheets.length === 0)
     return (
@@ -40,10 +28,10 @@ export const SheetsDropdown = ({
       </HStack>
     )
   return (
-    <SearchableDropdown
-      selectedItem={currentSheet?.name}
-      items={(sheets ?? []).map((s) => s.name)}
-      onValueChange={handleSpreadsheetSelect}
+    <Select
+      selectedItem={sheetId}
+      items={(sheets ?? []).map((s) => ({ label: s.name, value: s.id }))}
+      onSelect={onSelectSheetId}
       placeholder={'Select the sheet'}
     />
   )

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx

@@ -1,6 +1,5 @@
-import { SearchableDropdown } from '@/components/SearchableDropdown'
+import { Select } from '@/components/inputs/Select'
 import { Input, Tooltip } from '@chakra-ui/react'
-import { useMemo } from 'react'
 import { useSpreadsheets } from '../../hooks/useSpreadsheets'
 
 type Props = {
@@ -17,15 +16,7 @@ export const SpreadsheetsDropdown = ({
   const { spreadsheets, isLoading } = useSpreadsheets({
     credentialsId,
   })
-  const currentSpreadsheet = useMemo(
-    () => spreadsheets?.find((s) => s.id === spreadsheetId),
-    [spreadsheetId, spreadsheets]
-  )
 
-  const handleSpreadsheetSelect = (name: string) => {
-    const id = spreadsheets?.find((s) => s.name === name)?.id
-    if (id) onSelectSpreadsheetId(id)
-  }
   if (isLoading) return <Input value="Loading..." isDisabled />
   if (!spreadsheets || spreadsheets.length === 0)
     return (
@@ -36,10 +27,13 @@ export const SpreadsheetsDropdown = ({
       </Tooltip>
     )
   return (
-    <SearchableDropdown
-      selectedItem={currentSpreadsheet?.name}
-      items={(spreadsheets ?? []).map((s) => s.name)}
-      onValueChange={handleSpreadsheetSelect}
+    <Select
+      selectedItem={spreadsheetId}
+      items={(spreadsheets ?? []).map((spreadsheet) => ({
+        label: spreadsheet.name,
+        value: spreadsheet.id,
+      }))}
+      onSelect={onSelectSpreadsheetId}
       placeholder={'Search for spreadsheet'}
     />
   )