[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/modules/databases/graphql/fragments/databaseConnectionFragment.ts

@@ -7,6 +7,10 @@ export const DATABASE_CONNECTION_FRAGMENT = gql`
     foreignDataWrapperId
     foreignDataWrapperOptions
     foreignDataWrapperType
+    userMappingOptions {
+      username
+    }
     updatedAt
+    schema
   }
 `;

packages/twenty-front/src/modules/databases/graphql/mutations/updateOneDatabaseConnection.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+import { DATABASE_CONNECTION_FRAGMENT } from '@/databases/graphql/fragments/databaseConnectionFragment';
+
+export const UPDATE_ONE_DATABASE_CONNECTION = gql`
+  ${DATABASE_CONNECTION_FRAGMENT}
+  mutation updateServer($input: UpdateRemoteServerInput!) {
+    updateOneRemoteServer(input: $input) {
+      ...RemoteServerFields
+    }
+  }
+`;

packages/twenty-front/src/modules/databases/hooks/useUpdateOneDatabaseConnection.ts

@@ -0,0 +1,34 @@
+import { ApolloClient, useMutation } from '@apollo/client';
+
+import { UPDATE_ONE_DATABASE_CONNECTION } from '@/databases/graphql/mutations/updateOneDatabaseConnection';
+import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import {
+  UpdateRemoteServerInput,
+  UpdateServerMutation,
+  UpdateServerMutationVariables,
+} from '~/generated-metadata/graphql';
+
+export const useUpdateOneDatabaseConnection = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate] = useMutation<
+    UpdateServerMutation,
+    UpdateServerMutationVariables
+  >(UPDATE_ONE_DATABASE_CONNECTION, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const updateOneDatabaseConnection = async (
+    input: UpdateRemoteServerInput,
+  ) => {
+    return await mutate({
+      variables: {
+        input,
+      },
+    });
+  };
+
+  return {
+    updateOneDatabaseConnection,
+  };
+};

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

@@ -31,7 +31,15 @@ const StyledInputsContainer = styled.div`
   }
 `;
 
-export const SettingsIntegrationPostgreSQLConnectionForm = () => {
+type SettingsIntegrationPostgreSQLConnectionFormProps = {
+  disabled?: boolean;
+  passwordPlaceholder?: string;
+};
+
+export const SettingsIntegrationPostgreSQLConnectionForm = ({
+  disabled,
+  passwordPlaceholder,
+}: SettingsIntegrationPostgreSQLConnectionFormProps) => {
   const { control } =
     useFormContext<SettingsIntegrationPostgreSQLConnectionFormValues>();
 
@@ -49,15 +57,24 @@ export const SettingsIntegrationPostgreSQLConnectionForm = () => {
           key={name}
           name={name}
           control={control}
-          render={({ field: { onChange, value } }) => (
-            <TextInput
-              label={label}
-              value={value}
-              onChange={onChange}
-              fullWidth
-              type={type}
-            />
-          )}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <TextInput
+                autoComplete="new-password"
+                label={label}
+                value={value}
+                onChange={onChange}
+                fullWidth
+                type={type}
+                disabled={disabled}
+                placeholder={
+                  passwordPlaceholder && name === 'password'
+                    ? passwordPlaceholder
+                    : ''
+                }
+              />
+            );
+          }}
         />
       ))}
     </StyledInputsContainer>

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

