GH-4362 Add syncing status (#4950)

This PR adds a `syncing` status on frontend.

Issue
- #4362

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

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

@@ -6,4 +6,5 @@ export type MessageChannel = {
   isContactAutoCreationEnabled?: boolean;
   isSyncEnabled: boolean;
   visibility: InboxSettingsVisibilityValue;
+  syncStatus: string;
 };

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

@@ -55,11 +55,7 @@ export const SettingsAccountsMessageChannelsListCard = () => {
   } & SettingsAccountsSynchronizationStatusProps)[] = messageChannels.map(
     (messageChannel) => ({
       ...messageChannel,
-      syncStatus: messageChannel.connectedAccount?.authFailedAt
-        ? 'failed'
-        : messageChannel.isSyncEnabled
-          ? 'synced'
-          : 'notSynced',
+      syncStatus: messageChannel.syncStatus,
     }),
   );
 

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

@@ -1,27 +1,24 @@
+import { useGetSyncStatusOptions } from '@/settings/accounts/hooks//useGetSyncStatusOptions';
 import { Status } from '@/ui/display/status/components/Status';
 
 export type SettingsAccountsSynchronizationStatusProps = {
-  syncStatus: 'synced' | 'failed' | 'notSynced';
+  syncStatus: string;
 };
 
 export const SettingsAccountsSynchronizationStatus = ({
   syncStatus,
-}: SettingsAccountsSynchronizationStatusProps) => (
-  <Status
-    color={
-      syncStatus === 'synced'
-        ? 'green'
-        : syncStatus === 'failed'
-          ? 'red'
-          : 'gray'
-    }
-    text={
-      syncStatus === 'synced'
-        ? 'Synced'
-        : syncStatus === 'failed'
-          ? 'Sync failed'
-          : 'Not synced'
-    }
-    weight="medium"
-  />
-);
+}: SettingsAccountsSynchronizationStatusProps) => {
+  const syncStatusOptions = useGetSyncStatusOptions();
+
+  const syncStatusOption = syncStatusOptions?.find(
+    (option) => option.value === syncStatus,
+  );
+
+  return (
+    <Status
+      color={syncStatusOption?.color ?? 'gray'}
+      text={syncStatusOption?.label ?? 'Not synced'}
+      weight="medium"
+    />
+  );
+};

packages/twenty-front/src/modules/settings/accounts/hooks/useGetSyncStatusOptions.ts

@@ -0,0 +1,25 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+
+export const useGetSyncStatusOptions = () => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: CoreObjectNameSingular.MessageChannel,
+  });
+
+  if (isUndefinedOrNull(objectMetadataItem)) {
+    throw new Error('ObjectMetadataItem not found for MessageChannel');
+  }
+
+  const syncStatusMetadata = objectMetadataItem.fields.find(
+    (field) => field.name === 'syncStatus',
+  );
+
+  const syncStatusOptions = syncStatusMetadata?.options;
+
+  if (isUndefinedOrNull(syncStatusMetadata)) {
+    throw new Error('syncStatusMetaData not found for MessageChannel');
+  }
+
+  return syncStatusOptions;
+};