[calendar] Fix calendar sync status (twentyhq#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

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>

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>

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

@@ -3,17 +3,23 @@ import { Status } from '@/ui/display/status/components/Status';
 
 export type SettingsAccountsSynchronizationStatusProps = {
   syncStatus: string;
+  isSyncEnabled?: boolean;
 };
 
 export const SettingsAccountsSynchronizationStatus = ({
   syncStatus,
+  isSyncEnabled,
 }: SettingsAccountsSynchronizationStatusProps) => {
   const syncStatusOptions = useGetSyncStatusOptions();
 
   const syncStatusOption = syncStatusOptions?.find(
     (option) => option.value === syncStatus,
   );
 
+  if (!isSyncEnabled) {
+    return <Status color="gray" text="Not synced" weight="medium" />;
+  }
+
   return (
     <Status
       color={syncStatusOption?.color ?? 'gray'}