Add new database connection (#4837)

Closes https://github.com/twentyhq/twenty/issues/4555

<img width="593" alt="Capture d’écran 2024-04-05 à 11 54 28"
src="https://github.com/twentyhq/twenty/assets/22936103/e6021417-bc78-460b-adf6-834330bbd894">

Connect the existing for with the backend so we can now create database
connections.

---------

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

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

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_ONE_DATABASE_CONNECTION = gql`
+  mutation createServer($input: CreateRemoteServerInput!) {
+    createOneRemoteServer(input: $input) {
+      id
+      foreignDataWrapperId
+      foreignDataWrapperOptions
+      foreignDataWrapperType
+    }
+  }
+`;

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

@@ -0,0 +1,38 @@
+import { ApolloClient, useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import { CREATE_ONE_DATABASE_CONNECTION } from '@/databases/graphql/mutations/createOneDatabaseConnection';
+import { GET_MANY_DATABASE_CONNECTIONS } from '@/databases/graphql/queries/findManyDatabaseConnections';
+import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import {
+  CreateRemoteServerInput,
+  CreateServerMutation,
+  CreateServerMutationVariables,
+} from '~/generated-metadata/graphql';
+
+export const useCreateOneDatabaseConnection = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate] = useMutation<
+    CreateServerMutation,
+    CreateServerMutationVariables
+  >(CREATE_ONE_DATABASE_CONNECTION, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const createOneDatabaseConnection = async (
+    input: CreateRemoteServerInput,
+  ) => {
+    return await mutate({
+      variables: {
+        input,
+      },
+      awaitRefetchQueries: true,
+      refetchQueries: [getOperationName(GET_MANY_DATABASE_CONNECTIONS) ?? ''],
+    });
+  };
+
+  return {
+    createOneDatabaseConnection,
+  };
+};

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

@@ -1,6 +1,7 @@
 import { useQuery } from '@apollo/client';
 
 import { GET_MANY_DATABASE_CONNECTIONS } from '@/databases/graphql/queries/findManyDatabaseConnections';
+import { getForeignDataWrapperType } from '@/databases/utils/getForeignDataWrapperType';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
 import {
   GetManyDatabaseConnectionsQuery,
@@ -17,16 +18,17 @@ export const useGetDatabaseConnections = ({
   skip,
 }: UseGetDatabaseConnectionsParams) => {
   const apolloMetadataClient = useApolloMetadataClient();
+  const foreignDataWrapperType = getForeignDataWrapperType(databaseKey);
 
   const { data } = useQuery<
     GetManyDatabaseConnectionsQuery,
     GetManyDatabaseConnectionsQueryVariables
   >(GET_MANY_DATABASE_CONNECTIONS, {
     client: apolloMetadataClient ?? undefined,
-    skip: skip || !apolloMetadataClient || databaseKey !== 'postgresql',
+    skip: skip || !apolloMetadataClient || !foreignDataWrapperType,
     variables: {
       input: {
-        foreignDataWrapperType: 'postgres_fdw',
+        foreignDataWrapperType: foreignDataWrapperType || '',
       },
     },
   });

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

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

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionForm.tsx

@@ -7,7 +7,7 @@ import { TextInput } from '@/ui/input/components/TextInput';
 export const settingsIntegrationPostgreSQLConnectionFormSchema = z.object({
   dbname: z.string().min(1),
   host: z.string().min(1),
-  port: z.number().positive(),
+  port: z.preprocess((val) => parseInt(val as string), z.number().positive()),
   username: z.string().min(1),
   password: z.string().min(1),
 });