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/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,
+  };
+};