feat(integration): ♿️ Improve feedback on GSheets errors

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

@@ -1,4 +1,4 @@
-import { Input } from '@chakra-ui/react'
+import { Input, Tooltip, useToast } from '@chakra-ui/react'
 import { SearchableDropdown } from 'components/shared/SearchableDropdown'
 import { useMemo } from 'react'
 import { useSpreadsheets } from 'services/integrations'
@@ -14,7 +14,14 @@ export const SpreadsheetsDropdown = ({
   spreadsheetId,
   onSelectSpreadsheetId,
 }: Props) => {
-  const { spreadsheets, isLoading } = useSpreadsheets({ credentialsId })
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+  const { spreadsheets, isLoading } = useSpreadsheets({
+    credentialsId,
+    onError: (e) => toast({ title: e.name, description: e.message }),
+  })
   const currentSpreadsheet = useMemo(
     () => spreadsheets?.find((s) => s.id === spreadsheetId),
     [spreadsheetId, spreadsheets]
@@ -25,7 +32,14 @@ export const SpreadsheetsDropdown = ({
     if (id) onSelectSpreadsheetId(id)
   }
   if (isLoading) return <Input value="Loading..." isDisabled />
-  if (!spreadsheets) return <Input value="No spreadsheets found" isDisabled />
+  if (!spreadsheets || spreadsheets.length === 0)
+    return (
+      <Tooltip label="No spreadsheets found, make sure you have at least one spreadsheet that contains a header row">
+        <span>
+          <Input value="No spreadsheets found" isDisabled />
+        </span>
+      </Tooltip>
+    )
   return (
     <SearchableDropdown
       selectedItem={currentSpreadsheet?.name}

apps/builder/libs/google-sheets.ts

@@ -13,10 +13,11 @@ export const oauth2Client = new OAuth2Client(
 export const getAuthenticatedGoogleClient = async (
   userId: string,
   credentialsId: string
-): Promise<OAuth2Client> => {
+): Promise<OAuth2Client | undefined> => {
   const credentials = (await prisma.credentials.findFirst({
     where: { id: credentialsId, ownerId: userId },
-  })) as CredentialsFromDb
+  })) as CredentialsFromDb | undefined
+  if (!credentials) return
   const data = decrypt(
     credentials.data,
     credentials.iv

apps/builder/pages/api/integrations/google-sheets/spreadsheets.ts

@@ -17,6 +17,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === 'GET') {
     const credentialsId = req.query.credentialsId.toString()
     const auth = await getAuthenticatedGoogleClient(user.id, credentialsId)
+    if (!auth)
+      return res.status(404).send("Couldn't find credentials in database")
     const response = await drive({
       version: 'v3',
       auth,

apps/builder/pages/api/integrations/google-sheets/spreadsheets/[id]/sheets.ts

@@ -19,9 +19,12 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
     const spreadsheetId = req.query.id.toString()
     const doc = new GoogleSpreadsheet(spreadsheetId)
-    doc.useOAuth2Client(
-      await getAuthenticatedGoogleClient(user.id, credentialsId)
-    )
+    const client = await getAuthenticatedGoogleClient(user.id, credentialsId)
+    if (!client)
+      return res
+        .status(404)
+        .send({ message: "Couldn't find credentials in database" })
+    doc.useOAuth2Client(client)
     await doc.loadInfo()
     return res.send({
       sheets: (

apps/viewer/libs/google-sheets.ts

@@ -12,14 +12,14 @@ export const oauth2Client = new OAuth2Client(
 
 export const getAuthenticatedGoogleClient = async (
   credentialsId: string
-): Promise<OAuth2Client> => {
+): Promise<OAuth2Client | undefined> => {
   const credentials = (await prisma.credentials.findFirst({
     where: { id: credentialsId },
   })) as CredentialsFromDb
-  const data = decrypt(
-    credentials.data,
-    credentials.iv
-  ) as GoogleSheetsCredentialsData
+  const data = decrypt(credentials.data, credentials.iv) as
+    | GoogleSheetsCredentialsData
+    | undefined
+  if (!data) return
   oauth2Client.setCredentials(data)
   oauth2Client.on('tokens', updateTokens(credentialsId))
   return oauth2Client

apps/viewer/pages/api/integrations/google-sheets/spreadsheets/[spreadsheetId]/sheets/[sheetId].ts

@@ -23,7 +23,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     )
     if (!extractingColumns) return badRequest(res)
     const doc = new GoogleSpreadsheet(spreadsheetId)
-    doc.useOAuth2Client(await getAuthenticatedGoogleClient(credentialsId))
+    const client = await getAuthenticatedGoogleClient(credentialsId)
+    if (!client)
+      return res.status(404).send("Couldn't find credentials in database")
+    doc.useOAuth2Client(client)
     await doc.loadInfo()
     const sheet = doc.sheetsById[sheetId]
     const rows = await sheet.getRows()
@@ -48,7 +51,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       values: { [key: string]: string }
     }
     const doc = new GoogleSpreadsheet(spreadsheetId)
-    doc.useOAuth2Client(await getAuthenticatedGoogleClient(credentialsId))
+    const auth = await getAuthenticatedGoogleClient(credentialsId)
+    if (!auth)
+      return res.status(404).send("Couldn't find credentials in database")
+    doc.useOAuth2Client(auth)
     await doc.loadInfo()
     const sheet = doc.sheetsById[sheetId]
     await sheet.addRow(values)
@@ -65,7 +71,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       values: { [key: string]: string }
     }
     const doc = new GoogleSpreadsheet(spreadsheetId)
-    doc.useOAuth2Client(await getAuthenticatedGoogleClient(credentialsId))
+    const auth = await getAuthenticatedGoogleClient(credentialsId)
+    if (!auth)
+      return res.status(404).send("Couldn't find credentials in database")
+    doc.useOAuth2Client(auth)
     await doc.loadInfo()
     const sheet = doc.sheetsById[sheetId]
     const rows = await sheet.getRows()