feat(editor): ♿️ Show Google Sheets detail

apps/builder/components/shared/CredentialsDropdown.tsx

@@ -43,8 +43,6 @@ export const CredentialsDropdown = ({
   })
   const { credentials, mutate } = useCredentials({
     userId: user?.id,
-    onError: (error) =>
-      toast({ title: error.name, description: error.message }),
   })
   const [isDeleting, setIsDeleting] = useState<string>()
 

apps/builder/components/shared/DropdownList.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  chakra,
   Menu,
   MenuButton,
   MenuButtonProps,
@@ -29,38 +30,37 @@ export const DropdownList = <T,>({
     onItemSelect(operator)
   }
   return (
-    <>
+    <Menu isLazy placement="bottom-end" matchWidth>
-      <Menu isLazy placement="bottom-end" matchWidth>
+      <MenuButton
-        <MenuButton
+        as={Button}
-          as={Button}
+        rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
-          rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
+        colorScheme="gray"
-          colorScheme="gray"
+        justifyContent="space-between"
-          isTruncated
+        textAlign="left"
-          justifyContent="space-between"
+        {...props}
-          textAlign="left"
+      >
-          {...props}
+        <chakra.span isTruncated display="block">
-        >
           {currentItem ?? placeholder}
-        </MenuButton>
+        </chakra.span>
-        <Portal>
+      </MenuButton>
-          <MenuList maxW="500px" zIndex={1500}>
+      <Portal>
-            <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+        <MenuList maxW="500px" zIndex={1500}>
-              {items.map((item) => (
+          <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
-                <MenuItem
+            {items.map((item) => (
-                  key={item as unknown as string}
+              <MenuItem
-                  maxW="500px"
+                key={item as unknown as string}
-                  overflow="hidden"
+                maxW="500px"
-                  whiteSpace="nowrap"
+                overflow="hidden"
-                  textOverflow="ellipsis"
+                whiteSpace="nowrap"
-                  onClick={handleMenuItemClick(item)}
+                textOverflow="ellipsis"
-                >
+                onClick={handleMenuItemClick(item)}
-                  {item}
+              >
-                </MenuItem>
+                {item}
-              ))}
+              </MenuItem>
-            </Stack>
+            ))}
-          </MenuList>
+          </Stack>
-        </Portal>
+        </MenuList>
-      </Menu>
+      </Portal>
-    </>
+    </Menu>
   )
 }

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

@@ -18,7 +18,7 @@ export const CellWithValueStack = ({
     onItemChange({ ...item, value })
   }
   return (
-    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px" w="full">
       <DropdownList<string>
         currentItem={item.column}
         onItemSelect={handleColumnSelect}

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

@@ -125,7 +125,7 @@ export const GoogleSheetsSettingsBody = ({
             />
           </>
         )}
-      {sheet && 'action' in options && (
+      {'action' in options && (
         <ActionOptions
           options={options}
           sheet={sheet}
@@ -145,7 +145,7 @@ const ActionOptions = ({
     | GoogleSheetsGetOptions
     | GoogleSheetsInsertRowOptions
     | GoogleSheetsUpdateRowOptions
-  sheet: Sheet
+  sheet?: Sheet
   onOptionsChange: (options: GoogleSheetsOptions) => void
 }) => {
   const handleInsertColumnsChange = (cellsToInsert: Cell[]) =>
@@ -162,14 +162,14 @@ const ActionOptions = ({
 
   const UpdatingCellItem = useMemo(
     () => (props: TableListItemProps<Cell>) =>
-      <CellWithValueStack {...props} columns={sheet.columns} />,
+      <CellWithValueStack {...props} columns={sheet?.columns ?? []} />,
-    [sheet.columns]
+    [sheet?.columns]
   )
 
   const ExtractingCellItem = useMemo(
     () => (props: TableListItemProps<ExtractingCell>) =>
-      <CellWithVariableIdStack {...props} columns={sheet.columns} />,
+      <CellWithVariableIdStack {...props} columns={sheet?.columns ?? []} />,
-    [sheet.columns]
+    [sheet?.columns]
   )
 
   switch (options.action) {
@@ -187,7 +187,7 @@ const ActionOptions = ({
         <Stack>
           <Text>Row to select</Text>
           <CellWithValueStack
-            columns={sheet.columns}
+            columns={sheet?.columns ?? []}
             item={options.referenceCell ?? { id: 'reference' }}
             onItemChange={handleReferenceCellChange}
           />
@@ -205,7 +205,7 @@ const ActionOptions = ({
         <Stack>
           <Text>Row to select</Text>
           <CellWithValueStack
-            columns={sheet.columns}
+            columns={sheet?.columns ?? []}
             item={options.referenceCell ?? { id: 'reference' }}
             onItemChange={handleReferenceCellChange}
           />

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

@@ -1,4 +1,4 @@
-import { Input, Tooltip, useToast } from '@chakra-ui/react'
+import { Input, Tooltip } from '@chakra-ui/react'
 import { SearchableDropdown } from 'components/shared/SearchableDropdown'
 import { useMemo } from 'react'
 import { useSpreadsheets } from 'services/integrations'
@@ -14,15 +14,8 @@ export const SpreadsheetsDropdown = ({
   spreadsheetId,
   onSelectSpreadsheetId,
 }: Props) => {
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
   const { spreadsheets, isLoading } = useSpreadsheets({
     credentialsId,
-    onError: (e) =>
-      !toast.isActive('spreadsheets') &&
-      toast({ id: 'spreadsheets', title: e.name, description: e.message }),
   })
   const currentSpreadsheet = useMemo(
     () => spreadsheets?.find((s) => s.id === spreadsheetId),

apps/builder/services/user/credentials.ts

@@ -8,13 +8,13 @@ export const useCredentials = ({
   onError,
 }: {
   userId?: string
-  onError: (error: Error) => void
+  onError?: (error: Error) => void
 }) => {
   const { data, error, mutate } = useSWR<{ credentials: Credentials[] }, Error>(
     userId ? `/api/users/${userId}/credentials` : null,
     fetcher
   )
-  if (error) onError(error)
+  if (error && onError) onError(error)
   return {
     credentials: data?.credentials ?? [],
     isLoading: !error && !data,