Add stripe connection option (#5372)

- Refactor creation and edition form so it handles stripe integration
and not only postgres
- Add a hook `useIsSettingsIntegrationEnabled` to avoid checking feature
flags everywhere
- Add zod schema for stripe

<img width="250" alt="Capture d’écran 2024-05-13 à 12 41 52"
src="https://github.com/twentyhq/twenty/assets/22936103/a77e7278-5d79-4f95-bddb-ae9ddd1426eb">
<img width="250" alt="Capture d’écran 2024-05-13 à 12 41 59"
src="https://github.com/twentyhq/twenty/assets/22936103/d617dc6a-31a4-43c8-8192-dbfb7157de1c">
<img width="250" alt="Capture d’écran 2024-05-13 à 12 42 08"
src="https://github.com/twentyhq/twenty/assets/22936103/c4e2d0e4-f826-436d-89be-4d1679a27861">

---------

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

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

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { ApolloClient, useApolloClient, 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';
@@ -39,7 +38,16 @@ export const useSyncRemoteTable = () => {
           input,
         },
         awaitRefetchQueries: true,
-        refetchQueries: [getOperationName(GET_MANY_REMOTE_TABLES) ?? ''],
+        refetchQueries: [
+          {
+            query: GET_MANY_REMOTE_TABLES,
+            variables: {
+              input: {
+                id: input.remoteServerId,
+              },
+            },
+          },
+        ],
       });
 
       // TODO: we should return the tables with the columns and store in cache instead of refetching

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

@@ -1,6 +1,5 @@
 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';
@@ -31,7 +30,16 @@ export const useUnsyncRemoteTable = () => {
           input,
         },
         awaitRefetchQueries: true,
-        refetchQueries: [getOperationName(GET_MANY_REMOTE_TABLES) ?? ''],
+        refetchQueries: [
+          {
+            query: GET_MANY_REMOTE_TABLES,
+            variables: {
+              input: {
+                id: input.remoteServerId,
+              },
+            },
+          },
+        ],
       });
 
       await refetchObjectMetadataItems();

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

@@ -2,6 +2,8 @@ export const getForeignDataWrapperType = (databaseKey: string) => {
   switch (databaseKey) {
     case 'postgresql':
       return 'postgres_fdw';
+    case 'stripe':
+      return 'stripe_fdw';
     default:
       return null;
   }