feat(editor): ♿️ Better Gsheets dropdowns

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx

@@ -1,3 +1,4 @@
+import { Input } from '@chakra-ui/react'
 import { SearchableDropdown } from 'components/shared/SearchableDropdown'
 import { useMemo } from 'react'
 import { Sheet } from 'services/integrations'
@@ -25,13 +26,15 @@ export const SheetsDropdown = ({
     const id = sheets?.find((s) => s.name === name)?.id
     if (isDefined(id)) onSelectSheetId(id)
   }
+
+  if (isLoading) return <Input value="Loading..." isDisabled />
+  if (!sheets) return <Input value="No sheets found" isDisabled />
   return (
     <SearchableDropdown
       selectedItem={currentSheet?.name}
       items={(sheets ?? []).map((s) => s.name)}
       onValueChange={handleSpreadsheetSelect}
       placeholder={'Select the sheet'}
-      isLoading={isLoading}
     />
   )
 }

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx

@@ -1,3 +1,4 @@
+import { Input } from '@chakra-ui/react'
 import { SearchableDropdown } from 'components/shared/SearchableDropdown'
 import { useMemo } from 'react'
 import { useSpreadsheets } from 'services/integrations'
@@ -23,13 +24,14 @@ export const SpreadsheetsDropdown = ({
     const id = spreadsheets?.find((s) => s.name === name)?.id
     if (id) onSelectSpreadsheetId(id)
   }
+  if (isLoading) return <Input value="Loading..." isDisabled />
+  if (!spreadsheets) return <Input value="No spreadsheets found" isDisabled />
   return (
     <SearchableDropdown
       selectedItem={currentSpreadsheet?.name}
       items={(spreadsheets ?? []).map((s) => s.name)}
       onValueChange={handleSpreadsheetSelect}
       placeholder={'Search for spreadsheet'}
-      isLoading={isLoading}
     />
   )
 }

apps/builder/components/shared/SearchableDropdown.tsx

@@ -7,7 +7,6 @@ import {
   Input,
   PopoverContent,
   Button,
-  Text,
   InputProps,
 } from '@chakra-ui/react'
 import { useState, useRef, useEffect, ChangeEvent } from 'react'
@@ -17,14 +16,12 @@ type Props = {
   selectedItem?: string
   items: string[]
   onValueChange?: (value: string) => void
-  isLoading?: boolean
 } & InputProps
 
 export const SearchableDropdown = ({
   selectedItem,
   items,
   onValueChange,
-  isLoading = false,
   ...inputProps
 }: Props) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
@@ -66,6 +63,7 @@ export const SearchableDropdown = ({
   }, [debouncedInputValue])
 
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isOpen) onOpen()
     setInputValue(e.target.value)
     if (e.target.value === '') {
       setFilteredItems([...items.slice(0, 50)])
@@ -111,7 +109,7 @@ export const SearchableDropdown = ({
           w="inherit"
           shadow="lg"
         >
-          {filteredItems.length > 0 ? (
+          {filteredItems.length > 0 && (
             <>
               {filteredItems.map((item, idx) => {
                 return (
@@ -132,10 +130,6 @@ export const SearchableDropdown = ({
                 )
               })}
             </>
-          ) : (
-            <Text p={4} color="gray.500">
-              {isLoading ? 'Loading...' : 'Not found.'}
-            </Text>
           )}
         </PopoverContent>
       </Popover>