@@ -0,0 +1,80 @@
+import { useNavigate } from 'react-router-dom';
+import { Section } from '@react-email/components';
+
+import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
+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 { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { SettingsIntegrationDatabaseConnectionSummaryCard } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard';
+
+export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
+  const navigate = useNavigate();
+  const { connection, integration, databaseKey, tables } =
+    useDatabaseConnection();
+
+  const { deleteOneDatabaseConnection } = useDeleteOneDatabaseConnection();
+
+  if (!connection || !integration) {
+    return null;
+  }
+
+  const deleteConnection = async () => {
+    await deleteOneDatabaseConnection({ id: connection.id });
+
+    navigate(`${settingsIntegrationsPagePath}/${databaseKey}`);
+  };
+
+  const onEdit = () => {
+    navigate('./edit');
+  };
+
+  const settingsIntegrationsPagePath = getSettingsPagePath(
+    SettingsPath.Integrations,
+  );
+
+  const connectionName = getConnectionDbName({ integration, connection });
+
+  return (
+    <>
+      <Breadcrumb
+        links={[
+          {
+            children: 'Integrations',
+            href: settingsIntegrationsPagePath,
+          },
+          {
+            children: integration.text,
+            href: `${settingsIntegrationsPagePath}/${databaseKey}`,
+          },
+          { children: connectionName },
+        ]}
+      />
+      <Section>
+        <H2Title title="About" description="About this remote object" />
+        <SettingsIntegrationDatabaseConnectionSummaryCard
+          databaseLogoUrl={integration.from.image}
+          connectionId={connection.id}
+          connectionName={connectionName}
+          onRemove={deleteConnection}
+          onEdit={onEdit}
+        />
+      </Section>
+      <Section>
+        <H2Title
+          title="Tables"
+          description="Select the tables that should be tracked"
+        />
+        {!!tables?.length && (
+          <SettingsIntegrationDatabaseTablesListCard
+            connectionId={connection.id}
+            tables={tables}
+          />
+        )}
+      </Section>
+    </>
+  );
+};

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

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { IconChevronRight } from 'twenty-ui';
 
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionSyncStatus';
+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';

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

@@ -0,0 +1,18 @@
+import { SettingsIntegrationEditDatabaseConnectionContent } from '@/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent';
+import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
+
+export const SettingsIntegrationEditDatabaseConnectionContainer = () => {
+  const { connection, integration, databaseKey, tables } =
+    useDatabaseConnection();
+
+  if (!connection || !integration) return null;
+
+  return (
+    <SettingsIntegrationEditDatabaseConnectionContent
+      connection={connection}
+      integration={integration}
+      databaseKey={databaseKey}
+      tables={tables}
+    />
+  );
+};

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

