Sync table from frontend (#4894)

This PR:
- separates the existing updateSyncStatus endpoint into 2 endpoints
- creates mutations and hooks that will call those endpoints
- trigger the hook on toggle
- removes form logic and add a separated component for toggling

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/databases/graphql/fragments/remoteTableFragment.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const REMOTE_TABLE_FRAGMENT = gql`
+  fragment RemoteTableFields on RemoteTable {
+    name
+    schema
+    status
+  }
+`;

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

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

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

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

packages/twenty-front/src/modules/databases/graphql/queries/findManyDatabaseConnectionTables.ts

@@ -1,11 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_MANY_DATABASE_CONNECTION_TABLES = gql`
-  query GetManyDatabaseConnectionTables($input: RemoteServerIdInput!) {
-    findAvailableRemoteTablesByServerId(input: $input) {
-      name
-      schema
-      status
-    }
-  }
-`;

packages/twenty-front/src/modules/databases/graphql/queries/findManyRemoteTables.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+import { REMOTE_TABLE_FRAGMENT } from '@/databases/graphql/fragments/remoteTableFragment';
+
+export const GET_MANY_REMOTE_TABLES = gql`
+  ${REMOTE_TABLE_FRAGMENT}
+  query GetManyRemoteTables($input: RemoteServerIdInput!) {
+    findAvailableRemoteTablesByServerId(input: $input) {
+      ...RemoteTableFields
+    }
+  }
+`;

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

@@ -1,10 +1,10 @@
 import { useQuery } from '@apollo/client';
 
-import { GET_MANY_DATABASE_CONNECTION_TABLES } from '@/databases/graphql/queries/findManyDatabaseConnectionTables';
+import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
 import {
-  GetManyDatabaseConnectionTablesQuery,
-  GetManyDatabaseConnectionTablesQueryVariables,
+  GetManyRemoteTablesQuery,
+  GetManyRemoteTablesQueryVariables,
 } from '~/generated-metadata/graphql';
 
 type UseGetDatabaseConnectionTablesParams = {
@@ -19,9 +19,9 @@ export const useGetDatabaseConnectionTables = ({
   const apolloMetadataClient = useApolloMetadataClient();
 
   const { data } = useQuery<
-    GetManyDatabaseConnectionTablesQuery,
-    GetManyDatabaseConnectionTablesQueryVariables
-  >(GET_MANY_DATABASE_CONNECTION_TABLES, {
+    GetManyRemoteTablesQuery,
+    GetManyRemoteTablesQueryVariables
+  >(GET_MANY_REMOTE_TABLES, {
     client: apolloMetadataClient ?? undefined,
     skip: skip || !apolloMetadataClient,
     variables: {

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

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { ApolloClient, useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import { SYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/syncRemoteTable';
+import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
+import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import {
+  RemoteTableInput,
+  SyncRemoteTableMutation,
+  SyncRemoteTableMutationVariables,
+} from '~/generated-metadata/graphql';
+
+export const useSyncRemoteTable = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate] = useMutation<
+    SyncRemoteTableMutation,
+    SyncRemoteTableMutationVariables
+  >(SYNC_REMOTE_TABLE, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const syncRemoteTable = useCallback(
+    async (input: RemoteTableInput) => {
+      return await mutate({
+        variables: {
+          input,
+        },
+        awaitRefetchQueries: true,
+        refetchQueries: [getOperationName(GET_MANY_REMOTE_TABLES) ?? ''],
+      });
+    },
+    [mutate],
+  );
+
+  return {
+    syncRemoteTable,
+  };
+};

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

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { ApolloClient, useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import { UNSYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/unsyncRemoteTable';
+import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
+import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import {
+  RemoteTableInput,
+  UnsyncRemoteTableMutation,
+  UnsyncRemoteTableMutationVariables,
+} from '~/generated-metadata/graphql';
+
+export const useUnsyncRemoteTable = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate] = useMutation<
+    UnsyncRemoteTableMutation,
+    UnsyncRemoteTableMutationVariables
+  >(UNSYNC_REMOTE_TABLE, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const unsyncRemoteTable = useCallback(
+    async (input: RemoteTableInput) => {
+      return await mutate({
+        variables: {
+          input,
+        },
+        awaitRefetchQueries: true,
+        refetchQueries: [getOperationName(GET_MANY_REMOTE_TABLES) ?? ''],
+      });
+    },
+    [mutate],
+  );
+
+  return {
+    unsyncRemoteTable,
+  };
+};