Add label to remote server

packages/twenty-front/src/generated-metadata/gql.ts

@@ -13,7 +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  fragment RemoteServerFields on RemoteServer {\n    id\n    createdAt\n    foreignDataWrapperId\n    foreignDataWrapperOptions\n    foreignDataWrapperType\n    userMappingOptions {\n      user\n    }\n    updatedAt\n    schema\n  }\n": types.RemoteServerFieldsFragmentDoc,
+    "\n  fragment RemoteServerFields on RemoteServer {\n    id\n    createdAt\n    foreignDataWrapperId\n    foreignDataWrapperOptions\n    foreignDataWrapperType\n    userMappingOptions {\n      user\n    }\n    updatedAt\n    schema\n    label\n  }\n": types.RemoteServerFieldsFragmentDoc,
     "\n  fragment RemoteTableFields on RemoteTable {\n    id\n    name\n    schema\n    status\n    schemaPendingUpdates\n  }\n": types.RemoteTableFieldsFragmentDoc,
     "\n  \n  mutation createServer($input: CreateRemoteServerInput!) {\n    createOneRemoteServer(input: $input) {\n      ...RemoteServerFields\n    }\n  }\n": types.CreateServerDocument,
     "\n  mutation deleteServer($input: RemoteServerIdInput!) {\n    deleteOneRemoteServer(input: $input) {\n      id\n    }\n  }\n": types.DeleteServerDocument,
@@ -52,7 +52,7 @@ 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  fragment RemoteServerFields on RemoteServer {\n    id\n    createdAt\n    foreignDataWrapperId\n    foreignDataWrapperOptions\n    foreignDataWrapperType\n    userMappingOptions {\n      user\n    }\n    updatedAt\n    schema\n  }\n"): (typeof documents)["\n  fragment RemoteServerFields on RemoteServer {\n    id\n    createdAt\n    foreignDataWrapperId\n    foreignDataWrapperOptions\n    foreignDataWrapperType\n    userMappingOptions {\n      user\n    }\n    updatedAt\n    schema\n  }\n"];
+export function graphql(source: "\n  fragment RemoteServerFields on RemoteServer {\n    id\n    createdAt\n    foreignDataWrapperId\n    foreignDataWrapperOptions\n    foreignDataWrapperType\n    userMappingOptions {\n      user\n    }\n    updatedAt\n    schema\n    label\n  }\n"): (typeof documents)["\n  fragment RemoteServerFields on RemoteServer {\n    id\n    createdAt\n    foreignDataWrapperId\n    foreignDataWrapperOptions\n    foreignDataWrapperType\n    userMappingOptions {\n      user\n    }\n    updatedAt\n    schema\n    label\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/modules/databases/graphql/fragments/databaseConnectionFragment.ts

@@ -12,5 +12,6 @@ export const DATABASE_CONNECTION_FRAGMENT = gql`
     }
     updatedAt
     schema
+    label
   }
 `;

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

@@ -11,6 +11,7 @@ export const settingsIntegrationPostgreSQLConnectionFormSchema = z.object({
   user: z.string().min(1),
   password: z.string().min(1),
   schema: z.string().min(1),
+  label: z.string().min(1),
 });
 
 type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
@@ -19,6 +20,7 @@ type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
 
 export const settingsIntegrationStripeConnectionFormSchema = z.object({
   api_key: z.string().min(1),
+  label: z.string().min(1),
 });
 
 type SettingsIntegrationStripeConnectionFormValues = z.infer<
@@ -59,7 +61,8 @@ const getFormFields = (
         | 'user'
         | 'password'
         | 'schema'
-        | 'api_key';
+        | 'api_key'
+        | 'label';
       label: string;
       type?: string;
       placeholder: string;
@@ -87,10 +90,20 @@ const getFormFields = (
           placeholder: '••••••',
         },
         { name: 'schema' as const, label: 'Schema', placeholder: 'public' },
+        {
+          name: 'label' as const,
+          label: 'Label',
+          placeholder: 'My database',
+        },
       ];
     case 'stripe':
       return [
         { name: 'api_key' as const, label: 'API Key', placeholder: 'API key' },
+        {
+          name: 'label' as const,
+          label: 'Label',
+          placeholder: 'My database',
+        },
       ];
     default:
       return null;

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx

@@ -6,7 +6,6 @@ import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDa
 import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
 import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard';
 import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
-import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
@@ -36,8 +35,6 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
     SettingsPath.Integrations,
   );
 
