[Remotes] Add connection label in form

[thomtrp]

• Add a label field on database
• Ask for it in frontend
• Make it editable

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To add a connection label in the form, follow these steps:

1. Update Form Schema: Modify the form schema to include a label field.

2. Edit Form Component: Update the form components to include an input for the label field.

3. Handle Save: Ensure the handleSave function processes the label field.

Implementation Steps:

1. Update Form Schema

In /packages/twenty-front/src/modules/settings/integrations/database-connection/utils/editDatabaseConnection.ts, add the label field to the schema:

const editConnectionSchema = z.object({
  // existing fields
  label: z.string().nonempty('Label is required'),
});

2. Edit Form Component

In /packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx, add an input for the label field:

<FormProvider {...formConfig}>
  <TextField
    label="Label"
    {...formConfig.register('label')}
    error={!!formConfig.formState.errors.label}
    helperText={formConfig.formState.errors.label?.message}
  />
  {/* existing fields */}
</FormProvider>

3. Handle Save

In /packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx, update the handleSave function to include the label field:

const handleSave = async () => {
  const formValues = formConfig.getValues();
  const dirtyFieldKeys = Object.keys(formConfig.formState.dirtyFields) as (keyof SettingsIntegrationEditConnectionFormValues)[];

  try {
    await updateOneDatabaseConnection({
      ...formatValuesForUpdate({
        databaseKey,
        formValues: pick(formValues, dirtyFieldKeys),
      }),
      id: connection?.id ?? '',
      label: formValues.label, // include label
    });

    navigate(`${settingsIntegrationsPagePath}/${databaseKey}/${connection?.id}`);
  } catch (error) {
    enqueueSnackBar((error as Error).message, {
      variant: SnackBarVariant.Error,
    });
  }
};

Repeat similar steps for the new connection form in /packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx.

References

/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx
/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

Ask Greptile