Front references to views as records (#15425)
This commit is contained in:
Paul Rastoin
-148
@@ -1,148 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
|
||||
|
||||
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()),
|
||||
user: z.string().min(1),
|
||||
password: z.string().min(1),
|
||||
schema: z.string().min(1),
|
||||
label: z.string().min(1),
|
||||
});
|
||||
|
||||
type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
|
||||
typeof settingsIntegrationPostgreSQLConnectionFormSchema
|
||||
>;
|
||||
|
||||
export const settingsIntegrationStripeConnectionFormSchema = z.object({
|
||||
api_key: z.string().min(1),
|
||||
label: z.string().min(1),
|
||||
});
|
||||
|
||||
type SettingsIntegrationStripeConnectionFormValues = z.infer<
|
||||
typeof settingsIntegrationStripeConnectionFormSchema
|
||||
>;
|
||||
|
||||
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 SettingsIntegrationDatabaseConnectionFormProps = {
|
||||
databaseKey: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
type SettingsIntegrationConnectionFormValues =
|
||||
| SettingsIntegrationPostgreSQLConnectionFormValues
|
||||
| SettingsIntegrationStripeConnectionFormValues;
|
||||
|
||||
const getFormFields = (
|
||||
databaseKey: string,
|
||||
):
|
||||
| {
|
||||
name:
|
||||
| 'dbname'
|
||||
| 'host'
|
||||
| 'port'
|
||||
| 'user'
|
||||
| 'password'
|
||||
| 'schema'
|
||||
| 'api_key'
|
||||
| 'label';
|
||||
label: string;
|
||||
type?: string;
|
||||
placeholder: string;
|
||||
}[]
|
||||
| null => {
|
||||
switch (databaseKey) {
|
||||
case 'postgresql':
|
||||
return [
|
||||
{
|
||||
name: 'dbname' as const,
|
||||
label: 'Database Name',
|
||||
placeholder: 'default',
|
||||
},
|
||||
{ name: 'host' as const, label: 'Host', placeholder: 'host' },
|
||||
{ name: 'port' as const, label: 'Port', placeholder: '5432' },
|
||||
{
|
||||
name: 'user' as const,
|
||||
label: 'User',
|
||||
placeholder: 'user',
|
||||
},
|
||||
{
|
||||
name: 'password' as const,
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
export const SettingsIntegrationDatabaseConnectionForm = ({
|
||||
databaseKey,
|
||||
disabled,
|
||||
}: SettingsIntegrationDatabaseConnectionFormProps) => {
|
||||
const { control } = useFormContext<SettingsIntegrationConnectionFormValues>();
|
||||
const formFields = getFormFields(databaseKey);
|
||||
|
||||
if (!formFields) return null;
|
||||
|
||||
return (
|
||||
<StyledInputsContainer>
|
||||
{formFields.map(({ name, label, type, placeholder }) => (
|
||||
<Controller
|
||||
key={name}
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => {
|
||||
return (
|
||||
<SettingsTextInput
|
||||
instanceId={`${databaseKey}-${name}`}
|
||||
autoComplete="new-password" // Disable autocomplete
|
||||
label={label}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
fullWidth
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</StyledInputsContainer>
|
||||
);
|
||||
};
|
||||
-76
@@ -1,76 +0,0 @@
|
||||
import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
|
||||
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 { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
import { Section } from '@react-email/components';
|
||||
import { SettingsPath } from 'twenty-shared/types';
|
||||
import { getSettingsPath } from 'twenty-shared/utils';
|
||||
import { H2Title } from 'twenty-ui/display';
|
||||
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
||||
|
||||
export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
|
||||
const navigate = useNavigateSettings();
|
||||
const { connection, integration, databaseKey, tables } =
|
||||
useDatabaseConnection({ fetchPolicy: 'network-only' });
|
||||
|
||||
const { deleteOneDatabaseConnection } = useDeleteOneDatabaseConnection();
|
||||
|
||||
if (!connection || !integration) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const deleteConnection = async () => {
|
||||
await deleteOneDatabaseConnection({ id: connection.id });
|
||||
|
||||
navigate(SettingsPath.IntegrationDatabase, {
|
||||
databaseKey,
|
||||
});
|
||||
};
|
||||
|
||||
const settingsIntegrationsPagePath = getSettingsPath(
|
||||
SettingsPath.Integrations,
|
||||
);
|
||||
|
||||
// TODO: move breadcrumb to header?
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{
|
||||
children: 'Integrations',
|
||||
href: settingsIntegrationsPagePath,
|
||||
},
|
||||
{
|
||||
children: integration.text,
|
||||
href: getSettingsPath(SettingsPath.IntegrationDatabase, {
|
||||
databaseKey,
|
||||
}),
|
||||
},
|
||||
{ children: connection.label },
|
||||
]}
|
||||
/>
|
||||
<Section>
|
||||
<H2Title title="About" description="About this remote object" />
|
||||
<SettingsIntegrationDatabaseConnectionSummaryCard
|
||||
databaseLogoUrl={integration.from.image}
|
||||
connectionId={connection.id}
|
||||
connectionLabel={connection.label}
|
||||
onRemove={deleteConnection}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Tables"
|
||||
description="Select the tables that should be tracked"
|
||||
/>
|
||||
{!!tables?.length && (
|
||||
<SettingsIntegrationDatabaseTablesListCard
|
||||
connectionId={connection.id}
|
||||
tables={tables}
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
-79
@@ -1,79 +0,0 @@
|
||||
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
|
||||
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
|
||||
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
||||
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import styled from '@emotion/styled';
|
||||
import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui/display';
|
||||
import { LightIconButton } from 'twenty-ui/input';
|
||||
import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation';
|
||||
|
||||
type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
|
||||
databaseLogoUrl: string;
|
||||
connectionId: string;
|
||||
connectionLabel: string;
|
||||
onRemove: () => void;
|
||||
};
|
||||
|
||||
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%;
|
||||
`;
|
||||
|
||||
export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
|
||||
databaseLogoUrl,
|
||||
connectionId,
|
||||
connectionLabel,
|
||||
onRemove,
|
||||
}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
|
||||
const dropdownId =
|
||||
'settings-integration-database-connection-summary-card-dropdown';
|
||||
|
||||
return (
|
||||
<SettingsSummaryCard
|
||||
title={
|
||||
<>
|
||||
<StyledDatabaseLogoContainer>
|
||||
<StyledDatabaseLogo alt="" src={databaseLogoUrl} />
|
||||
</StyledDatabaseLogoContainer>
|
||||
{connectionLabel}
|
||||
</>
|
||||
}
|
||||
rightComponent={
|
||||
<>
|
||||
<SettingsIntegrationDatabaseConnectionSyncStatus
|
||||
connectionId={connectionId}
|
||||
shouldFetchPendingSchemaUpdates
|
||||
/>
|
||||
<Dropdown
|
||||
dropdownId={dropdownId}
|
||||
clickableComponent={
|
||||
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
|
||||
}
|
||||
dropdownComponents={
|
||||
<DropdownContent>
|
||||
<DropdownMenuItemsContainer>
|
||||
<MenuItem
|
||||
LeftIcon={IconTrash}
|
||||
text="Remove"
|
||||
onClick={onRemove}
|
||||
/>
|
||||
<UndecoratedLink to="./edit">
|
||||
<MenuItem LeftIcon={IconPencil} text="Edit" />
|
||||
</UndecoratedLink>
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownContent>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
-51
@@ -1,51 +0,0 @@
|
||||
import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
|
||||
import { RemoteTableStatus } from '~/generated-metadata/graphql';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { Status } from 'twenty-ui/display';
|
||||
|
||||
type SettingsIntegrationDatabaseConnectionSyncStatusProps = {
|
||||
connectionId: string;
|
||||
skip?: boolean;
|
||||
shouldFetchPendingSchemaUpdates?: boolean;
|
||||
};
|
||||
|
||||
export const SettingsIntegrationDatabaseConnectionSyncStatus = ({
|
||||
connectionId,
|
||||
skip,
|
||||
shouldFetchPendingSchemaUpdates,
|
||||
}: SettingsIntegrationDatabaseConnectionSyncStatusProps) => {
|
||||
const { tables, error } = useGetDatabaseConnectionTables({
|
||||
connectionId,
|
||||
skip,
|
||||
shouldFetchPendingSchemaUpdates,
|
||||
});
|
||||
|
||||
if (isDefined(error)) {
|
||||
return <Status color="red" text="Connection failed" />;
|
||||
}
|
||||
|
||||
const syncedTables = tables.filter(
|
||||
(table) => table.status === RemoteTableStatus.SYNCED,
|
||||
);
|
||||
|
||||
const updatesAvailable = tables.some(
|
||||
(table) =>
|
||||
table.schemaPendingUpdates?.length &&
|
||||
table.schemaPendingUpdates.length > 0,
|
||||
);
|
||||
|
||||
return (
|
||||
<Status
|
||||
color={updatesAvailable ? 'yellow' : 'green'}
|
||||
text={
|
||||
syncedTables.length === 1
|
||||
? `1 tracked table${
|
||||
updatesAvailable ? ' (with pending schema updates)' : ''
|
||||
}`
|
||||
: `${syncedTables.length} tracked tables${
|
||||
updatesAvailable ? ' (with pending schema updates)' : ''
|
||||
}`
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
-73
@@ -1,73 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { SettingsListCard } from '@/settings/components/SettingsListCard';
|
||||
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
|
||||
import { type SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
|
||||
import { SettingsPath } from 'twenty-shared/types';
|
||||
import { IconChevronRight } from 'twenty-ui/display';
|
||||
import { LightIconButton } from 'twenty-ui/input';
|
||||
import { type RemoteServer } from '~/generated-metadata/graphql';
|
||||
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
||||
|
||||
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 = useNavigateSettings();
|
||||
|
||||
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(SettingsPath.IntegrationDatabaseConnection, {
|
||||
databaseKey: integration.from.key,
|
||||
connectionId: connection.id,
|
||||
})
|
||||
}
|
||||
getItemLabel={(connection) => connection.label}
|
||||
hasFooter
|
||||
footerButtonLabel="Add connection"
|
||||
onFooterButtonClick={() =>
|
||||
navigate(SettingsPath.IntegrationNewDatabaseConnection, {
|
||||
databaseKey: integration.from.key,
|
||||
})
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
-133
@@ -1,133 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useCallback } from 'react';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { useSyncRemoteTable } from '@/databases/hooks/useSyncRemoteTable';
|
||||
import { useSyncRemoteTableSchemaChanges } from '@/databases/hooks/useSyncRemoteTableSchemaChanges';
|
||||
import { useUnsyncRemoteTable } from '@/databases/hooks/useUnsyncRemoteTable';
|
||||
import { SettingsListCard } from '@/settings/components/SettingsListCard';
|
||||
import { SettingsIntegrationRemoteTableSchemaUpdate } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSchemaUpdate';
|
||||
import { SettingsIntegrationRemoteTableSyncStatusToggle } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle';
|
||||
import {
|
||||
DistantTableUpdate,
|
||||
type RemoteTable,
|
||||
type RemoteTableStatus,
|
||||
} from '~/generated-metadata/graphql';
|
||||
|
||||
export const settingsIntegrationsDatabaseTablesSchema = z.object({
|
||||
syncedTablesByName: z.record(z.string(), 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)};
|
||||
`;
|
||||
|
||||
const getDistantTableUpdatesText = (
|
||||
schemaPendingUpdates: DistantTableUpdate[],
|
||||
) => {
|
||||
if (schemaPendingUpdates.includes(DistantTableUpdate.TABLE_DELETED)) {
|
||||
return 'Table has been deleted';
|
||||
}
|
||||
if (
|
||||
schemaPendingUpdates.includes(DistantTableUpdate.COLUMNS_ADDED) &&
|
||||
schemaPendingUpdates.includes(DistantTableUpdate.COLUMNS_DELETED)
|
||||
) {
|
||||
return 'Columns have been added and other deleted';
|
||||
}
|
||||
if (schemaPendingUpdates.includes(DistantTableUpdate.COLUMNS_ADDED)) {
|
||||
return 'Columns have been added';
|
||||
}
|
||||
if (schemaPendingUpdates.includes(DistantTableUpdate.COLUMNS_DELETED)) {
|
||||
return 'Columns have been deleted';
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const SettingsIntegrationDatabaseTablesListCard = ({
|
||||
connectionId,
|
||||
tables,
|
||||
}: SettingsIntegrationDatabaseTablesListCardProps) => {
|
||||
const { syncRemoteTable } = useSyncRemoteTable();
|
||||
const { unsyncRemoteTable } = useUnsyncRemoteTable();
|
||||
const { syncRemoteTableSchemaChanges } = useSyncRemoteTableSchemaChanges();
|
||||
|
||||
const items = tables.map((table) => ({
|
||||
...table,
|
||||
id: table.name,
|
||||
updatesText: table.schemaPendingUpdates
|
||||
? getDistantTableUpdatesText(table.schemaPendingUpdates)
|
||||
: null,
|
||||
}));
|
||||
|
||||
const onSyncUpdate = useCallback(
|
||||
async (isSynced: boolean, tableName: string) => {
|
||||
if (isSynced) {
|
||||
await syncRemoteTable({
|
||||
remoteServerId: connectionId,
|
||||
name: tableName,
|
||||
});
|
||||
} else {
|
||||
await unsyncRemoteTable({
|
||||
remoteServerId: connectionId,
|
||||
name: tableName,
|
||||
});
|
||||
}
|
||||
},
|
||||
[syncRemoteTable, connectionId, unsyncRemoteTable],
|
||||
);
|
||||
|
||||
const onSyncSchemaUpdate = useCallback(
|
||||
async (tableName: string) =>
|
||||
syncRemoteTableSchemaChanges({
|
||||
remoteServerId: connectionId,
|
||||
name: tableName,
|
||||
}),
|
||||
[syncRemoteTableSchemaChanges, connectionId],
|
||||
);
|
||||
|
||||
const rowRightComponent = useCallback(
|
||||
({
|
||||
item,
|
||||
}: {
|
||||
item: {
|
||||
id: string;
|
||||
name: string;
|
||||
status: RemoteTableStatus;
|
||||
updatesText?: string | null;
|
||||
};
|
||||
}) => (
|
||||
<StyledRowRightContainer>
|
||||
{item.updatesText && (
|
||||
<SettingsIntegrationRemoteTableSchemaUpdate
|
||||
updatesText={item.updatesText}
|
||||
onUpdate={() => onSyncSchemaUpdate(item.name)}
|
||||
/>
|
||||
)}
|
||||
<SettingsIntegrationRemoteTableSyncStatusToggle
|
||||
tableName={item.name}
|
||||
tableStatus={item.status}
|
||||
onSyncUpdate={onSyncUpdate}
|
||||
/>
|
||||
</StyledRowRightContainer>
|
||||
),
|
||||
[onSyncSchemaUpdate, onSyncUpdate],
|
||||
);
|
||||
return (
|
||||
<SettingsListCard
|
||||
items={items}
|
||||
RowRightComponent={rowRightComponent}
|
||||
getItemLabel={(table) => table.id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
-156
@@ -1,156 +0,0 @@
|
||||
import { useUpdateOneDatabaseConnection } from '@/databases/hooks/useUpdateOneDatabaseConnection';
|
||||
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsIntegrationDatabaseConnectionForm } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
|
||||
import {
|
||||
formatValuesForUpdate,
|
||||
getEditionSchemaForForm,
|
||||
getFormDefaultValuesFromConnection,
|
||||
} from '@/settings/integrations/database-connection/utils/editDatabaseConnection';
|
||||
import { type SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
import { ApolloError } from '@apollo/client';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { Section } from '@react-email/components';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { SettingsPath } from 'twenty-shared/types';
|
||||
import { getSettingsPath } from 'twenty-shared/utils';
|
||||
import { H2Title, Info } from 'twenty-ui/display';
|
||||
import { type z } from 'zod';
|
||||
import {
|
||||
type RemoteServer,
|
||||
type RemoteTable,
|
||||
RemoteTableStatus,
|
||||
} from '~/generated-metadata/graphql';
|
||||
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
||||
|
||||
export const SettingsIntegrationEditDatabaseConnectionContent = ({
|
||||
connection,
|
||||
integration,
|
||||
databaseKey,
|
||||
tables,
|
||||
}: {
|
||||
connection: RemoteServer;
|
||||
integration: SettingsIntegration;
|
||||
databaseKey: string;
|
||||
tables: RemoteTable[];
|
||||
}) => {
|
||||
const { enqueueErrorSnackBar } = useSnackBar();
|
||||
const navigate = useNavigateSettings();
|
||||
|
||||
const editConnectionSchema = getEditionSchemaForForm(databaseKey);
|
||||
type SettingsIntegrationEditConnectionFormValues = z.infer<
|
||||
typeof editConnectionSchema
|
||||
>;
|
||||
|
||||
const formConfig = useForm<SettingsIntegrationEditConnectionFormValues>({
|
||||
mode: 'onTouched',
|
||||
resolver: zodResolver(editConnectionSchema),
|
||||
defaultValues: getFormDefaultValuesFromConnection({
|
||||
databaseKey,
|
||||
connection,
|
||||
}),
|
||||
});
|
||||
const { t } = useLingui();
|
||||
|
||||
const { updateOneDatabaseConnection } = useUpdateOneDatabaseConnection();
|
||||
|
||||
const settingsIntegrationsPagePath = getSettingsPath(
|
||||
SettingsPath.Integrations,
|
||||
);
|
||||
|
||||
const hasSyncedTables = tables?.some(
|
||||
(table) => table?.status === RemoteTableStatus.SYNCED,
|
||||
);
|
||||
|
||||
const { isDirty, isValid } = formConfig.formState;
|
||||
const canSave = isDirty && isValid && !hasSyncedTables; // order matters here
|
||||
|
||||
const handleSave = async () => {
|
||||
const formValues = formConfig.getValues();
|
||||
const dirtyFieldKeys = Object.keys(
|
||||
formConfig.formState.dirtyFields,
|
||||
) as (keyof SettingsIntegrationEditConnectionFormValues)[];
|
||||
|
||||
const dirtyFormValues = Object.fromEntries(
|
||||
Object.entries(formValues).filter(([key]) =>
|
||||
dirtyFieldKeys.includes(key as keyof typeof formValues),
|
||||
),
|
||||
);
|
||||
|
||||
try {
|
||||
await updateOneDatabaseConnection({
|
||||
...formatValuesForUpdate({
|
||||
databaseKey,
|
||||
formValues: dirtyFormValues,
|
||||
}),
|
||||
id: connection?.id ?? '',
|
||||
});
|
||||
|
||||
navigate(SettingsPath.IntegrationDatabaseConnection, {
|
||||
databaseKey,
|
||||
connectionId: connection?.id,
|
||||
});
|
||||
} catch (error) {
|
||||
enqueueErrorSnackBar({
|
||||
apolloError: error instanceof ApolloError ? error : undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: move breadcrumb to header?
|
||||
return (
|
||||
<>
|
||||
<FormProvider
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...formConfig}
|
||||
>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{
|
||||
children: t`Integrations`,
|
||||
href: settingsIntegrationsPagePath,
|
||||
},
|
||||
{
|
||||
children: integration.text,
|
||||
href: getSettingsPath(SettingsPath.IntegrationDatabase, {
|
||||
databaseKey,
|
||||
}),
|
||||
},
|
||||
{ children: connection.label },
|
||||
]}
|
||||
/>
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!canSave}
|
||||
onCancel={() =>
|
||||
navigate(SettingsPath.IntegrationDatabase, {
|
||||
databaseKey,
|
||||
})
|
||||
}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</SettingsHeaderContainer>
|
||||
{hasSyncedTables && (
|
||||
<Info
|
||||
text={t`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"
|
||||
/>
|
||||
)}
|
||||
<Section>
|
||||
<H2Title
|
||||
title={t`Edit Connection`}
|
||||
description={t`Edit the information to connect your database`}
|
||||
/>
|
||||
|
||||
<SettingsIntegrationDatabaseConnectionForm
|
||||
databaseKey={databaseKey}
|
||||
disabled={hasSyncedTables}
|
||||
/>
|
||||
</Section>
|
||||
</FormProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
-57
@@ -1,57 +0,0 @@
|
||||
import { type WatchQueryFetchPolicy } from '@apollo/client';
|
||||
import { useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
|
||||
import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
|
||||
import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/useIsSettingsIntegrationEnabled';
|
||||
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
|
||||
import { AppPath } from 'twenty-shared/types';
|
||||
import { useNavigateApp } from '~/hooks/useNavigateApp';
|
||||
|
||||
export const useDatabaseConnection = ({
|
||||
fetchPolicy,
|
||||
}: {
|
||||
fetchPolicy?: WatchQueryFetchPolicy;
|
||||
}) => {
|
||||
const { databaseKey = '', connectionId = '' } = useParams();
|
||||
const navigateApp = useNavigateApp();
|
||||
|
||||
const [integrationCategoryAll] = useSettingsIntegrationCategories();
|
||||
const integration = integrationCategoryAll.integrations.find(
|
||||
({ from: { key } }) => key === databaseKey,
|
||||
);
|
||||
|
||||
const isIntegrationEnabled = useIsSettingsIntegrationEnabled(databaseKey);
|
||||
|
||||
const isIntegrationAvailable = !!integration && isIntegrationEnabled;
|
||||
|
||||
const { connection, loading } = useGetDatabaseConnection({
|
||||
databaseKey,
|
||||
connectionId,
|
||||
skip: !isIntegrationAvailable,
|
||||
fetchPolicy,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isIntegrationAvailable || (!loading && !connection)) {
|
||||
navigateApp(AppPath.NotFound);
|
||||
}
|
||||
}, [
|
||||
integration,
|
||||
databaseKey,
|
||||
navigateApp,
|
||||
isIntegrationAvailable,
|
||||
connection,
|
||||
loading,
|
||||
]);
|
||||
|
||||
const { tables } = useGetDatabaseConnectionTables({
|
||||
connectionId,
|
||||
skip: !connection,
|
||||
shouldFetchPendingSchemaUpdates: true,
|
||||
fetchPolicy,
|
||||
});
|
||||
|
||||
return { connection, integration, databaseKey, tables };
|
||||
};
|
||||
-103
@@ -1,103 +0,0 @@
|
||||
import identity from 'lodash.identity';
|
||||
import isEmpty from 'lodash.isempty';
|
||||
import pickBy from 'lodash.pickby';
|
||||
import { z } from 'zod';
|
||||
|
||||
import {
|
||||
settingsIntegrationPostgreSQLConnectionFormSchema,
|
||||
settingsIntegrationStripeConnectionFormSchema,
|
||||
} from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
|
||||
import { CustomError } from 'twenty-shared/utils';
|
||||
import { type RemoteServer } from '~/generated-metadata/graphql';
|
||||
|
||||
export const getEditionSchemaForForm = (databaseKey: string) => {
|
||||
switch (databaseKey) {
|
||||
case 'postgresql':
|
||||
return settingsIntegrationPostgreSQLConnectionFormSchema.extend({
|
||||
password: z.string().optional(),
|
||||
});
|
||||
case 'stripe':
|
||||
return settingsIntegrationStripeConnectionFormSchema;
|
||||
default:
|
||||
throw new CustomError(
|
||||
`No schema found for database key: ${databaseKey}`,
|
||||
'NO_SCHEMA_FOUND',
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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,
|
||||
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(
|
||||
`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(
|
||||
{
|
||||
user: formValues.user,
|
||||
password: formValues.password,
|
||||
},
|
||||
identity,
|
||||
),
|
||||
foreignDataWrapperOptions: pickBy(
|
||||
{
|
||||
dbname: formValues.dbname,
|
||||
host: formValues.host,
|
||||
port: formValues.port,
|
||||
},
|
||||
identity,
|
||||
),
|
||||
schema: formValues.schema,
|
||||
label: formValues.label,
|
||||
};
|
||||
|
||||
return pickBy(formattedValues, (obj) => !isEmpty(obj));
|
||||
}
|
||||
case 'stripe':
|
||||
return {
|
||||
foreignDataWrapperOptions: {
|
||||
api_key: formValues.api_key,
|
||||
},
|
||||
label: formValues.label,
|
||||
};
|
||||
default:
|
||||
throw new CustomError(
|
||||
`Cannot format values for database key: ${databaseKey}`,
|
||||
'CANNOT_FORMAT_VALUES',
|
||||
);
|
||||
}
|
||||
};
|
||||
-35
@@ -1,45 +1,10 @@
|
||||
import { MOCK_REMOTE_DATABASES } from '@/settings/integrations/constants/MockRemoteDatabases';
|
||||
import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationRequest';
|
||||
import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationZapier';
|
||||
import { type SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
|
||||
import { getSettingsIntegrationAll } from '@/settings/integrations/utils/getSettingsIntegrationAll';
|
||||
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
import { FeatureFlagKey } from '~/generated/graphql';
|
||||
|
||||
export const useSettingsIntegrationCategories =
|
||||
(): SettingsIntegrationCategory[] => {
|
||||
const isAirtableIntegrationEnabled = useIsFeatureEnabled(
|
||||
FeatureFlagKey.IS_AIRTABLE_INTEGRATION_ENABLED,
|
||||
);
|
||||
const isAirtableIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
|
||||
({ name }) => name === 'airtable',
|
||||
)?.isActive;
|
||||
|
||||
const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
|
||||
FeatureFlagKey.IS_POSTGRESQL_INTEGRATION_ENABLED,
|
||||
);
|
||||
const isPostgresqlIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
|
||||
({ name }) => name === 'postgresql',
|
||||
)?.isActive;
|
||||
|
||||
const isStripeIntegrationEnabled = useIsFeatureEnabled(
|
||||
FeatureFlagKey.IS_STRIPE_INTEGRATION_ENABLED,
|
||||
);
|
||||
const isStripeIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
|
||||
({ name }) => name === 'stripe',
|
||||
)?.isActive;
|
||||
|
||||
const allIntegrations = getSettingsIntegrationAll({
|
||||
isAirtableIntegrationEnabled,
|
||||
isAirtableIntegrationActive,
|
||||
isPostgresqlIntegrationEnabled,
|
||||
isPostgresqlIntegrationActive,
|
||||
isStripeIntegrationEnabled,
|
||||
isStripeIntegrationActive,
|
||||
});
|
||||
|
||||
return [
|
||||
...(allIntegrations.integrations.length > 0 ? [allIntegrations] : []),
|
||||
SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
|
||||
SETTINGS_INTEGRATION_REQUEST_CATEGORY,
|
||||
];
|
||||
|
||||
-48
@@ -1,48 +0,0 @@
|
||||
import { getSettingsIntegrationAll } from '../getSettingsIntegrationAll';
|
||||
|
||||
describe('getSettingsIntegrationAll', () => {
|
||||
it('should return null if imageUrl is null', () => {
|
||||
expect(
|
||||
getSettingsIntegrationAll({
|
||||
isAirtableIntegrationActive: true,
|
||||
isAirtableIntegrationEnabled: true,
|
||||
isPostgresqlIntegrationActive: true,
|
||||
isPostgresqlIntegrationEnabled: true,
|
||||
isStripeIntegrationActive: true,
|
||||
isStripeIntegrationEnabled: true,
|
||||
}),
|
||||
).toStrictEqual({
|
||||
integrations: [
|
||||
{
|
||||
from: {
|
||||
image: '/images/integrations/airtable-logo.png',
|
||||
key: 'airtable',
|
||||
},
|
||||
link: '/settings/integrations/airtable',
|
||||
text: 'Airtable',
|
||||
type: 'Active',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
image: '/images/integrations/postgresql-logo.png',
|
||||
key: 'postgresql',
|
||||
},
|
||||
link: '/settings/integrations/postgresql',
|
||||
text: 'PostgreSQL',
|
||||
type: 'Active',
|
||||
},
|
||||
{
|
||||
from: {
|
||||
image: '/images/integrations/stripe-logo.png',
|
||||
key: 'stripe',
|
||||
},
|
||||
link: '/settings/integrations/stripe',
|
||||
text: 'Stripe',
|
||||
type: 'Active',
|
||||
},
|
||||
],
|
||||
key: 'all',
|
||||
title: 'All',
|
||||
});
|
||||
});
|
||||
});
|
||||
-58
@@ -1,58 +0,0 @@
|
||||
import { type SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
|
||||
import { type SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
|
||||
import { SettingsPath } from 'twenty-shared/types';
|
||||
import { getSettingsPath } from 'twenty-shared/utils';
|
||||
|
||||
export const getSettingsIntegrationAll = ({
|
||||
isAirtableIntegrationEnabled,
|
||||
isAirtableIntegrationActive,
|
||||
isPostgresqlIntegrationEnabled,
|
||||
isPostgresqlIntegrationActive,
|
||||
isStripeIntegrationEnabled,
|
||||
isStripeIntegrationActive,
|
||||
}: {
|
||||
isAirtableIntegrationEnabled: boolean;
|
||||
isAirtableIntegrationActive: boolean;
|
||||
isPostgresqlIntegrationEnabled: boolean;
|
||||
isPostgresqlIntegrationActive: boolean;
|
||||
isStripeIntegrationEnabled: boolean;
|
||||
isStripeIntegrationActive: boolean;
|
||||
}): SettingsIntegrationCategory => ({
|
||||
key: 'all',
|
||||
title: 'All',
|
||||
integrations: [
|
||||
isAirtableIntegrationEnabled && {
|
||||
from: {
|
||||
key: 'airtable',
|
||||
image: '/images/integrations/airtable-logo.png',
|
||||
},
|
||||
type: isAirtableIntegrationActive ? 'Active' : 'Add',
|
||||
text: 'Airtable',
|
||||
link: getSettingsPath(SettingsPath.IntegrationDatabase, {
|
||||
databaseKey: 'airtable',
|
||||
}),
|
||||
},
|
||||
isPostgresqlIntegrationEnabled && {
|
||||
from: {
|
||||
key: 'postgresql',
|
||||
image: '/images/integrations/postgresql-logo.png',
|
||||
},
|
||||
type: isPostgresqlIntegrationActive ? 'Active' : 'Add',
|
||||
text: 'PostgreSQL',
|
||||
link: getSettingsPath(SettingsPath.IntegrationDatabase, {
|
||||
databaseKey: 'postgresql',
|
||||
}),
|
||||
},
|
||||
isStripeIntegrationEnabled && {
|
||||
from: {
|
||||
key: 'stripe',
|
||||
image: '/images/integrations/stripe-logo.png',
|
||||
},
|
||||
type: isStripeIntegrationActive ? 'Active' : 'Add',
|
||||
text: 'Stripe',
|
||||
link: getSettingsPath(SettingsPath.IntegrationDatabase, {
|
||||
databaseKey: 'stripe',
|
||||
}),
|
||||
},
|
||||
].filter(Boolean) as SettingsIntegration[],
|
||||
});
|
||||
Reference in New Issue
Block a user