feat: fetch database connections (#4813)

Closes #4757 --------- Co-authored-by: Thomas Trompette <thomast@twenty.com>
2025-10-30 20:27:55 +00:00 · 2024-04-04 17:27:36 +02:00
parent f8edb6652e
commit 1f98bc899d
10 changed files with 113 additions and 51 deletions
--- a/packages/twenty-front/codegen-metadata.cjs
+++ b/packages/twenty-front/codegen-metadata.cjs
@@ -1,13 +1,18 @@
 module.exports = {
-  schema: process.env.REACT_APP_SERVER_BASE_URL + "/metadata",
-  documents: ['./src/modules/object-metadata/graphql/*.ts', './src/modules/object-record/graphql/*.tsx', './src/modules/metadata/graphql/*.ts'],
+  schema: process.env.REACT_APP_SERVER_BASE_URL + '/metadata',
+  documents: [
+    './src/modules/databases/graphql/**/*.ts',
+    './src/modules/object-metadata/graphql/*.ts',
+    './src/modules/object-record/graphql/*.tsx',
+    './src/modules/metadata/graphql/*.ts',
+  ],
  overwrite: true,
  generates: {
    './src/generated-metadata/': {
      preset: 'client',
      presetConfig: {
-        fragmentMasking: false
-      }
+        fragmentMasking: false,
+      },
    },
  },
 };
