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/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"
+    />
+  );
+};