feat: fetch database connections (#4813)

Closes #4757

---------

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

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

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client';
+
+export const GET_MANY_DATABASE_CONNECTIONS = gql`
+  query GetManyDatabaseConnections($input: RemoteServerTypeInput!) {
+    findManyRemoteServersByType(input: $input) {
+      id
+      createdAt
+      foreignDataWrapperId
+      foreignDataWrapperOptions
+      foreignDataWrapperType
+      updatedAt
+    }
+  }
+`;

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

@@ -0,0 +1,37 @@
+import { useQuery } from '@apollo/client';
+
+import { GET_MANY_DATABASE_CONNECTIONS } from '@/databases/graphql/queries/findManyDatabaseConnections';
+import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import {
+  GetManyDatabaseConnectionsQuery,
+  GetManyDatabaseConnectionsQueryVariables,
+} from '~/generated-metadata/graphql';
+
+type UseGetDatabaseConnectionsParams = {
+  databaseKey: string;
+  skip?: boolean;
+};
+
+export const useGetDatabaseConnections = ({
+  databaseKey,
+  skip,
+}: UseGetDatabaseConnectionsParams) => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const { data } = useQuery<
+    GetManyDatabaseConnectionsQuery,
+    GetManyDatabaseConnectionsQueryVariables
+  >(GET_MANY_DATABASE_CONNECTIONS, {
+    client: apolloMetadataClient ?? undefined,
+    skip: skip || !apolloMetadataClient || databaseKey !== 'postgresql',
+    variables: {
+      input: {
+        foreignDataWrapperType: 'postgres_fdw',
+      },
+    },
+  });
+
+  return {
+    connections: data?.findManyRemoteServersByType || [],
+  };
+};

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

@@ -25,7 +25,7 @@ const StyledInputsContainer = styled.div`
     'input-2 input-3'
     'input-4 input-5';
 
-  & :first-child {
+  & :first-of-type {
     grid-area: input-1;
   }
 `;

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

@@ -4,18 +4,14 @@ import { IconChevronRight } from 'twenty-ui';
 
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsIntegrationDatabaseConnectedTablesStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus';
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { RemoteServer } from '~/generated-metadata/graphql';
+import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
 
 type SettingsIntegrationDatabaseConnectionsListCardProps = {
-  databaseLogoUrl: string;
-  connections: {
-    id: string;
-    key: string;
-    name: string;
-    tables: {
-      name: string;
-    }[];
-  }[];
+  integration: SettingsIntegration;
+  connections: RemoteServer[];
 };
 
 const StyledDatabaseLogoContainer = styled.div`
@@ -37,29 +33,39 @@ const StyledRowRightContainer = styled.div`
 `;
 
 export const SettingsIntegrationDatabaseConnectionsListCard = ({
-  databaseLogoUrl,
+  integration,
   connections,
 }: SettingsIntegrationDatabaseConnectionsListCardProps) => {
   const navigate = useNavigate();
 
+  // TODO: Use real remote database tables data from backend
+  const tables = mockedRemoteObjectIntegrations[0].connections[0].tables;
+
+  const getConnectionDbName = (connection: RemoteServer) =>
+    integration.from.key === 'postgresql'
+      ? connection.foreignDataWrapperOptions?.dbname
+      : '';
+
   return (
     <SettingsListCard
       items={connections}
       RowIcon={() => (
         <StyledDatabaseLogoContainer>
-          <StyledDatabaseLogo alt="" src={databaseLogoUrl} />
+          <StyledDatabaseLogo alt="" src={integration.from.image} />
         </StyledDatabaseLogoContainer>
       )}
-      RowRightComponent={({ item: connection }) => (
+      RowRightComponent={({ item: _connection }) => (
         <StyledRowRightContainer>
           <SettingsIntegrationDatabaseConnectedTablesStatus
-            connectedTablesCount={connection.tables.length}
+            connectedTablesCount={tables.length}
           />
           <LightIconButton Icon={IconChevronRight} accent="tertiary" />
         </StyledRowRightContainer>
       )}
-      onRowClick={(connection) => navigate(`./${connection.key}`)}
-      getItemLabel={(connection) => connection.name}
+      onRowClick={(connection) =>
+        navigate(`./${getConnectionDbName(connection)}`)
+      }
+      getItemLabel={getConnectionDbName}
       hasFooter
       footerButtonLabel="Add connection"
       onFooterButtonClick={() => navigate('./new')}