--- a/packages/twenty-front/codegen.cjs
+++ b/packages/twenty-front/codegen.cjs
@@ -1,13 +1,14 @@
 module.exports = {
  schema: process.env.REACT_APP_SERVER_BASE_URL + '/graphql',
  documents: [
+    '!./src/modules/databases/**',
    '!./src/modules/object-metadata/**',
    '!./src/modules/object-record/**',
    './src/modules/**/*.tsx',
    './src/modules/**/*.ts',
    '!./src/**/*.test.tsx',
    '!./src/**/__mocks__/*.ts',
-    '!./src/modules/users/graphql/queries/getCurrentUserAndViews.ts'
+    '!./src/modules/users/graphql/queries/getCurrentUserAndViews.ts',
  ],
  overwrite: true,
  generates: {
--- a/packages/twenty-front/src/generated-metadata/gql.ts
+++ b/packages/twenty-front/src/generated-metadata/gql.ts
@@ -13,6 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
 * Therefore it is highly recommended to use the babel or swc plugin for production.
 */
 const documents = {
+    "\n  query GetManyDatabaseConnections($input: RemoteServerTypeInput!) {\n    findManyRemoteServersByType(input: $input) {\n      id\n      createdAt\n      foreignDataWrapperId\n      foreignDataWrapperOptions\n      foreignDataWrapperType\n      updatedAt\n    }\n  }\n": types.GetManyDatabaseConnectionsDocument,
    "\n  mutation CreateOneObjectMetadataItem($input: CreateOneObjectInput!) {\n    createOneObject(input: $input) {\n      id\n      dataSourceId\n      nameSingular\n      namePlural\n      labelSingular\n      labelPlural\n      description\n      icon\n      isCustom\n      isActive\n      createdAt\n      updatedAt\n      labelIdentifierFieldMetadataId\n      imageIdentifierFieldMetadataId\n    }\n  }\n": types.CreateOneObjectMetadataItemDocument,
    "\n  mutation CreateOneFieldMetadataItem($input: CreateOneFieldMetadataInput!) {\n    createOneField(input: $input) {\n      id\n      type\n      name\n      label\n      description\n      icon\n      isCustom\n      isActive\n      isNullable\n      createdAt\n      updatedAt\n      defaultValue\n      options\n    }\n  }\n": types.CreateOneFieldMetadataItemDocument,
    "\n  mutation CreateOneRelationMetadata($input: CreateOneRelationInput!) {\n    createOneRelation(input: $input) {\n      id\n      relationType\n      fromObjectMetadataId\n      toObjectMetadataId\n      fromFieldMetadataId\n      toFieldMetadataId\n      createdAt\n      updatedAt\n    }\n  }\n": types.CreateOneRelationMetadataDocument,
@@ -37,6 +38,10 @@ const documents = {
 */
 export function graphql(source: string): unknown;

+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query GetManyDatabaseConnections($input: RemoteServerTypeInput!) {\n    findManyRemoteServersByType(input: $input) {\n      id\n      createdAt\n      foreignDataWrapperId\n      foreignDataWrapperOptions\n      foreignDataWrapperType\n      updatedAt\n    }\n  }\n"): (typeof documents)["\n  query GetManyDatabaseConnections($input: RemoteServerTypeInput!) {\n    findManyRemoteServersByType(input: $input) {\n      id\n      createdAt\n      foreignDataWrapperId\n      foreignDataWrapperOptions\n      foreignDataWrapperType\n      updatedAt\n    }\n  }\n"];
 /**
 * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
 */
--- a/packages/twenty-front/src/generated-metadata/graphql.ts
+++ b/packages/twenty-front/src/generated-metadata/graphql.ts
@@ -162,6 +162,7 @@ export type CreateObjectInput = {
  labelSingular: Scalars['String']['input'];
  namePlural: Scalars['String']['input'];
  nameSingular: Scalars['String']['input'];
+  remoteTablePrimaryKeyColumnType?: InputMaybe<Scalars['String']['input']>;
 };

 export type CreateOneAppTokenInput = {
@@ -217,7 +218,7 @@ export type CursorPaging = {
 };

 export type DeleteOneFieldInput = {
-  /** The id of the record to delete. */
+  /** The id of the field to delete. */
  id: Scalars['ID']['input'];
 };

@@ -276,24 +277,6 @@ export type FieldConnection = {
  pageInfo: PageInfo;
 };

-export type FieldDeleteResponse = {
-  __typename?: 'FieldDeleteResponse';
-  createdAt?: Maybe<Scalars['DateTime']['output']>;
-  defaultValue?: Maybe<Scalars['JSON']['output']>;
-  description?: Maybe<Scalars['String']['output']>;
-  icon?: Maybe<Scalars['String']['output']>;
-  id?: Maybe<Scalars['ID']['output']>;
-  isActive?: Maybe<Scalars['Boolean']['output']>;
-  isCustom?: Maybe<Scalars['Boolean']['output']>;
-  isNullable?: Maybe<Scalars['Boolean']['output']>;
-  isSystem?: Maybe<Scalars['Boolean']['output']>;
-  label?: Maybe<Scalars['String']['output']>;
-  name?: Maybe<Scalars['String']['output']>;
-  options?: Maybe<Scalars['JSON']['output']>;
-  type?: Maybe<FieldMetadataType>;
-  updatedAt?: Maybe<Scalars['DateTime']['output']>;
-};
-
 /** Type of the field */
 export enum FieldMetadataType {
  Address = 'ADDRESS',
@@ -376,7 +359,7 @@ export type Mutation = {
  createOneRelation: Relation;
  createOneRemoteServer: RemoteServer;
  deleteCurrentWorkspace: Workspace;
-  deleteOneField: FieldDeleteResponse;
+  deleteOneField: Field;
  deleteOneObject: Object;
  deleteOneRelation: RelationDeleteResponse;
  deleteOneRemoteServer: RemoteServer;
@@ -1054,7 +1037,7 @@ export type Workspace = {
  billingSubscriptions?: Maybe<Array<BillingSubscription>>;
  createdAt: Scalars['DateTime']['output'];
  currentBillingSubscription?: Maybe<BillingSubscription>;
-  currentCacheVersion?: Maybe<Scalars['String']['output']>;
+  currentCacheVersion: Scalars['String']['output'];
  deletedAt?: Maybe<Scalars['DateTime']['output']>;
  displayName?: Maybe<Scalars['String']['output']>;
  domainName?: Maybe<Scalars['String']['output']>;
@@ -1205,6 +1188,13 @@ export type RelationEdge = {
  node: Relation;
 };

+export type GetManyDatabaseConnectionsQueryVariables = Exact<{
+  input: RemoteServerTypeInput;
+}>;
+
+
+export type GetManyDatabaseConnectionsQuery = { __typename?: 'Query', findManyRemoteServersByType: Array<{ __typename?: 'RemoteServer', id: string, createdAt: any, foreignDataWrapperId: string, foreignDataWrapperOptions?: any | null, foreignDataWrapperType: string, updatedAt: any }> };
+
 export type CreateOneObjectMetadataItemMutationVariables = Exact<{
  input: CreateOneObjectInput;
 }>;
@@ -1254,7 +1244,7 @@ export type DeleteOneFieldMetadataItemMutationVariables = Exact<{
 }>;


-export type DeleteOneFieldMetadataItemMutation = { __typename?: 'Mutation', deleteOneField: { __typename?: 'FieldDeleteResponse', id?: string | null, type?: FieldMetadataType | null, name?: string | null, label?: string | null, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isNullable?: boolean | null, createdAt?: any | null, updatedAt?: any | null } };
+export type DeleteOneFieldMetadataItemMutation = { __typename?: 'Mutation', deleteOneField: { __typename?: 'field', id: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isNullable?: boolean | null, createdAt: any, updatedAt: any } };

 export type ObjectMetadataItemsQueryVariables = Exact<{
  objectFilter?: InputMaybe<ObjectFilter>;
@@ -1265,6 +1255,7 @@ export type ObjectMetadataItemsQueryVariables = Exact<{
 export type ObjectMetadataItemsQuery = { __typename?: 'Query', objects: { __typename?: 'ObjectConnection', edges: Array<{ __typename?: 'objectEdge', node: { __typename?: 'object', id: string, dataSourceId: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isRemote: boolean, isActive: boolean, isSystem: boolean, createdAt: any, updatedAt: any, labelIdentifierFieldMetadataId?: string | null, imageIdentifierFieldMetadataId?: string | null, fields: { __typename?: 'ObjectFieldsConnection', edges: Array<{ __typename?: 'fieldEdge', node: { __typename?: 'field', id: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isSystem?: boolean | null, isNullable?: boolean | null, createdAt: any, updatedAt: any, defaultValue?: any | null, options?: any | null, fromRelationMetadata?: { __typename?: 'relation', id: string, relationType: RelationMetadataType, toFieldMetadataId: string, toObjectMetadata: { __typename?: 'object', id: string, dataSourceId: string, nameSingular: string, namePlural: string, isSystem: boolean } } | null, toRelationMetadata?: { __typename?: 'relation', id: string, relationType: RelationMetadataType, fromFieldMetadataId: string, fromObjectMetadata: { __typename?: 'object', id: string, dataSourceId: string, nameSingular: string, namePlural: string, isSystem: boolean } } | null, relationDefinition?: { __typename?: 'RelationDefinition', direction: RelationDefinitionType, sourceObjectMetadata: { __typename?: 'object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'field', id: string, name: string }, targetObjectMetadata: { __typename?: 'object', id: string, nameSingular: string, namePlural: string }, targetFieldMetadata: { __typename?: 'field', id: string, name: string } } | null } }>, pageInfo: { __typename?: 'PageInfo', hasNextPage?: boolean | null, hasPreviousPage?: boolean | null, startCursor?: any | null, endCursor?: any | null } } } }>, pageInfo: { __typename?: 'PageInfo', hasNextPage?: boolean | null, hasPreviousPage?: boolean | null, startCursor?: any | null, endCursor?: any | null } } };


+export const GetManyDatabaseConnectionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetManyDatabaseConnections"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServerTypeInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"findManyRemoteServersByType"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperId"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperOptions"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperType"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode<GetManyDatabaseConnectionsQuery, GetManyDatabaseConnectionsQueryVariables>;
 export const CreateOneObjectMetadataItemDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOneObjectMetadataItem"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOneObjectInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneObject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"dataSourceId"}},{"kind":"Field","name":{"kind":"Name","value":"nameSingular"}},{"kind":"Field","name":{"kind":"Name","value":"namePlural"}},{"kind":"Field","name":{"kind":"Name","value":"labelSingular"}},{"kind":"Field","name":{"kind":"Name","value":"labelPlural"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"labelIdentifierFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"imageIdentifierFieldMetadataId"}}]}}]}}]} as unknown as DocumentNode<CreateOneObjectMetadataItemMutation, CreateOneObjectMetadataItemMutationVariables>;
 export const CreateOneFieldMetadataItemDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOneFieldMetadataItem"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOneFieldMetadataInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneField"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"isNullable"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"defaultValue"}},{"kind":"Field","name":{"kind":"Name","value":"options"}}]}}]}}]} as unknown as DocumentNode<CreateOneFieldMetadataItemMutation, CreateOneFieldMetadataItemMutationVariables>;
 export const CreateOneRelationMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOneRelationMetadata"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOneRelationInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneRelation"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"relationType"}},{"kind":"Field","name":{"kind":"Name","value":"fromObjectMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"toObjectMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"fromFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"toFieldMetadataId"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode<CreateOneRelationMetadataMutation, CreateOneRelationMetadataMutationVariables>;
--- a/packages/twenty-front/src/modules/databases/graphql/queries/findManyDatabaseConnections.ts
+++ b/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
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/databases/hooks/useGetDatabaseConnections.ts
+++ b/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 || [],
+  };
+};
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionForm.tsx
+++ b/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;
  }
 `;
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
+++ b/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')}
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { IconSettings } from 'twenty-ui';

+import { useGetDatabaseConnections } from '@/databases/hooks/useGetDatabaseConnections';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationDatabaseConnectionsListCard } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard';
 import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
@@ -14,7 +15,6 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';

 export const SettingsIntegrationDatabase = () => {
  const { databaseKey = '' } = useParams();
@@ -42,12 +42,12 @@ export const SettingsIntegrationDatabase = () => {
    }
  }, [integration, databaseKey, navigate, isIntegrationAvailable]);

-  if (!isIntegrationAvailable) return null;
+  const { connections } = useGetDatabaseConnections({
+    databaseKey,
+    skip: !isIntegrationAvailable,
+  });

-  const connections =
-    mockedRemoteObjectIntegrations.find(
-      ({ key }) => key === integration.from.key,
-    )?.connections || [];
+  if (!isIntegrationAvailable) return null;

  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -70,7 +70,7 @@ export const SettingsIntegrationDatabase = () => {
            description={`Connect or access your ${integration.text} data`}
          />
          <SettingsIntegrationDatabaseConnectionsListCard
-            databaseLogoUrl={integration.from.image}
+            integration={integration}
            connections={connections}
          />
        </Section>
--- a/packages/twenty-front/src/testing/mock-data/objectMetadataItems.ts
+++ b/packages/twenty-front/src/testing/mock-data/objectMetadataItems.ts
@@ -1,5 +1,8 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { FieldMetadataType, RelationMetadataType } from '~/generated/graphql';
+import {
+  FieldMetadataType,
+  RelationMetadataType,
+} from '~/generated-metadata/graphql';

 export const mockObjectMetadataItem: ObjectMetadataItem = {
  __typename: 'object',