Fix sync statuses on the fe (#7117)

Follows #6685

packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts

@@ -1,11 +1,39 @@
 import { CalendarChannelVisibility } from '~/generated/graphql';
 
+export enum CalendarChannelSyncStatus {
+  NOT_SYNCED = 'NOT_SYNCED',
+  ONGOING = 'ONGOING',
+  ACTIVE = 'ACTIVE',
+  FAILED_INSUFFICIENT_PERMISSIONS = 'FAILED_INSUFFICIENT_PERMISSIONS',
+  FAILED_UNKNOWN = 'FAILED_UNKNOWN',
+}
+
+export enum CalendarChannelSyncStage {
+  FULL_CALENDAR_EVENT_LIST_FETCH_PENDING = 'FULL_CALENDAR_EVENT_LIST_FETCH_PENDING',
+  PARTIAL_CALENDAR_EVENT_LIST_FETCH_PENDING = 'PARTIAL_CALENDAR_EVENT_LIST_FETCH_PENDING',
+  CALENDAR_EVENT_LIST_FETCH_ONGOING = 'CALENDAR_EVENT_LIST_FETCH_ONGOING',
+  CALENDAR_EVENTS_IMPORT_PENDING = 'CALENDAR_EVENTS_IMPORT_PENDING',
+  CALENDAR_EVENTS_IMPORT_ONGOING = 'CALENDAR_EVENTS_IMPORT_ONGOING',
+  FAILED = 'FAILED',
+}
+
+export enum CalendarChannelContactAutoCreationPolicy {
+  AS_PARTICIPANT_AND_ORGANIZER = 'AS_PARTICIPANT_AND_ORGANIZER',
+  AS_PARTICIPANT = 'AS_PARTICIPANT',
+  AS_ORGANIZER = 'AS_ORGANIZER',
+  NONE = 'NONE',
+}
 export type CalendarChannel = {
   id: string;
   handle: string;
-  isContactAutoCreationEnabled?: boolean;
-  isSyncEnabled?: boolean;
+  isContactAutoCreationEnabled: boolean;
+  contactAutoCreationPolicy: CalendarChannelContactAutoCreationPolicy;
+  isSyncEnabled: boolean;
   visibility: CalendarChannelVisibility;
-  syncStatus: string;
+  syncStatus: CalendarChannelSyncStatus;
+  syncStage: CalendarChannelSyncStage;
+  syncCursor: string;
+  syncStageStartedAt: Date;
+  throttleFailureCount: number;
   __typename: 'CalendarChannel';
 };

packages/twenty-front/src/modules/accounts/types/MessageChannel.ts

@@ -6,14 +6,35 @@ export enum MessageChannelContactAutoCreationPolicy {
   NONE = 'NONE',
 }
 
+export enum MessageChannelSyncStatus {
+  NOT_SYNCED = 'NOT_SYNCED',
+  ONGOING = 'ONGOING',
+  ACTIVE = 'ACTIVE',
+  FAILED_INSUFFICIENT_PERMISSIONS = 'FAILED_INSUFFICIENT_PERMISSIONS',
+  FAILED_UNKNOWN = 'FAILED_UNKNOWN',
+}
+
+export enum MessageChannelSyncStage {
+  FULL_MESSAGE_LIST_FETCH_PENDING = 'FULL_MESSAGE_LIST_FETCH_PENDING',
+  PARTIAL_MESSAGE_LIST_FETCH_PENDING = 'PARTIAL_MESSAGE_LIST_FETCH_PENDING',
+  MESSAGE_LIST_FETCH_ONGOING = 'MESSAGE_LIST_FETCH_ONGOING',
+  MESSAGES_IMPORT_PENDING = 'MESSAGES_IMPORT_PENDING',
+  MESSAGES_IMPORT_ONGOING = 'MESSAGES_IMPORT_ONGOING',
+  FAILED = 'FAILED',
+}
+
 export type MessageChannel = {
   id: string;
   handle: string;
-  contactAutoCreationPolicy?: MessageChannelContactAutoCreationPolicy;
+  contactAutoCreationPolicy: MessageChannelContactAutoCreationPolicy;
   excludeNonProfessionalEmails: boolean;
   excludeGroupEmails: boolean;
   isSyncEnabled: boolean;
   visibility: MessageChannelVisibility;
-  syncStatus: string;
+  syncStatus: MessageChannelSyncStatus;
+  syncStage: MessageChannelSyncStage;
+  syncCursor: string;
+  syncStageStartedAt: Date;
+  throttleFailureCount: number;
   __typename: 'MessageChannel';
 };

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

@@ -1,8 +1,9 @@
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
+import { SyncStatus } from '@/settings/accounts/constants/SyncStatus';
+import { computeSyncStatus } from '@/settings/accounts/utils/computeSyncStatus';
 import { Status } from '@/ui/display/status/components/Status';
 import styled from '@emotion/styled';
-import { useMemo } from 'react';
 
 const StyledRowRightContainer = styled.div`
   align-items: center;
@@ -15,39 +16,26 @@ export const SettingsAccountsConnectedAccountsRowRightContainer = ({
 }: {
   account: ConnectedAccount;
 }) => {
-  const mCSyncStatus = account.messageChannels[0]?.syncStatus;
-  const cCSyncStatus = account.calendarChannels[0]?.syncStatus;
+  const messageChannelSyncStatus = account.messageChannels[0]?.syncStatus;
+  const calendarChannelSyncStatus = account.calendarChannels[0]?.syncStatus;
 
-  const status = useMemo(() => {
-    if (mCSyncStatus === 'ACTIVE' && cCSyncStatus === 'ACTIVE') {
-      return 'Synced';
-    } else if (mCSyncStatus === 'NOT_SYNCED' && cCSyncStatus === 'NOT_SYNCED') {
-      return 'Not synced';
-    } else if (mCSyncStatus === 'ONGOING' || cCSyncStatus === 'ONGOING') {
-      return 'Importing';
-    } else if (
-      mCSyncStatus === 'FAILED' ||
-      mCSyncStatus === 'FAILED_INSUFFICIENT_PERMISSIONS' ||
-      cCSyncStatus === 'FAILED' ||
-      cCSyncStatus === 'FAILED_INSUFFICIENT_PERMISSIONS'
-    ) {
-      return 'Failed';
-    }
-    return '';
-  }, [mCSyncStatus, cCSyncStatus]);
+  const status = computeSyncStatus(
+    messageChannelSyncStatus,
+    calendarChannelSyncStatus,
+  );
 
   return (
     <StyledRowRightContainer>
-      {status === 'Failed' && (
+      {status === SyncStatus.FAILED && (
         <Status color="red" text="Sync failed" weight="medium" />
       )}
-      {status === 'Synced' && (
+      {status === SyncStatus.SYNCED && (
         <Status color="green" text="Synced" weight="medium" />
       )}
-      {status === 'Not synced' && (
+      {status === SyncStatus.NOT_SYNCED && (
         <Status color="orange" text="Not synced" weight="medium" />
       )}
-      {status === 'Importing' && (
+      {status === SyncStatus.IMPORTING && (
         <Status
           color="turquoise"
           text="Importing"

packages/twenty-front/src/modules/settings/accounts/constants/SyncStatus.ts

@@ -0,0 +1,6 @@
+export enum SyncStatus {
+  SYNCED = 'SYNCED',
+  FAILED = 'FAILED',
+  NOT_SYNCED = 'NOT_SYNCED',
+  IMPORTING = 'IMPORTING',
+}

packages/twenty-front/src/modules/settings/accounts/utils/__tests__/computeSyncStatus.test.ts

@@ -0,0 +1,87 @@
+import { CalendarChannelSyncStatus } from '@/accounts/types/CalendarChannel';
+import { MessageChannelSyncStatus } from '@/accounts/types/MessageChannel';
+import { SyncStatus } from '@/settings/accounts/constants/SyncStatus';
+import { computeSyncStatus } from '../computeSyncStatus';
+
+describe('computeSyncStatus', () => {
+  test('should return FAILED when both sync statuses are FAILED', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.FAILED_UNKNOWN,
+        CalendarChannelSyncStatus.FAILED_UNKNOWN,
+      ),
+    ).toEqual(SyncStatus.FAILED);
+  });
+
+  test('should return FAILED when message channel sync status is FAILED_UNKNOWN', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.FAILED_UNKNOWN,
+        CalendarChannelSyncStatus.ACTIVE,
+      ),
+    ).toEqual(SyncStatus.FAILED);
+  });
+
+  test('should return FAILED when message channel sync status is FAILED_INSUFFICIENT_PERMISSIONS', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.FAILED_INSUFFICIENT_PERMISSIONS,
+        CalendarChannelSyncStatus.ACTIVE,
+      ),
+    ).toEqual(SyncStatus.FAILED);
+  });
+
+  test('should return FAILED when calendar channel sync status is FAILED_UNKNOWN', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.ACTIVE,
+        CalendarChannelSyncStatus.FAILED_UNKNOWN,
+      ),
+    ).toEqual(SyncStatus.FAILED);
+  });
+
+  test('should return FAILED when calendar channel sync status is FAILED_INSUFFICIENT_PERMISSIONS', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.ACTIVE,
+        CalendarChannelSyncStatus.FAILED_INSUFFICIENT_PERMISSIONS,
+      ),
+    ).toEqual(SyncStatus.FAILED);
+  });
+
+  test('should return IMPORTING when message channel sync status is ONGOING', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.ONGOING,
+        CalendarChannelSyncStatus.ACTIVE,
+      ),
+    ).toEqual(SyncStatus.IMPORTING);
+  });
+
+  test('should return IMPORTING when calendar channel sync status is ONGOING', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.ACTIVE,
+        CalendarChannelSyncStatus.ONGOING,
+      ),
+    ).toEqual(SyncStatus.IMPORTING);
+  });
+
+  test('should return SYNCED when one channel is ACTIVE and the other is NOT_SYNCED', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.NOT_SYNCED,
+        CalendarChannelSyncStatus.ACTIVE,
+      ),
+    ).toEqual(SyncStatus.SYNCED);
+  });
+
+  test('should return SYNCED when one channel is ACTIVE and the other is NOT_SYNCED', () => {
+    expect(
+      computeSyncStatus(
+        MessageChannelSyncStatus.ACTIVE,
+        CalendarChannelSyncStatus.NOT_SYNCED,
+      ),
+    ).toEqual(SyncStatus.SYNCED);
+  });
+});

packages/twenty-front/src/modules/settings/accounts/utils/computeSyncStatus.ts

@@ -0,0 +1,42 @@
+import { CalendarChannelSyncStatus } from '@/accounts/types/CalendarChannel';
+import { MessageChannelSyncStatus } from '@/accounts/types/MessageChannel';
+import { SyncStatus } from '@/settings/accounts/constants/SyncStatus';
+
+export const computeSyncStatus = (
+  messageChannelSyncStatus: MessageChannelSyncStatus,
+  calendarChannelSyncStatus: CalendarChannelSyncStatus,
+) => {
+  if (
+    messageChannelSyncStatus === MessageChannelSyncStatus.FAILED_UNKNOWN ||
+    messageChannelSyncStatus ===
+      MessageChannelSyncStatus.FAILED_INSUFFICIENT_PERMISSIONS ||
+    calendarChannelSyncStatus === CalendarChannelSyncStatus.FAILED_UNKNOWN ||
+    calendarChannelSyncStatus ===
+      CalendarChannelSyncStatus.FAILED_INSUFFICIENT_PERMISSIONS
+  ) {
+    return SyncStatus.FAILED;
+  }
+
+  if (
+    messageChannelSyncStatus === MessageChannelSyncStatus.ONGOING ||
+    calendarChannelSyncStatus === CalendarChannelSyncStatus.ONGOING
+  ) {
+    return SyncStatus.IMPORTING;
+  }
+
+  if (
+    messageChannelSyncStatus === MessageChannelSyncStatus.NOT_SYNCED &&
+    calendarChannelSyncStatus === CalendarChannelSyncStatus.NOT_SYNCED
+  ) {
+    return SyncStatus.NOT_SYNCED;
+  }
+
+  if (
+    messageChannelSyncStatus === MessageChannelSyncStatus.ACTIVE ||
+    calendarChannelSyncStatus === CalendarChannelSyncStatus.ACTIVE
+  ) {
+    return SyncStatus.SYNCED;
+  }
+
+  return SyncStatus.NOT_SYNCED;
+};