fix: Sheet import error when user doesn't have correct permissions for the sheet (#865)

* refactor: better throw error message

* fix: await verify so wa catch the potential error

* fix: catch and display error about varification

* fix: don't block the Authenticate with a spinner

* center spinner

* propper boolean

apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx

@@ -1,9 +1,10 @@
 import { ChangeEvent, useEffect, useState } from 'react';
-import { Button, Input } from '@chakra-ui/react';
+import { Button, Input, Spinner } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { IoShieldCheckmarkOutline } from '@react-icons/all-files/io5/IoShieldCheckmarkOutline';
 
 import { getWorksheetNames } from '../../../../common/api/sheets';
+import { maybeAxiosError } from '../../../../common/api/utils';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import { openLink } from '../../../../common/utils/linkUtils';
 import * as Panel from '../PanelUtils';
@@ -29,7 +30,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
   const sheetId = useSheetStore((state) => state.sheetId);
   const setSheetId = useSheetStore((state) => state.setSheetId);
   const setWorksheets = useSheetStore((state) => state.setWorksheets);
-
+  const patchStepData = useSheetStore((state) => state.patchStepData);
   const authenticationStatus = useSheetStore((state) => state.authenticationStatus);
   const setAuthenticationStatus = useSheetStore((state) => state.setAuthenticationStatus);
 
@@ -91,8 +92,13 @@ export default function GSheetSetup(props: GSheetSetupProps) {
       setAuthenticationStatus(result.authenticated);
       if (result.authenticated !== 'pending') {
         if (result.authenticated == 'authenticated') {
-          const names = await getWorksheetNames(result.sheetId);
-          setWorksheets(names);
+          try {
+            const names = await getWorksheetNames(result.sheetId);
+            setWorksheets(names);
+          } catch (error) {
+            const message = maybeAxiosError(error);
+            patchStepData({ worksheet: { available: false, error: message } });
+          }
         }
         setLoading('');
         return;
@@ -184,6 +190,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
       ) : (
         <Panel.ListGroup>
           <div className={style.buttonRow}>
+            {isAuthenticating && <Spinner />}
             <CopyTag label='Google Auth Key' disabled={!canAuthenticate} size='sm'>
               {authKey ? authKey : 'Upload files to generate Auth Key'}
             </CopyTag>
@@ -192,8 +199,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
               size='sm'
               leftIcon={<IoShieldCheckmarkOutline />}
               onClick={handleAuthenticate}
-              isDisabled={!canAuthenticate || isLoading}
-              isLoading={loading === 'authenticate' || isAuthenticating}
+              isDisabled={!canAuthenticate}
             >
               Authenticate
             </Button>

apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss

@@ -26,6 +26,7 @@
 .buttonRow {
   display: flex;
   gap: 1rem;
+  align-items: center;
   justify-content: end;
 }
 

apps/server/src/services/sheet-service/SheetService.ts

@@ -183,7 +183,7 @@ function verifyConnection(
         pollInterval = null;
       }
 
-      postAction();
+      await postAction();
     } catch (_error) {
       /** we do not handle failure */
     }
@@ -201,15 +201,15 @@ async function verifySheet(
   sheetId = currentSheetId,
   authClient = currentAuthClient,
 ): Promise<{ worksheetOptions: string[] }> {
-  const spreadsheets = await sheets({ version: 'v4', auth: authClient }).spreadsheets.get({
-    spreadsheetId: sheetId,
-    includeGridData: false,
-  });
-
-  if (spreadsheets.status !== 200) {
-    throw new Error(spreadsheets.statusText);
+  try {
+    const spreadsheets = await sheets({ version: 'v4', auth: authClient }).spreadsheets.get({
+      spreadsheetId: sheetId,
+      includeGridData: false,
+    });
+    return { worksheetOptions: spreadsheets.data.sheets.map((i) => i.properties.title) };
+  } catch (error) {
+    throw new Error(`Failed to verify sheet: ${error.message}`);
   }
-  return { worksheetOptions: spreadsheets.data.sheets.map((i) => i.properties.title) };
 }
 
 export async function handleInitialConnection(