From 2a0c74ab0f4b57d115db3dfb135ceef91f5c52b2 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Fri, 3 May 2024 15:32:34 +0200
Subject: [PATCH] [calendar] Fix calendar sync status (#5272)

## Context
There is no calendarChannel syncStatus column compared to the
messageChannel table. In the meantime, we are trying to infer its status
based on the fact that the connection hasn't failed and the sync is
enabled
---
 .../SettingsAccountsCalendarChannelsListCard.tsx    | 13 +++++++++----
 .../SettingsAccountsMessageChannelsListCard.tsx     |  1 +
 .../SettingsAccountsSynchronizationStatus.tsx       |  6 ++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
index 06ed53981..e00f32398 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
@@ -6,7 +6,9 @@ import { IconChevronRight, IconGoogleCalendar } from 'twenty-ui';
 import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import {
@@ -25,6 +27,9 @@ const StyledRowRightContainer = styled.div`
 export const SettingsAccountsCalendarChannelsListCard = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+  });
 
   const { records: accounts, loading: accountsLoading } =
     useFindManyRecords<ConnectedAccount>({
@@ -49,6 +54,7 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
           in: accounts.map((account) => account.id),
         },
       },
+      recordGqlFields: generateDepthOneRecordGqlFields({ objectMetadataItem }),
     });
 
   if (!calendarChannels.length) {
@@ -61,10 +67,8 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
     (calendarChannel) => ({
       ...calendarChannel,
       syncStatus: calendarChannel.connectedAccount?.authFailedAt
-        ? 'failed'
-        : calendarChannel.isSyncEnabled
-          ? 'synced'
-          : 'notSynced',
+        ? 'FAILED'
+        : 'SUCCEEDED',
     }),
   );
 
@@ -81,6 +85,7 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
         <StyledRowRightContainer>
           <SettingsAccountsSynchronizationStatus
             syncStatus={calendarChannel.syncStatus}
+            isSyncEnabled={calendarChannel.isSyncEnabled}
           />
           <LightIconButton Icon={IconChevronRight} accent="tertiary" />
         </StyledRowRightContainer>
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
index f3a08a0d0..addc376b4 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@@ -76,6 +76,7 @@ export const SettingsAccountsMessageChannelsListCard = () => {
         <StyledRowRightContainer>
           <SettingsAccountsSynchronizationStatus
             syncStatus={messageChannel.syncStatus}
+            isSyncEnabled={messageChannel.isSyncEnabled}
           />
           <LightIconButton Icon={IconChevronRight} accent="tertiary" />
         </StyledRowRightContainer>
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
index c859ac586..b0f59f6a4 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
@@ -3,10 +3,12 @@ import { Status } from '@/ui/display/status/components/Status';
 
 export type SettingsAccountsSynchronizationStatusProps = {
   syncStatus: string;
+  isSyncEnabled?: boolean;
 };
 
 export const SettingsAccountsSynchronizationStatus = ({
   syncStatus,
+  isSyncEnabled,
 }: SettingsAccountsSynchronizationStatusProps) => {
   const syncStatusOptions = useGetSyncStatusOptions();
 
@@ -14,6 +16,10 @@ export const SettingsAccountsSynchronizationStatus = ({
     (option) => option.value === syncStatus,
   );
 
+  if (!isSyncEnabled) {
+    return <Status color="gray" text="Not synced" weight="medium" />;
+  }
+
   return (
     <Status
       color={syncStatusOption?.color ?? 'gray'}