[FE] Update remote table schema + refactor Tables list (#5548)

Closes #5062.

Refactoring tables list to avoid rendering all toggles on each sync or
schema update while using fresh data:
- introducing id for RemoteTables in apollo cache
- manually updating the cache for the record that was updated after a
sync or schema update instead of fetching all tables again

packages/twenty-front/src/modules/databases/graphql/mutations/syncRemoteTableSchemaChanges.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+import { REMOTE_TABLE_FRAGMENT } from '@/databases/graphql/fragments/remoteTableFragment';
+
+export const SYNC_REMOTE_TABLE_SCHEMA_CHANGES = gql`
+  ${REMOTE_TABLE_FRAGMENT}
+  mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {
+    syncRemoteTableSchemaChanges(input: $input) {
+      ...RemoteTableFields
+    }
+  }
+`;

packages/twenty-front/src/modules/databases/hooks/useSyncRemoteTable.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { ApolloClient, useApolloClient, useMutation } from '@apollo/client';
 
 import { SYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/syncRemoteTable';
-import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
+import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
 import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -12,6 +12,7 @@ import {
   SyncRemoteTableMutation,
   SyncRemoteTableMutationVariables,
 } from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';
 
 export const useSyncRemoteTable = () => {
   const apolloMetadataClient = useApolloMetadataClient();
@@ -23,7 +24,6 @@ export const useSyncRemoteTable = () => {
   const { findManyRecordsQuery: findManyViewsQuery } = useFindManyRecordsQuery({
     objectNameSingular: CoreObjectNameSingular.View,
   });
-
   const [mutate] = useMutation<
     SyncRemoteTableMutation,
     SyncRemoteTableMutationVariables
@@ -37,20 +37,19 @@ export const useSyncRemoteTable = () => {
         variables: {
           input,
         },
-        awaitRefetchQueries: true,
-        refetchQueries: [
-          {
-            query: GET_MANY_REMOTE_TABLES,
-            variables: {
-              input: {
-                id: input.remoteServerId,
+        update: (cache, { data }) => {
+          if (isDefined(data)) {
+            modifyRemoteTableFromCache({
+              cache: cache,
+              remoteTableName: input.name,
+              fieldModifiers: {
+                status: () => data.syncRemoteTable.status,
               },
-            },
-          },
-        ],
+            });
+          }
+        },
       });
 
-      // TODO: we should return the tables with the columns and store in cache instead of refetching
       await refetchObjectMetadataItems();
       await apolloClient.query({
         query: findManyViewsQuery,

packages/twenty-front/src/modules/databases/hooks/useSyncRemoteTableSchemaChanges.ts

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { ApolloClient, useMutation } from '@apollo/client';
+
+import { SYNC_REMOTE_TABLE_SCHEMA_CHANGES } from '@/databases/graphql/mutations/syncRemoteTableSchemaChanges';
+import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
+import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import {
+  RemoteTableInput,
+  SyncRemoteTableSchemaChangesMutation,
+  SyncRemoteTableSchemaChangesMutationVariables,
+} from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';
+
+export const useSyncRemoteTableSchemaChanges = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate, mutationInformation] = useMutation<
+    SyncRemoteTableSchemaChangesMutation,
+    SyncRemoteTableSchemaChangesMutationVariables
+  >(SYNC_REMOTE_TABLE_SCHEMA_CHANGES, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const syncRemoteTableSchemaChanges = useCallback(
+    async (input: RemoteTableInput) => {
+      const remoteTable = await mutate({
+        variables: {
+          input,
+        },
+        update: (cache, { data }) => {
+          if (isDefined(data)) {
+            modifyRemoteTableFromCache({
+              cache: cache,
+              remoteTableName: input.name,
+              fieldModifiers: {
+                schemaPendingUpdates: () =>
+                  data.syncRemoteTableSchemaChanges.schemaPendingUpdates || [],
+              },
+            });
+          }
+        },
+      });
+
+      return remoteTable;
+    },
+    [mutate],
+  );
+
+  return {
+    syncRemoteTableSchemaChanges,
+    isLoading: mutationInformation.loading,
+  };
+};

packages/twenty-front/src/modules/databases/hooks/useUnsyncRemoteTable.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { ApolloClient, useMutation } from '@apollo/client';
 
 import { UNSYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/unsyncRemoteTable';
-import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
+import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
 import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
 import {
@@ -10,6 +10,7 @@ import {
   UnsyncRemoteTableMutation,
   UnsyncRemoteTableMutationVariables,
 } from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';
 
 export const useUnsyncRemoteTable = () => {
   const apolloMetadataClient = useApolloMetadataClient();
@@ -29,17 +30,17 @@ export const useUnsyncRemoteTable = () => {
         variables: {
           input,
         },
-        awaitRefetchQueries: true,
-        refetchQueries: [
-          {
-            query: GET_MANY_REMOTE_TABLES,
-            variables: {
-              input: {
-                id: input.remoteServerId,
+        update: (cache, { data }) => {
+          if (isDefined(data)) {
+            modifyRemoteTableFromCache({
+              cache: cache,
+              remoteTableName: input.name,
+              fieldModifiers: {
+                status: () => data.unsyncRemoteTable.status,
               },
-            },
-          },
-        ],
+            });
+          }
+        },
       });
 
       await refetchObjectMetadataItems();

packages/twenty-front/src/modules/databases/utils/modifyRemoteTableFromCache.ts

@@ -0,0 +1,22 @@
+import { ApolloCache } from '@apollo/client';
+import { Modifiers } from '@apollo/client/cache';
+
+import { RemoteTable } from '~/generated-metadata/graphql';
+
+export const modifyRemoteTableFromCache = ({
+  cache,
+  fieldModifiers,
+  remoteTableName,
+}: {
+  cache: ApolloCache<object>;
+  fieldModifiers: Modifiers<RemoteTable>;
+  remoteTableName: string;
+}) => {
+  const remoteTableCacheId = `RemoteTable:{"name":"${remoteTableName}"}`;
+
+  cache.modify({
+    id: remoteTableCacheId,
+    fields: fieldModifiers,
+    optimistic: true,
+  });
+};