@@ -0,0 +1,151 @@
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Section } from '@react-email/components';
+import pick from 'lodash.pick';
+import { z } from 'zod';
+
+import { useUpdateOneDatabaseConnection } from '@/databases/hooks/useUpdateOneDatabaseConnection';
+import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
+import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
+import { SettingsIntegrationPostgreSQLConnectionForm } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
+import {
+  formatValuesForUpdate,
+  getEditionSchemaForForm,
+  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';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import {
+  RemoteServer,
+  RemoteTable,
+  RemoteTableStatus,
+} from '~/generated-metadata/graphql';
+
+export const SettingsIntegrationEditDatabaseConnectionContent = ({
+  connection,
+  integration,
+  databaseKey,
+  tables,
+}: {
+  connection: RemoteServer;
+  integration: SettingsIntegration;
+  databaseKey: string;
+  tables: RemoteTable[];
+}) => {
+  const { enqueueSnackBar } = useSnackBar();
+  const navigate = useNavigate();
+
+  const editConnectionSchema = getEditionSchemaForForm(databaseKey);
+  type SettingsIntegrationEditConnectionFormValues = z.infer<
+    typeof editConnectionSchema
+  >;
+
+  const formConfig = useForm<SettingsIntegrationEditConnectionFormValues>({
+    mode: 'onTouched',
+    resolver: zodResolver(editConnectionSchema),
+    defaultValues: getFormDefaultValuesFromConnection({
+      databaseKey,
+      connection,
+    }),
+  });
+
+  const { updateOneDatabaseConnection } = useUpdateOneDatabaseConnection();
+
+  const settingsIntegrationsPagePath = getSettingsPagePath(
+    SettingsPath.Integrations,
+  );
+
+  const hasSyncedTables = tables?.some(
+    (table) => table?.status === RemoteTableStatus.Synced,
+  );
+
+  const connectionName = getConnectionDbName({ integration, connection });
+
+  const { isDirty, isValid } = formConfig.formState;
+  const canSave = !hasSyncedTables && isDirty && isValid;
+
+  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 ?? '',
+      });
+
+      navigate(
+        `${settingsIntegrationsPagePath}/${databaseKey}/${connection?.id}`,
+      );
+    } catch (error) {
+      enqueueSnackBar((error as Error).message, {
+        variant: 'error',
+      });
+    }
+  };
+
+  return (
+    <>
+      <FormProvider
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...formConfig}
+      >
+        <SettingsHeaderContainer>
+          <Breadcrumb
+            links={[
+              {
+                children: 'Integrations',
+                href: settingsIntegrationsPagePath,
+              },
+              {
+                children: integration.text,
+                href: `${settingsIntegrationsPagePath}/${databaseKey}`,
+              },
+              { children: connectionName },
+            ]}
+          />
+          <SaveAndCancelButtons
+            isSaveDisabled={!canSave}
+            onCancel={() =>
+              navigate(`${settingsIntegrationsPagePath}/${databaseKey}`)
+            }
+            onSave={handleSave}
+          />
+        </SettingsHeaderContainer>
+        {hasSyncedTables && (
+          <Info
+            text={
+              'You cannot edit this connection because it has tracked tables.\nIf you need to make changes, please create a new connection or unsync the tables first.'
+            }
+            accent={'blue'}
+          />
+        )}
+        {databaseKey === 'postgresql' ? (
+          <Section>
+            <H2Title
+              title="Edit PostgreSQL Connection"
+              description="Edit the information to connect your PostgreSQL database"
+            />
+
+            <SettingsIntegrationPostgreSQLConnectionForm
+              disabled={hasSyncedTables}
+              passwordPlaceholder="••••••"
+            />
+          </Section>
+        ) : null}
+      </FormProvider>
+    </>
+  );
+};

packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
+import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
+import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
+import { AppPath } from '@/types/AppPath';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+
+export const useDatabaseConnection = () => {
+  const { databaseKey = '', connectionId = '' } = useParams();
+  const navigate = useNavigate();
+
+  const [integrationCategoryAll] = useSettingsIntegrationCategories();
+  const integration = integrationCategoryAll.integrations.find(
+    ({ from: { key } }) => key === databaseKey,
+  );
+
+  const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+    'IS_AIRTABLE_INTEGRATION_ENABLED',
+  );
+  const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+    'IS_POSTGRESQL_INTEGRATION_ENABLED',
+  );
+  const isIntegrationAvailable =
+    !!integration &&
+    ((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
+      (databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
+
+  const { connection, loading } = useGetDatabaseConnection({
+    databaseKey,
+    connectionId,
+    skip: !isIntegrationAvailable,
+  });
+
+  useEffect(() => {
+    if (!isIntegrationAvailable || (!loading && !connection)) {
+      navigate(AppPath.NotFound);
+    }
+  }, [
+    integration,
+    databaseKey,
+    navigate,
+    isIntegrationAvailable,
+    connection,
+    loading,
+  ]);
+
+  const { tables } = useGetDatabaseConnectionTables({
+    connectionId,
+    skip: !connection,
+  });
+
+  return { connection, integration, databaseKey, tables };
+};

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

@@ -0,0 +1,75 @@
+import { identity, isEmpty, pickBy } from 'lodash';
+import { z } from 'zod';
+
+import { settingsIntegrationPostgreSQLConnectionFormSchema } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
+import { RemoteServer } from '~/generated-metadata/graphql';
+
+export const getEditionSchemaForForm = (databaseKey: string) => {
+  switch (databaseKey) {
+    case 'postgresql':
+      return settingsIntegrationPostgreSQLConnectionFormSchema.extend({
+        password: z.string().optional(),
+      });
+    default:
+      throw new Error(`No schema found for database key: ${databaseKey}`);
+  }
+};
+
+export const getFormDefaultValuesFromConnection = ({
+  databaseKey,
+  connection,
+}: {
+  databaseKey: string;
+  connection: RemoteServer;
+}) => {
+  switch (databaseKey) {
+    case 'postgresql':
+      return {
+        dbname: connection.foreignDataWrapperOptions.dbname,
+        host: connection.foreignDataWrapperOptions.host,
+        port: connection.foreignDataWrapperOptions.port,
+        username: connection.userMappingOptions?.username || undefined,
+        schema: connection.schema || undefined,
+        password: '',
+      };
+    default:
+      throw new Error(
+        `No default form values for database key: ${databaseKey}`,
+      );
+  }
+};
+
+export const formatValuesForUpdate = ({
+  databaseKey,
+  formValues,
+}: {
+  databaseKey: string;
+  formValues: any;
+}) => {
+  switch (databaseKey) {
+    case 'postgresql': {
+      const formattedValues = {
+        userMappingOptions: pickBy(
+          {
+            username: formValues.username,
+            password: formValues.password,
+          },
+          identity,
+        ),
+        foreignDataWrapperOptions: pickBy(
+          {
+            dbname: formValues.dbname,
+            host: formValues.host,
+            port: formValues.port,
+          },
+          identity,
+        ),
+        schema: formValues.schema,
+      };
+
+      return pickBy(formattedValues, (obj) => !isEmpty(obj));
+    }
+    default:
+      throw new Error(`Cannot format values for database key: ${databaseKey}`);
+  }
+};

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -23,6 +23,7 @@ export enum SettingsPath {
   Integrations = 'integrations',
   IntegrationDatabase = 'integrations/:databaseKey',
   IntegrationDatabaseConnection = 'integrations/:databaseKey/:connectionId',
+  IntegrationEditDatabaseConnection = 'integrations/:databaseKey/:connectionId/edit',
   IntegrationNewDatabaseConnection = 'integrations/:databaseKey/new',
   DevelopersNewWebhook = 'webhooks/new',
   DevelopersNewWebhookDetail = 'webhooks/:webhookId',

packages/twenty-front/src/modules/ui/display/info/components/Info.tsx

@@ -9,8 +9,8 @@ export type InfoAccent = 'blue' | 'danger';
 export type InfoProps = {
   accent?: InfoAccent;
   text: string;
-  buttonTitle: string;
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  buttonTitle?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
 const StyledTextContainer = styled.div`
@@ -54,12 +54,14 @@ export const Info = ({
         <IconInfoCircle size={theme.icon.size.md} />
         {text}
       </StyledTextContainer>
-      <Button
-        title={buttonTitle}
-        onClick={onClick}
-        size={'small'}
-        variant={'secondary'}
-      />
+      {buttonTitle && onClick && (
+        <Button
+          title={buttonTitle}
+          onClick={onClick}
+          size={'small'}
+          variant={'secondary'}
+        />
+      )}
     </StyledInfo>
   );
 };

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -123,6 +123,7 @@ const TextInputV2Component = (
     disabled,
     tabIndex,
     RightIcon,
+    autoComplete,
   }: TextInputV2ComponentProps,
   // eslint-disable-next-line @nx/workspace-component-props-naming
   ref: ForwardedRef<HTMLInputElement>,
@@ -143,7 +144,7 @@ const TextInputV2Component = (
       {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
       <StyledInputContainer>
         <StyledInput
-          autoComplete="off"
+          autoComplete={autoComplete || 'off'}
           ref={combinedRef}
           tabIndex={tabIndex ?? 0}
           onFocus={onFocus}

packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx

@@ -14,7 +14,7 @@ const StyledWrapper = styled.nav`
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   gap: ${({ theme }) => theme.spacing(2)};
-  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
 `;
 
 const StyledLink = styled(Link)`