Minor refacto and fixes on Remotes updates (#5438)

In this PR

- Code refactoring
- v0 of adding "updates available" info in Connection sync status
<img width="835" alt="Capture d’écran 2024-05-16 à 17 02 07"
src="https://github.com/twentyhq/twenty/assets/51697796/9674d3ca-bed2-4520-a5a6-ba37bc242d06">

- fix distant table columns with not-camel case names are always
considered as new

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus.tsx

@@ -25,13 +25,23 @@ export const SettingsIntegrationDatabaseConnectionSyncStatus = ({
     (table) => table.status === RemoteTableStatus.Synced,
   );
 
+  const updatesAvailable = tables.some(
+    (table) =>
+      table.schemaPendingUpdates?.length &&
+      table.schemaPendingUpdates.length > 0,
+  );
+
   return (
     <Status
-      color="green"
+      color={updatesAvailable ? 'yellow' : 'green'}
       text={
         syncedTables.length === 1
-          ? `1 tracked table`
-          : `${syncedTables.length} tracked tables`
+          ? `1 tracked table${
+              updatesAvailable ? ' (with pending schema updates)' : ''
+            }`
+          : `${syncedTables.length} tracked tables${
+              updatesAvailable ? ' (with pending schema updates)' : ''
+            }`
       }
     />
   );

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard.tsx

@@ -7,9 +7,9 @@ import { useUnsyncRemoteTable } from '@/databases/hooks/useUnsyncRemoteTable';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsIntegrationRemoteTableSyncStatusToggle } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle';
 import {
+  DistantTableUpdate,
   RemoteTable,
   RemoteTableStatus,
-  TableUpdate,
 } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 
@@ -39,20 +39,22 @@ const StyledText = styled.h3`
   margin: 0;
 `;
 
-const getTableUpdatesText = (schemaPendingUpdates: TableUpdate[]) => {
-  if (schemaPendingUpdates.includes(TableUpdate.TableDeleted)) {
+const getDistantTableUpdatesText = (
+  schemaPendingUpdates: DistantTableUpdate[],
+) => {
+  if (schemaPendingUpdates.includes(DistantTableUpdate.TableDeleted)) {
     return 'Table has been deleted';
   }
   if (
-    schemaPendingUpdates.includes(TableUpdate.ColumnsAdded) &&
-    schemaPendingUpdates.includes(TableUpdate.ColumnsDeleted)
+    schemaPendingUpdates.includes(DistantTableUpdate.ColumnsAdded) &&
+    schemaPendingUpdates.includes(DistantTableUpdate.ColumnsDeleted)
   ) {
     return 'Columns have been added and other deleted';
   }
-  if (schemaPendingUpdates.includes(TableUpdate.ColumnsAdded)) {
+  if (schemaPendingUpdates.includes(DistantTableUpdate.ColumnsAdded)) {
     return 'Columns have been added';
   }
-  if (schemaPendingUpdates.includes(TableUpdate.ColumnsDeleted)) {
+  if (schemaPendingUpdates.includes(DistantTableUpdate.ColumnsDeleted)) {
     return 'Columns have been deleted';
   }
   return null;
@@ -71,7 +73,7 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
       ...table,
       id: table.name,
       updatesText: table.schemaPendingUpdates
-        ? getTableUpdatesText(table.schemaPendingUpdates)
+        ? getDistantTableUpdatesText(table.schemaPendingUpdates)
         : null,
     })),
   );

packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts

@@ -42,7 +42,6 @@ export const useDatabaseConnection = () => {
   const { tables } = useGetDatabaseConnectionTables({
     connectionId,
     skip: !connection,
-    refreshData: true,
   });
 
   return { connection, integration, databaseKey, tables };