From 205c3477205ef6731d98121b6db34fa55eca76a8 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 1 Mar 2022 12:02:52 +0100
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E2=99=BF=EF=B8=8F=20Better=20G?=
 =?UTF-8?q?sheets=20dropdowns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx |  5 ++++-
 .../GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx   |  4 +++-
 apps/builder/components/shared/SearchableDropdown.tsx  | 10 ++--------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx
index 3dc82d04e..cc6702895 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx
+++ b/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}
     />
   )
 }
diff --git a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx b/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx
index 63a8f9953..8b6dd5d27 100644
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx
+++ b/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}
     />
   )
 }
diff --git a/apps/builder/components/shared/SearchableDropdown.tsx b/apps/builder/components/shared/SearchableDropdown.tsx
index c9d1ac8fe..dce05939f 100644
--- a/apps/builder/components/shared/SearchableDropdown.tsx
+++ b/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>