5899 display a banner to alert users which need to reconnect their account (#6301)

Closes #5899

<img width="1280" alt="Index - banner"
src="https://github.com/twentyhq/twenty/assets/71827178/313cf20d-eb34-496a-8c7c-7589fbd55954">

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/information-banner/InformationBanner.tsx

@@ -0,0 +1,26 @@
+import { currentUserState } from '@/auth/states/currentUserState';
+import { InformationBannerAccountToReconnect } from '@/information-banner/InformationBannerReconnectAccount';
+import { useRecoilValue } from 'recoil';
+
+export enum InformationBannerKeys {
+  ACCOUNTS_TO_RECONNECT = 'ACCOUNTS_TO_RECONNECT',
+}
+
+export const InformationBanner = () => {
+  const currentUser = useRecoilValue(currentUserState);
+
+  const userVars = currentUser?.userVars;
+
+  const firstAccountIdToReconnect =
+    userVars?.[InformationBannerKeys.ACCOUNTS_TO_RECONNECT]?.[0];
+
+  return (
+    <>
+      {firstAccountIdToReconnect && (
+        <InformationBannerAccountToReconnect
+          accountIdToReconnect={firstAccountIdToReconnect}
+        />
+      )}
+    </>
+  );
+};

packages/twenty-front/src/modules/information-banner/InformationBannerReconnectAccount.tsx

@@ -0,0 +1,38 @@
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
+import { Button } from '@/ui/input/button/components/Button';
+import { Banner, IconRefresh } from 'twenty-ui';
+
+export const InformationBannerAccountToReconnect = ({
+  accountIdToReconnect,
+}: {
+  accountIdToReconnect: string;
+}) => {
+  const accountToReconnect = useFindOneRecord<ConnectedAccount>({
+    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
+    objectRecordId: accountIdToReconnect,
+  });
+
+  const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
+
+  if (!accountToReconnect?.record) {
+    return null;
+  }
+
+  return (
+    <Banner>
+      Sync lost with mailbox {accountToReconnect?.record?.handle}. Please
+      reconnect for updates:
+      <Button
+        variant="secondary"
+        title="Reconnect"
+        Icon={IconRefresh}
+        size="small"
+        inverted
+        onClick={() => triggerGoogleApisOAuth()}
+      />
+    </Banner>
+  );
+};