[feat][Remote objects] Edit a connection (for pg) (#5210)

## Context
#4774 

## How was it tested
Locally

## In further PRs
- Update connection status upon page change
- Adapt Info banner to dark mode
- placeholders for form

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -13,12 +13,14 @@ import {
 } from '~/testing/mock-data/companies';
 import { mockedClientConfig } from '~/testing/mock-data/config';
 import { mockedObjectMetadataItemsQueryResult } from '~/testing/mock-data/metadata';
+import { mockedRemoteTables } from '~/testing/mock-data/remote-tables';
 import { mockedUsersData } from '~/testing/mock-data/users';
+import { mockedViewsData } from '~/testing/mock-data/views';
 import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
 import { mockedPeopleData } from './mock-data/people';
+import { mockedRemoteServers } from './mock-data/remote-servers';
 import { mockedViewFieldsData } from './mock-data/view-fields';
-import { mockedViewsData } from './mock-data/views';
 
 const metadataGraphql = graphql.link(`${REACT_APP_SERVER_BASE_URL}/metadata`);
 
@@ -315,6 +317,20 @@ export const graphqlMocks = {
         },
       });
     }),
+    graphql.query('GetOneDatabaseConnection', () => {
+      return HttpResponse.json({
+        data: {
+          findOneRemoteServerById: mockedRemoteServers[0],
+        },
+      });
+    }),
+    graphql.query('GetManyRemoteTables', () => {
+      return HttpResponse.json({
+        data: {
+          findAvailableRemoteTablesByServerId: mockedRemoteTables,
+        },
+      });
+    }),
     http.get('https://chat-assets.frontapp.com/v1/chat.bundle.js', () => {
       return HttpResponse.text(
         `

packages/twenty-front/src/testing/mock-data/remote-servers.ts

@@ -0,0 +1,20 @@
+export const mockedRemoteServers = [
+  {
+    __typename: 'RemoteServer',
+    id: '67cbfd35-8dd4-4591-b9d4-c1906281a5da',
+    createdAt: '2024-04-30T13:41:25.584Z',
+    foreignDataWrapperId: 'b306b641-2142-4b4e-8fba-976afbc3b2bc',
+    foreignDataWrapperOptions: {
+      host: 'localhost',
+      port: 5432,
+      dbname: 'dbname_test',
+    },
+    foreignDataWrapperType: 'postgres_fdw',
+    userMappingOptions: {
+      __typename: 'GetUserMappingOptions',
+      username: 'twenty',
+    },
+    updatedAt: '2024-04-30T13:41:25.858Z',
+    schema: 'public',
+  },
+];

packages/twenty-front/src/testing/mock-data/remote-tables.ts

@@ -0,0 +1,16 @@
+export const mockedRemoteTables = [
+  {
+    __typename: 'RemoteTable',
+    id: 'bb06a39e-a792-424e-ac29-c54a395fdb4f',
+    name: 'Cars',
+    schema: 'public',
+    status: 'SYNCED',
+  },
+  {
+    __typename: 'RemoteTable',
+    id: '994b68c7-148d-4ee0-b557-c688c3f53f73',
+    name: 'Flowers',
+    schema: 'public',
+    status: 'NOT_SYNCED',
+  },
+];