Fix invalid token after credentials change (#4717)

- If sync fails we set authFailedAt
- This information is displayed in the frontend in accounts with a `Sync
Failed` pill
- The user can reconnect his account in the dropdown menu
- A new OAuth flow is triggered
- The account is synced

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -1,9 +1,10 @@
 import { useNavigate } from 'react-router-dom';
-import { IconDotsVertical, IconMail, IconTrash } from 'twenty-ui';
+import { IconDotsVertical, IconMail, IconRefresh, IconTrash } from 'twenty-ui';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -12,12 +13,12 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsAccountsRowDropdownMenuProps = {
-  item: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
+  account: ConnectedAccount;
   className?: string;
 };
 
 export const SettingsAccountsRowDropdownMenu = ({
-  item: account,
+  account,
   className,
 }: SettingsAccountsRowDropdownMenuProps) => {
   const dropdownId = `settings-account-row-${account.id}`;
@@ -29,6 +30,8 @@ export const SettingsAccountsRowDropdownMenu = ({
     objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
   });
 
+  const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
+
   return (
     <Dropdown
       dropdownId={dropdownId}
@@ -51,6 +54,16 @@ export const SettingsAccountsRowDropdownMenu = ({
                 closeDropdown();
               }}
             />
+            {account.authFailedAt && (
+              <MenuItem
+                LeftIcon={IconRefresh}
+                text="Reconnect"
+                onClick={() => {
+                  triggerGoogleApisOAuth();
+                  closeDropdown();
+                }}
+              />
+            )}
             <MenuItem
               accent="danger"
               LeftIcon={IconTrash}