-  const connectionName = getConnectionDbName({ integration, connection });
-
   return (
     <>
       <Breadcrumb
@@ -50,15 +47,15 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
             children: integration.text,
             href: `${settingsIntegrationsPagePath}/${databaseKey}`,
           },
-          { children: connectionName },
+          { children: connection.label },
         ]}
       />
       <Section>
         <H2Title title="About" description="About this remote object" />
         <SettingsIntegrationDatabaseConnectionSummaryCard
           databaseLogoUrl={integration.from.image}
           connectionId={connection.id}
-          connectionName={connectionName}
+          connectionLabel={connection.label}
           onRemove={deleteConnection}
           onEdit={onEdit}
         />

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -12,7 +12,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
   databaseLogoUrl: string;
   connectionId: string;
-  connectionName: string;
+  connectionLabel: string;
   onRemove: () => void;
   onEdit: () => void;
 };
@@ -32,7 +32,7 @@ const StyledDatabaseLogo = styled.img`
 export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
   databaseLogoUrl,
   connectionId,
-  connectionName,
+  connectionLabel,
   onRemove,
   onEdit,
 }: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
@@ -46,7 +46,7 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
           <StyledDatabaseLogoContainer>
             <StyledDatabaseLogo alt="" src={databaseLogoUrl} />
           </StyledDatabaseLogoContainer>
-          {connectionName}
+          {connectionLabel}
         </>
       }
       rightComponent={

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

@@ -5,7 +5,6 @@ import { IconChevronRight } from 'twenty-ui';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
-import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { RemoteServer } from '~/generated-metadata/graphql';
 
@@ -55,9 +54,7 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
         </StyledRowRightContainer>
       )}
       onRowClick={(connection) => navigate(`./${connection.id}`)}
-      getItemLabel={(connection) =>
-        getConnectionDbName({ integration, connection })
-      }
+      getItemLabel={(connection) => connection.label}
       hasFooter
       footerButtonLabel="Add connection"
       onFooterButtonClick={() => navigate('./new')}

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -16,7 +16,6 @@ import {
   getFormDefaultValuesFromConnection,
 } from '@/settings/integrations/database-connection/utils/editDatabaseConnection';
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
-import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Info } from '@/ui/display/info/components/Info';
@@ -67,8 +66,6 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
     (table) => table?.status === RemoteTableStatus.Synced,
   );
 
-  const connectionName = getConnectionDbName({ integration, connection });
-
   const { isDirty, isValid } = formConfig.formState;
   const canSave = isDirty && isValid && !hasSyncedTables; // order matters here
 
@@ -114,7 +111,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
                 children: integration.text,
                 href: `${settingsIntegrationsPagePath}/${databaseKey}`,
               },
-              { children: connectionName },
+              { children: connection.label },
             ]}
           />
           <SaveAndCancelButtons

packages/twenty-front/src/modules/settings/integrations/database-connection/utils/editDatabaseConnection.ts

@@ -37,11 +37,13 @@ export const getFormDefaultValuesFromConnection = ({
         port: connection.foreignDataWrapperOptions.port,
         user: connection.userMappingOptions?.user || undefined,
         schema: connection.schema || undefined,
+        label: connection.label,
         password: '',
       };
     case 'stripe':
       return {
         api_key: connection.foreignDataWrapperOptions.api_key,
+        label: connection.label,
       };
     default:
       throw new Error(
@@ -76,6 +78,7 @@ export const formatValuesForUpdate = ({
           identity,
         ),
         schema: formValues.schema,
+        label: formValues.label,
       };
 
       return pickBy(formattedValues, (obj) => !isEmpty(obj));
@@ -85,6 +88,7 @@ export const formatValuesForUpdate = ({
         foreignDataWrapperOptions: {
           api_key: formValues.api_key,
         },
+        label: formValues.label,
       };
     default:
       throw new Error(`Cannot format values for database key: ${databaseKey}`);

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

@@ -41,6 +41,7 @@ const createRemoteServerInputPostgresSchema =
         user: values.user,
       },
       schema: values.schema,
+      label: values.label,
     }),
   );
 
@@ -55,6 +56,7 @@ const createRemoteServerInputStripeSchema =
       foreignDataWrapperOptions: {
         api_key: values.api_key,
       },
+      label: values.label,
     }),
   );
 

packages/twenty-server/src/database/typeorm/metadata/migrations/1716890009820-addRemoteServerLabel.ts

@@ -0,0 +1,17 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddRemoteServerLabel1716890009820 implements MigrationInterface {
+  name = 'AddRemoteServerLabel1716890009820';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "metadata"."remoteServer" ADD "label" text`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "metadata"."remoteServer" DROP COLUMN "label"`,
+    );
+  }
+}

packages/twenty-server/src/engine/metadata-modules/remote-server/dtos/create-remote-server.input.ts

@@ -17,6 +17,9 @@ export class CreateRemoteServerInput<T extends RemoteServerType> {
   @Field(() => GraphQLJSON)
   foreignDataWrapperOptions: ForeignDataWrapperOptions<T>;
 
+  @Field(() => String)
+  label: string;
+
   @IsOptional()
   @Field(() => UserMappingOptions, { nullable: true })
   userMappingOptions?: UserMappingOptions;

packages/twenty-server/src/engine/metadata-modules/remote-server/dtos/remote-server.dto.ts

@@ -20,6 +20,9 @@ export class RemoteServerDTO<T extends RemoteServerType> {
   @Field(() => String)
   foreignDataWrapperType: T;
 
+  @Field(() => String)
+  label: string;
+
   @IsOptional()
   @Field(() => GraphQLJSON, { nullable: true })
   foreignDataWrapperOptions?: ForeignDataWrapperOptions<T>;

packages/twenty-server/src/engine/metadata-modules/remote-server/dtos/update-remote-server.input.ts

@@ -21,6 +21,10 @@ export class UpdateRemoteServerInput<T extends RemoteServerType> {
   @Field(() => GraphQLJSON, { nullable: true })
   foreignDataWrapperOptions?: Partial<ForeignDataWrapperOptions<T>>;
 
+  @IsOptional()
+  @Field(() => String, { nullable: true })
+  label?: string;
+
   @IsOptional()
   @Field(() => UserMappingOptionsUpdateInput, { nullable: true })
   userMappingOptions?: Partial<UserMappingOptions>;

packages/twenty-server/src/engine/metadata-modules/remote-server/remote-server.entity.ts

@@ -46,6 +46,9 @@ export class RemoteServerEntity<T extends RemoteServerType> {
   @Column({ type: 'text', nullable: true })
   foreignDataWrapperType: T;
 
+  @Column({ type: 'text', nullable: true })
+  label: string;
+
   @Column({ nullable: true, type: 'jsonb' })
   foreignDataWrapperOptions: ForeignDataWrapperOptions<T>;
 

packages/twenty-server/src/engine/metadata-modules/remote-server/utils/build-update-remote-server-raw-query.utils.ts

@@ -40,6 +40,14 @@ export const buildUpdateRemoteServerRawQuery = (
     options.push(foreignDataWrapperOptionsQuery);
   }
 
+  if (remoteServerToUpdate.schema) {
+    options.push(`"schema" = $${parametersPositions['schema']}`);
+  }
+
+  if (remoteServerToUpdate.label) {
+    options.push(`"label" = $${parametersPositions['label']}`);
+  }
+
   if (options.length < 1) {
     throw new BadRequestException('No fields to update');
   }
@@ -76,6 +84,16 @@ const buildParametersAndPositions = (
     );
   }
 
+  if (remoteServerToUpdate.schema) {
+    parameters.push(remoteServerToUpdate.schema);
+    parametersPositions['schema'] = parameters.length;
+  }
+
+  if (remoteServerToUpdate.label) {
+    parameters.push(remoteServerToUpdate.label);
+    parametersPositions['label'] = parameters.length;
+  }
+
   return [parameters, parametersPositions];
 };