Add label to remote server (#5637)

Added label on remote server entity. Also added the possibility to update schema. <img width="688" alt="Capture d’écran 2024-05-28 à 15 36 31" src="https://github.com/twentyhq/twenty/assets/22936103/c9786122-8459-4876-833e-c9a1d7d27829">
2024-05-28 15:54:57 +02:00
parent ae6d5afdfc
commit ebb1aa0377
17 changed files with 91 additions and 50 deletions
--- a/packages/twenty-front/src/modules/databases/graphql/fragments/databaseConnectionFragment.ts
+++ b/packages/twenty-front/src/modules/databases/graphql/fragments/databaseConnectionFragment.ts
@ -12,5 +12,6 @@ export const DATABASE_CONNECTION_FRAGMENT = gql`
    }
    updatedAt
    schema
+    label
  }
 `;
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx
+++ b/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;
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx
+++ b/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,7 +47,7 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
            children: integration.text,
            href: `${settingsIntegrationsPagePath}/${databaseKey}`,
          },
-          { children: connectionName },
+          { children: connection.label },
        ]}
      />
      <Section>
@ -58,7 +55,7 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
        <SettingsIntegrationDatabaseConnectionSummaryCard
          databaseLogoUrl={integration.from.image}
          connectionId={connection.id}
-          connectionName={connectionName}
+          connectionLabel={connection.label}
          onRemove={deleteConnection}
          onEdit={onEdit}
        />
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
+++ b/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={
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
+++ b/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')}
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx
+++ b/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
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/utils/editDatabaseConnection.ts
+++ b/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}`);
--- a/packages/twenty-front/src/modules/settings/integrations/utils/getConnectionDbName.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/utils/getConnectionDbName.ts
@ -1,21 +0,0 @@
-import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
-import { RemoteServer } from '~/generated-metadata/graphql';
-
-type GetConnectionDbNameParams = {
-  integration: SettingsIntegration;
-  connection: RemoteServer;
-};
-
-export const getConnectionDbName = ({
-  integration,
-  connection,
-}: GetConnectionDbNameParams) => {
-  switch (integration.from.key) {
-    case 'postgresql':
-      return connection.foreignDataWrapperOptions?.dbname;
-    case 'stripe':
-      return connection.id;
-    default:
-      return '';
-  }
-};