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,18 +30,18 @@ export const DropdownList = <T,>({
     onItemSelect(operator)
   }
   return (
-    <>
     <Menu isLazy placement="bottom-end" matchWidth>
       <MenuButton
         as={Button}
         rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
         colorScheme="gray"
-          isTruncated
         justifyContent="space-between"
         textAlign="left"
         {...props}
       >
+        <chakra.span isTruncated display="block">
           {currentItem ?? placeholder}
+        </chakra.span>
       </MenuButton>
       <Portal>
         <MenuList maxW="500px" zIndex={1500}>
@@ -61,6 +62,5 @@ export const DropdownList = <T,>({
         </MenuList>
       </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} />,
-    [sheet.columns]
+      <CellWithValueStack {...props} columns={sheet?.columns ?? []} />,
+    [sheet?.columns]
   )
 
   const ExtractingCellItem = useMemo(
     () => (props: TableListItemProps<ExtractingCell>) =>
-      <CellWithVariableIdStack {...props} columns={sheet.columns} />,
-    [sheet.columns]
+      <CellWithVariableIdStack {...props} 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,