admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: fetch database connection tables in Settings/Integrations/Datab… (#4882)

Browse Source 
…ase/Connection

Closes #4758

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thaïs
2024-04-09 14:22:15 +02:00
committed by GitHub
parent 19df43156e
commit 704f7f6d8e
21 changed files with 275 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/twenty-front/src/modules/databases/graphql/fragments/databaseConnectionFragment.ts Normal file
View File

@ -0,0 +1,12 @@
import { gql } from '@apollo/client';
export const DATABASE_CONNECTION_FRAGMENT = gql`
fragment RemoteServerFields on RemoteServer {
id
createdAt
foreignDataWrapperId
foreignDataWrapperOptions
foreignDataWrapperType
updatedAt
}
`;

8
packages/twenty-front/src/modules/databases/graphql/mutations/createOneDatabaseConnection.ts
View File

@ -1,12 +1,12 @@
import { gql } from '@apollo/client';
import { DATABASE_CONNECTION_FRAGMENT } from '@/databases/graphql/fragments/databaseConnectionFragment';
export const CREATE_ONE_DATABASE_CONNECTION = gql`
${DATABASE_CONNECTION_FRAGMENT}
mutation createServer($input: CreateRemoteServerInput!) {
createOneRemoteServer(input: $input) {
id
foreignDataWrapperId
foreignDataWrapperOptions
foreignDataWrapperType
...RemoteServerFields
}
}
`;

11
packages/twenty-front/src/modules/databases/graphql/queries/findManyDatabaseConnectionTables.ts Normal file
View File

@ -0,0 +1,11 @@
import { gql } from '@apollo/client';
export const GET_MANY_DATABASE_CONNECTION_TABLES = gql`
query GetManyDatabaseConnectionTables($input: RemoteServerIdInput!) {
findAvailableRemoteTablesByServerId(input: $input) {
name
schema
status
}
}
`;

10
packages/twenty-front/src/modules/databases/graphql/queries/findManyDatabaseConnections.ts
View File

@ -1,14 +1,12 @@
import { gql } from '@apollo/client';
import { DATABASE_CONNECTION_FRAGMENT } from '@/databases/graphql/fragments/databaseConnectionFragment';
export const GET_MANY_DATABASE_CONNECTIONS = gql`
${DATABASE_CONNECTION_FRAGMENT}
query GetManyDatabaseConnections($input: RemoteServerTypeInput!) {
findManyRemoteServersByType(input: $input) {
id
createdAt
foreignDataWrapperId
foreignDataWrapperOptions
foreignDataWrapperType
updatedAt
...RemoteServerFields
}
}
`;

12
packages/twenty-front/src/modules/databases/graphql/queries/findOneDatabaseConnection.ts Normal file
View File

@ -0,0 +1,12 @@
import { gql } from '@apollo/client';
import { DATABASE_CONNECTION_FRAGMENT } from '@/databases/graphql/fragments/databaseConnectionFragment';
export const GET_ONE_DATABASE_CONNECTION = gql`
${DATABASE_CONNECTION_FRAGMENT}
query GetOneDatabaseConnection($input: RemoteServerIdInput!) {
findOneRemoteServerById(input: $input) {
...RemoteServerFields
}
}
`;

47
packages/twenty-front/src/modules/databases/hooks/useGetDatabaseConnection.ts Normal file
View File

@ -0,0 +1,47 @@
import { useQuery } from '@apollo/client';
import { GET_ONE_DATABASE_CONNECTION } from '@/databases/graphql/queries/findOneDatabaseConnection';
import { getForeignDataWrapperType } from '@/databases/utils/getForeignDataWrapperType';
import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
import {
GetOneDatabaseConnectionQuery,
GetOneDatabaseConnectionQueryVariables,
} from '~/generated-metadata/graphql';
type UseGetDatabaseConnectionParams = {
databaseKey: string;
connectionId: string;
skip?: boolean;
};
export const useGetDatabaseConnection = ({
databaseKey,
connectionId,
skip,
}: UseGetDatabaseConnectionParams) => {
const apolloMetadataClient = useApolloMetadataClient();
const foreignDataWrapperType = getForeignDataWrapperType(databaseKey);
const { data, loading } = useQuery<
GetOneDatabaseConnectionQuery,
GetOneDatabaseConnectionQueryVariables
>(GET_ONE_DATABASE_CONNECTION, {
client: apolloMetadataClient ?? undefined,
skip: skip || !apolloMetadataClient || !foreignDataWrapperType,
variables: {
input: {
id: connectionId,
},
},
});
const connection = data?.findOneRemoteServerById ?? null;
return {
connection:
connection?.foreignDataWrapperType === foreignDataWrapperType
? connection
: null,
loading,
};
};

37
packages/twenty-front/src/modules/databases/hooks/useGetDatabaseConnectionTables.ts Normal file
View File

@ -0,0 +1,37 @@
import { useQuery } from '@apollo/client';
import { GET_MANY_DATABASE_CONNECTION_TABLES } from '@/databases/graphql/queries/findManyDatabaseConnectionTables';
import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
import {
GetManyDatabaseConnectionTablesQuery,
GetManyDatabaseConnectionTablesQueryVariables,
} from '~/generated-metadata/graphql';
type UseGetDatabaseConnectionTablesParams = {
connectionId: string;
skip?: boolean;
};
export const useGetDatabaseConnectionTables = ({
connectionId,
skip,
}: UseGetDatabaseConnectionTablesParams) => {
const apolloMetadataClient = useApolloMetadataClient();
const { data } = useQuery<
GetManyDatabaseConnectionTablesQuery,
GetManyDatabaseConnectionTablesQueryVariables
>(GET_MANY_DATABASE_CONNECTION_TABLES, {
client: apolloMetadataClient ?? undefined,
skip: skip || !apolloMetadataClient,
variables: {
input: {
id: connectionId,
},
},
});
return {
tables: data?.findAvailableRemoteTablesByServerId || [],
};
};

18
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus.tsx
View File

@ -1,18 +0,0 @@
import { Status } from '@/ui/display/status/components/Status';
type SettingsIntegrationDatabaseConnectedTablesStatusProps = {
connectedTablesCount: number;
};
export const SettingsIntegrationDatabaseConnectedTablesStatus = ({
connectedTablesCount,
}: SettingsIntegrationDatabaseConnectedTablesStatusProps) => (
<Status
color="green"
text={
connectedTablesCount === 1
? `1 tracked table`
: `${connectedTablesCount} tracked tables`
}
/>
);

5
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionForm.tsx
View File

@ -41,8 +41,8 @@ export const SettingsIntegrationPostgreSQLConnectionForm = () => {
{ name: 'host' as const, label: 'Host' },
{ name: 'port' as const, label: 'Port' },
{ name: 'username' as const, label: 'Username' },
{ name: 'password' as const, label: 'Password' },
].map(({ name, label }) => (
{ name: 'password' as const, label: 'Password', type: 'password' },
].map(({ name, label, type }) => (
<Controller
key={name}
name={name}
@ -53,6 +53,7 @@ export const SettingsIntegrationPostgreSQLConnectionForm = () => {
value={value}
onChange={onChange}
fullWidth
type={type}
/>
)}
/>

33
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionSyncStatus.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
import { Status } from '@/ui/display/status/components/Status';
import { RemoteTableStatus } from '~/generated-metadata/graphql';
type SettingsIntegrationDatabaseConnectionSyncStatusProps = {
connectionId: string;
skip?: boolean;
};
export const SettingsIntegrationDatabaseConnectionSyncStatus = ({
connectionId,
skip,
}: SettingsIntegrationDatabaseConnectionSyncStatusProps) => {
const { tables } = useGetDatabaseConnectionTables({
connectionId,
skip,
});
const syncedTables = tables.filter(
(table) => table.status === RemoteTableStatus.Synced,
);
return (
<Status
color="green"
text={
syncedTables.length === 1
? `1 tracked table`
: `${syncedTables.length} tracked tables`
}
/>
);
};

24
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
View File

@ -3,11 +3,11 @@ import styled from '@emotion/styled';
import { IconChevronRight } from 'twenty-ui';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { SettingsIntegrationDatabaseConnectedTablesStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus';
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/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';
import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
type SettingsIntegrationDatabaseConnectionsListCardProps = {
integration: SettingsIntegration;
@ -38,14 +38,6 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
}: SettingsIntegrationDatabaseConnectionsListCardProps) => {
const navigate = useNavigate();
// TODO: Use real remote database tables data from backend
const tables = mockedRemoteObjectIntegrations[0].connections[0].tables;
const getConnectionDbName = (connection: RemoteServer) =>
integration.from.key === 'postgresql'
? connection.foreignDataWrapperOptions?.dbname
: '';
return (
<SettingsListCard
items={connections}
@ -54,18 +46,18 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
<StyledDatabaseLogo alt="" src={integration.from.image} />
</StyledDatabaseLogoContainer>
)}
RowRightComponent={({ item: _connection }) => (
RowRightComponent={({ item: connection }) => (
<StyledRowRightContainer>
<SettingsIntegrationDatabaseConnectedTablesStatus
connectedTablesCount={tables.length}
<SettingsIntegrationDatabaseConnectionSyncStatus
connectionId={connection.id}
/>
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
onRowClick={(connection) =>
navigate(`./${getConnectionDbName(connection)}`)
onRowClick={(connection) => navigate(`./${connection.id}`)}
getItemLabel={(connection) =>
getConnectionDbName({ integration, connection })
}
getItemLabel={getConnectionDbName}
hasFooter
footerButtonLabel="Add connection"
onFooterButtonClick={() => navigate('./new')}

11
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard.tsx
View File

@ -4,9 +4,10 @@ import { z } from 'zod';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { Toggle } from '@/ui/input/components/Toggle';
import { RemoteTable, RemoteTableStatus } from '~/generated-metadata/graphql';
export const settingsIntegrationsDatabaseTablesSchema = z.object({
syncedTablesById: z.record(z.boolean()),
syncedTablesByName: z.record(z.boolean()),
});
export type SettingsIntegrationsDatabaseTablesFormValues = z.infer<
@ -14,7 +15,7 @@ export type SettingsIntegrationsDatabaseTablesFormValues = z.infer<
>;
type SettingsIntegrationDatabaseTablesListCardProps = {
tables: { id: string; name: string; isSynced?: boolean }[];
tables: RemoteTable[];
};
const StyledRowRightContainer = styled.div`
@ -31,13 +32,13 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
return (
<SettingsListCard
items={tables}
items={tables.map((table) => ({ id: table.name, ...table }))}
RowRightComponent={({ item: table }) => (
<StyledRowRightContainer>
<Controller
name={`syncedTablesById.${table.id}`}
name={`syncedTablesByName.${table.name}`}
control={control}
defaultValue={!!table.isSynced}
defaultValue={table.status === RemoteTableStatus.Synced}
render={({ field: { onChange, value } }) => (
<Toggle value={value} onChange={onChange} />
)}

15
packages/twenty-front/src/modules/settings/integrations/utils/getConnectionDbName.ts Normal file
View File

@ -0,0 +1,15 @@
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) =>
integration.from.key === 'postgresql'
? connection.foreignDataWrapperOptions?.dbname
: '';

2
packages/twenty-front/src/modules/types/SettingsPath.ts
View File

@ -22,7 +22,7 @@ export enum SettingsPath {
DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
Integrations = 'integrations',
IntegrationDatabase = 'integrations/:databaseKey',
IntegrationDatabaseConnection = 'integrations/:databaseKey/:connectionKey',
IntegrationDatabaseConnection = 'integrations/:databaseKey/:connectionId',
IntegrationNewDatabaseConnection = 'integrations/:databaseKey/new',
DevelopersNewWebhook = 'webhooks/new',
DevelopersNewWebhookDetail = 'webhooks/:webhookId',