feat: fetch database connections (#4813)

Closes #4757

---------

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

packages/twenty-front/codegen-metadata.cjs

@@ -1,13 +1,18 @@
 module.exports = {
-  schema: process.env.REACT_APP_SERVER_BASE_URL + "/metadata",
+  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'],
+  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,
-      }
+      },
     },
   },
 };

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: {

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.
  */

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>;

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;
+  integration: SettingsIntegration;
-  connections: {
+  connections: RemoteServer[];
-    id: string;
-    key: string;
-    name: string;
-    tables: {
-      name: string;
-    }[];
-  }[];
 };
 
 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}`)}
+      onRowClick={(connection) =>
-      getItemLabel={(connection) => connection.name}
+        navigate(`./${getConnectionDbName(connection)}`)
+      }
+      getItemLabel={getConnectionDbName}
       hasFooter
       footerButtonLabel="Add connection"
       onFooterButtonClick={() => navigate('./new')}

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

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',