[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
This commit is contained in:
Marie
@ -0,0 +1,82 @@
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import styled from '@emotion/styled';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
|
||||
export const settingsIntegrationPostgreSQLConnectionFormSchema = z.object({
|
||||
dbname: z.string().min(1),
|
||||
host: z.string().min(1),
|
||||
port: z.preprocess((val) => parseInt(val as string), z.number().positive()),
|
||||
username: z.string().min(1),
|
||||
password: z.string().min(1),
|
||||
schema: z.string().min(1),
|
||||
});
|
||||
|
||||
type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
|
||||
typeof settingsIntegrationPostgreSQLConnectionFormSchema
|
||||
>;
|
||||
|
||||
const StyledInputsContainer = styled.div`
|
||||
display: grid;
|
||||
gap: ${({ theme }) => theme.spacing(2, 4)};
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'input-1 input-1'
|
||||
'input-2 input-3'
|
||||
'input-4 input-5';
|
||||
|
||||
& :first-of-type {
|
||||
grid-area: input-1;
|
||||
}
|
||||
`;
|
||||
|
||||
type SettingsIntegrationPostgreSQLConnectionFormProps = {
|
||||
disabled?: boolean;
|
||||
passwordPlaceholder?: string;
|
||||
};
|
||||
|
||||
export const SettingsIntegrationPostgreSQLConnectionForm = ({
|
||||
disabled,
|
||||
passwordPlaceholder,
|
||||
}: SettingsIntegrationPostgreSQLConnectionFormProps) => {
|
||||
const { control } =
|
||||
useFormContext<SettingsIntegrationPostgreSQLConnectionFormValues>();
|
||||
|
||||
return (
|
||||
<StyledInputsContainer>
|
||||
{[
|
||||
{ name: 'dbname' as const, label: 'Database Name' },
|
||||
{ name: 'host' as const, label: 'Host' },
|
||||
{ name: 'port' as const, label: 'Port' },
|
||||
{ name: 'username' as const, label: 'Username' },
|
||||
{ name: 'password' as const, label: 'Password', type: 'password' },
|
||||
{ name: 'schema' as const, label: 'Schema' },
|
||||
].map(({ name, label, type }) => (
|
||||
<Controller
|
||||
key={name}
|
||||
name={name}
|
||||
control={control}
|
||||
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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,38 @@
|
||||
import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
|
||||
import { Status } from '@/ui/display/status/components/Status';
|
||||
import { RemoteTableStatus } from '~/generated-metadata/graphql';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
type SettingsIntegrationDatabaseConnectionSyncStatusProps = {
|
||||
connectionId: string;
|
||||
skip?: boolean;
|
||||
};
|
||||
|
||||
export const SettingsIntegrationDatabaseConnectionSyncStatus = ({
|
||||
connectionId,
|
||||
skip,
|
||||
}: SettingsIntegrationDatabaseConnectionSyncStatusProps) => {
|
||||
const { tables, error } = useGetDatabaseConnectionTables({
|
||||
connectionId,
|
||||
skip,
|
||||
});
|
||||
|
||||
if (isDefined(error)) {
|
||||
return <Status color="red" text="Connection failed" />;
|
||||
}
|
||||
|
||||
const syncedTables = tables.filter(
|
||||
(table) => table.status === RemoteTableStatus.Synced,
|
||||
);
|
||||
|
||||
return (
|
||||
<Status
|
||||
color="green"
|
||||
text={
|
||||
syncedTables.length === 1
|
||||
? `1 tracked table`
|
||||
: `${syncedTables.length} tracked tables`
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
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';
|
||||
|
||||
type SettingsIntegrationDatabaseConnectionsListCardProps = {
|
||||
integration: SettingsIntegration;
|
||||
connections: RemoteServer[];
|
||||
};
|
||||
|
||||
const StyledDatabaseLogoContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: ${({ theme }) => theme.spacing(4)};
|
||||
justify-content: center;
|
||||
width: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const StyledDatabaseLogo = styled.img`
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const StyledRowRightContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export const SettingsIntegrationDatabaseConnectionsListCard = ({
|
||||
integration,
|
||||
connections,
|
||||
}: SettingsIntegrationDatabaseConnectionsListCardProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<SettingsListCard
|
||||
items={connections}
|
||||
RowIcon={() => (
|
||||
<StyledDatabaseLogoContainer>
|
||||
<StyledDatabaseLogo alt="" src={integration.from.image} />
|
||||
</StyledDatabaseLogoContainer>
|
||||
)}
|
||||
RowRightComponent={({ item: connection }) => (
|
||||
<StyledRowRightContainer>
|
||||
<SettingsIntegrationDatabaseConnectionSyncStatus
|
||||
connectionId={connection.id}
|
||||
/>
|
||||
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
|
||||
</StyledRowRightContainer>
|
||||
)}
|
||||
onRowClick={(connection) => navigate(`./${connection.id}`)}
|
||||
getItemLabel={(connection) =>
|
||||
getConnectionDbName({ integration, connection })
|
||||
}
|
||||
hasFooter
|
||||
footerButtonLabel="Add connection"
|
||||
onFooterButtonClick={() => navigate('./new')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,89 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { useSyncRemoteTable } from '@/databases/hooks/useSyncRemoteTable';
|
||||
import { useUnsyncRemoteTable } from '@/databases/hooks/useUnsyncRemoteTable';
|
||||
import { SettingsListCard } from '@/settings/components/SettingsListCard';
|
||||
import { SettingsIntegrationRemoteTableSyncStatusToggle } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle';
|
||||
import { RemoteTable, RemoteTableStatus } from '~/generated-metadata/graphql';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
export const settingsIntegrationsDatabaseTablesSchema = z.object({
|
||||
syncedTablesByName: z.record(z.boolean()),
|
||||
});
|
||||
|
||||
export type SettingsIntegrationsDatabaseTablesFormValues = z.infer<
|
||||
typeof settingsIntegrationsDatabaseTablesSchema
|
||||
>;
|
||||
|
||||
type SettingsIntegrationDatabaseTablesListCardProps = {
|
||||
connectionId: string;
|
||||
tables: RemoteTable[];
|
||||
};
|
||||
|
||||
const StyledRowRightContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export const SettingsIntegrationDatabaseTablesListCard = ({
|
||||
connectionId,
|
||||
tables,
|
||||
}: SettingsIntegrationDatabaseTablesListCardProps) => {
|
||||
const { syncRemoteTable } = useSyncRemoteTable();
|
||||
const { unsyncRemoteTable } = useUnsyncRemoteTable();
|
||||
|
||||
// We need to use a state because the table status update re-render the whole list of toggles
|
||||
const [items] = useState(
|
||||
tables.map((table) => ({
|
||||
...table,
|
||||
id: table.name,
|
||||
})),
|
||||
);
|
||||
|
||||
const onSyncUpdate = useCallback(
|
||||
async (isSynced: boolean, tableName: string) => {
|
||||
const table = items.find((table) => table.name === tableName);
|
||||
|
||||
if (!isDefined(table)) return;
|
||||
|
||||
if (isSynced) {
|
||||
await syncRemoteTable({
|
||||
remoteServerId: connectionId,
|
||||
name: tableName,
|
||||
});
|
||||
} else {
|
||||
await unsyncRemoteTable({
|
||||
remoteServerId: connectionId,
|
||||
name: tableName,
|
||||
});
|
||||
}
|
||||
},
|
||||
[items, syncRemoteTable, connectionId, unsyncRemoteTable],
|
||||
);
|
||||
|
||||
const rowRightComponent = useCallback(
|
||||
({
|
||||
item,
|
||||
}: {
|
||||
item: { id: string; name: string; status: RemoteTableStatus };
|
||||
}) => (
|
||||
<StyledRowRightContainer>
|
||||
<SettingsIntegrationRemoteTableSyncStatusToggle
|
||||
table={item}
|
||||
onSyncUpdate={onSyncUpdate}
|
||||
/>
|
||||
</StyledRowRightContainer>
|
||||
),
|
||||
[onSyncUpdate],
|
||||
);
|
||||
return (
|
||||
<SettingsListCard
|
||||
items={items}
|
||||
RowRightComponent={rowRightComponent}
|
||||
getItemLabel={(table) => table.id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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 };
|
||||
};
|
||||
@ -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}`);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user