From 2073d8e6e143e45db5313e0bcb8489326a583ca3 Mon Sep 17 00:00:00 2001 From: bosiraphael <71827178+bosiraphael@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:00:52 +0200 Subject: [PATCH] 6446 improve information banner component to make it scale better (#6545) Closes #6446 --- .../information-banner/InformationBanner.tsx | 26 ------------- .../InformationBannerReconnectAccount.tsx | 38 ------------------ .../components/InformationBanner.tsx | 39 +++++++++++++++++++ .../components/InformationBannerWrapper.tsx | 21 ++++++++++ ...tionBannerReconnectAccountEmailAliases.tsx | 26 +++++++++++++ ...econnectAccountInsufficientPermissions.tsx | 27 +++++++++++++ .../enums/InformationBannerKeys.enum.ts | 4 ++ .../hooks/useAccountToReconnect.ts | 24 ++++++++++++ .../components/RecordIndexContainer.tsx | 6 +-- .../ui/layout/page/SubMenuTopBarContainer.tsx | 4 +- .../engine/core-modules/user/user.resolver.ts | 3 +- .../calendar-channel-sync-status.service.ts | 12 +++--- .../services/accounts-to-reconnect.service.ts | 30 ++++++++++---- .../accounts-to-reconnect-key-value.type.ts | 9 +++++ .../types/connected-account-key-value.type.ts | 7 ---- .../messaging-channel-sync-status.service.ts | 12 +++--- 16 files changed, 192 insertions(+), 96 deletions(-) delete mode 100644 packages/twenty-front/src/modules/information-banner/InformationBanner.tsx delete mode 100644 packages/twenty-front/src/modules/information-banner/InformationBannerReconnectAccount.tsx create mode 100644 packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx create mode 100644 packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx create mode 100644 packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases.tsx create mode 100644 packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions.tsx create mode 100644 packages/twenty-front/src/modules/information-banner/enums/InformationBannerKeys.enum.ts create mode 100644 packages/twenty-front/src/modules/information-banner/hooks/useAccountToReconnect.ts create mode 100644 packages/twenty-server/src/modules/connected-account/types/accounts-to-reconnect-key-value.type.ts delete mode 100644 packages/twenty-server/src/modules/connected-account/types/connected-account-key-value.type.ts diff --git a/packages/twenty-front/src/modules/information-banner/InformationBanner.tsx b/packages/twenty-front/src/modules/information-banner/InformationBanner.tsx deleted file mode 100644 index 692774397..000000000 --- a/packages/twenty-front/src/modules/information-banner/InformationBanner.tsx +++ /dev/null @@ -1,26 +0,0 @@ -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 && ( - - )} - - ); -}; diff --git a/packages/twenty-front/src/modules/information-banner/InformationBannerReconnectAccount.tsx b/packages/twenty-front/src/modules/information-banner/InformationBannerReconnectAccount.tsx deleted file mode 100644 index 94064100b..000000000 --- a/packages/twenty-front/src/modules/information-banner/InformationBannerReconnectAccount.tsx +++ /dev/null @@ -1,38 +0,0 @@ -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({ - objectNameSingular: CoreObjectNameSingular.ConnectedAccount, - objectRecordId: accountIdToReconnect, - }); - - const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth(); - - if (!accountToReconnect?.record) { - return null; - } - - return ( - - Sync lost with mailbox {accountToReconnect?.record?.handle}. Please - reconnect for updates: -